Javascript中的匿名函數與封裝介紹

 這篇文章主要介紹了Javascript中的匿名函數與封裝介紹,本文分析了jQuery 封裝、Backbone 封裝、Underscore 封裝等內容,需要的朋友可以參考下

   

迷惑了一會兒不同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，發現除了加了很多功能以外，基本上思想還是不變的

代碼如下:
(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()方法。