源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Javascript中的匿名函数与封装介绍

  • 时间:2022-10-03 10:28 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript中的匿名函数与封装介绍
迷惑了一会儿不同JS库的封装后,终于有了点头绪。大致就是:
[u]复制代码[/u] 代码如下:
创建一个自调用匿名函数,设计参数window,并传入window对象。
而这个过程的目的则是,
[u]复制代码[/u] 代码如下:
使得自身的代码不会被其他代码污染,同时也可以不污染其他代码。
[b]jQuery 封装[/b] 于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的
[u]复制代码[/u] 代码如下:
(function( window, undefined ) { var jQuery = (function() {console.log('hello');}); window.jQuery = window.$ = jQuery; if ( typeof define === "function" && define.amd && define.amd.jQuery ) {     define( "jquery", [], function () { return jQuery; } ); } })( window );
其中的
[u]复制代码[/u] 代码如下:
console.log('hello');
是用以验证是否按开头说的这样工作,于是我们就可以在window中调用jQuery
[u]复制代码[/u] 代码如下:
window.$
或者是
[u]复制代码[/u] 代码如下:
window.jQuery
于是我们就可以创建一个类似的封装
[u]复制代码[/u] 代码如下:
(function(window, undefined) {     var PH = function() {     } })(window)
相比于上面只是少了两步 1.定义jQuery的符号及全局调用 2.异步支持 于是找了下更早期的jQuery的封装,方法上大致是一样的, 除了。。
[u]复制代码[/u] 代码如下:
if (typeof window.jQuery == "undefined") {     var jQuery = function() {};     if (typeof $ != "undefined")         jQuery._$ = $;     var $ = jQuery; };
很神奇的判断方法,以致于我们没有办法重写上一步的jQuery。于是只好看看最新的jQuery的封装是怎样的。于是就打开了2.1.1,发现除了加了很多功能以外,基本上思想还是不变的
[u]复制代码[/u] 代码如下:
(function(global, factory) {     if (typeof module === "object" && typeof module.exports === "object") {         module.exports = global.document ?             factory(global, true) :             function(w) {                 if (!w.document) {                     throw new Error("jQuery requires a window with a document");                 }                 return factory(w);         };     } else {         factory(global);     } }(typeof window !== "undefined" ? window : this, function(window, noGlobal) {     var jQuery = function() {         console.log('jQuery');     };     if (typeof define === "function" && define.amd) {         define("jquery", [], function() {             return jQuery;         });     };     strundefined = typeof undefined;     if (typeof noGlobal === strundefined) {         window.jQuery = window.$ = jQuery;     };     return jQuery; }));
在使用浏览器的情况下
[u]复制代码[/u] 代码如下:
typeof module ="undefined"
所以上面的情况是针对于使用Node.js等的情况下判断的,这也表明jQuery正在变得臃肿。 [b]Backbone 封装[/b] 打开了Backbone看了一下
[u]复制代码[/u] 代码如下:
(function(root, factory) {     if (typeof define === 'function' && define.amd) {         define(['underscore', 'jquery', 'exports'], function(_, $, exports) {             root.Backbone = factory(root, exports, _, $);         });     } else if (typeof exports !== 'undefined') {         var _ = require('underscore');         factory(root, exports, _);     } else {         root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));     } }(this, function(root, Backbone, _, $) {     Backbone.$ = $;     return Backbone; }));
除了异步支持,也体现了其对于jQuery和underscore的依赖,百
[u]复制代码[/u] 代码如下:
        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {             root.Backbone = factory(root, exports, _, $);         });
表明backbone是原生支持requirejs的。 [b]Underscore 封装 [/b]于是,又看了看Underscore,发现这个库又占领了一个符号 _
[u]复制代码[/u] 代码如下:
(function() {     var root = this;     var _ = function(obj) {         if (obj instanceof _) return obj;         if (!(this instanceof _)) return new _(obj);         this._wrapped = obj;     };     if (typeof exports !== 'undefined') {         if (typeof module !== 'undefined' && module.exports) {             exports = module.exports = _;         }         exports._ = _;     } else {         root._ = _;     }     if (typeof define === 'function' && define.amd) {         define('underscore', [], function() {             return _;         });     } }.call(this));
总体上也和差不多都是匿名函数,除了最后用的是call()方法。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部