Javascript 匿名函数与封装

Posted by: Phodal gms 1 day ago

Javascript 匿名函数与封装

迷惑了一会儿不同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()方法。