当前访客身份:游客 [ 登录  | 注册加入尚学堂]
启用新域名sxt.cn
新闻资讯

Javascript 匿名函数与封装

helloworld 发表于 2年前  | 评论(0 )| 阅读次数(6625 )|   0 人收藏此文章,   我要收藏


迷惑了一会儿不同JS库的封装后,终于有了点头绪。大致就是:

创建一个自调用匿名函数,设计参数window,并传入window对象。

而这个过程的目的则是,

使得自身的代码不会被其他代码污染,同时也可以不污染其他代码。

jQuery 封装

于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的

(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 );

其中的

console.log('hello');

是用以验证是否按开头说的这样工作,于是我们就可以在window中调用jQuery

window.$

或者是

window.jQuery

于是我们就可以创建一个类似的封装

(function(window, undefined) { var PH = function() { } })(window)

相比于上面只是少了两步

  • 定义jQuery的符号及全局调用
  • 异步支持

于是找了下更早期的jQuery的封装,方法上大致是一样的, 除了。。

if (typeof window.jQuery == "undefined") { var jQuery = function() {}; if (typeof $ != "undefined")
        jQuery._$ = $; var $ = jQuery;
};

很神奇的判断方法,以致于我们没有办法重写上一步的jQuery。于是只好看看最新的jQuery的封装是怎样的。于是就打开了2.1.1,发现除了加了很多功能以外,基本上思想还是不变的

(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; }));

在使用浏览器的情况下

typeof module ="undefined"

所以上面的情况是针对于使用Node.js等的情况下判断的,这也表明jQuery正在变得臃肿。

Backbone 封装

打开了Backbone看了一下

(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的依赖,百

define(['underscore', 'jquery', 'exports'], function(_, $, exports) { root.Backbone = factory(root, exports, _, $); });

表明backbone是原生支持requirejs的。

Underscore 封装

于是,又看了看Underscore,发现这个库又占领了一个符号 _

(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
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183