Javascript中的匿名函數與封裝介紹_javascript技巧
May 16, 2016 pm 04:09 PM迷惑了一會兒不同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()方法。

熱門文章

熱門文章

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

集邦諮詢:英偉達 Blackwell 平台產品帶動台積電今年 CoWoS 產能提升 150%

AMD 'Strix Halo” FP11 封裝尺寸曝光:和英特爾 LGA1700 相當,比 Phoenix 大 60%
