Javascript中的匿名函數與封裝介紹_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)

相較於上面只是少了兩步

1.定義jQuery的符號及全域呼叫
2.異步支持

於是找了下更早的jQuery的封裝，方法上大致是一樣的， 除了。 。

複製程式碼 程式碼如下:

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

    var $ = jQuery;
};

很神奇的判斷方法，以致於我們沒有辦法重寫上一步的jQuery。於是只好看看最新的jQuery的封裝是怎麼樣的。於是打開了2.1.1，發現除了加了很多功能以外，基本上思想還是不變的

複製程式碼 程式碼如下:

（函數（全局，工廠）{

    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = global.document ?
            工廠（全域，真實）：
            函數（w）{
                if (!w.document) {
                    throw new Error("jQuery 需要一個有文件的視窗");
                }
                返回工廠(w);
        };
    } 其他 {
        工廠（全球）；
    }

}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
    var jQuery = function() {
        console.log('jQuery');
    };
    if (typeof Define === "function" && Define.amd) {
        定義（“jquery”，[]，函數（）{
            返回 jQuery;
        });
    };
    strundefine = typeof undefined;
    if (typeof noGlobal === srundefine) {
        window.jQuery = window.$ = jQuery;
    };
    返回 jQuery;
}));

在使用瀏覽器的情況

複製程式碼以下程式碼：

模組類型=“未定義”

所以上面的情況是針對使用Node.js等的情況下判斷的，這也顯示jQuery正在繪製圖表。

主幹封裝

打開了Backbone看劇情

複製程式碼以下程式碼：

（函數（根，工廠）{

    if (typeof Define === 'function' && Define.amd) {
        定義（['底線'，'jquery'，'導出']，函數（_，$，導出）{
            root.Backbone = 工廠(root, 出口, _, $);
        });

    } else if (typeof Exports !== '未定義') {
        var _ = require('底線');
        工廠（根，出口，_）；

    } 其他 {
        root.Backbone = 工廠(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
    }

}（這個，函數（根，Backbone，_，$）{
    骨幹.$ = $;
    返回骨幹網路；

}));

除了非同步支持，也支持了其jQuery對於和下劃線的依賴，百

複製程式碼以下程式碼：

        定義（['底線'，'jquery'，'導出']，函數（_，$，導出）{
            root.Backbone = 工廠(root, 出口, _, $);
        });

顯示backbone是初步支持requirejs的。

底線封裝
於是，又看了看下劃線，發現這個庫又佔領了一個符號_

複製程式碼如下程式碼：

(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()方法。