本文實例講述了jQuery中$原理。分享給大家供大家參考,具體如下:
1、外層沙箱及命名空間$
為了避免聲明了一些全局變量而污染,把代碼放在一個“沙箱執行”,jQuery具體的實現,都被包含在了一個立即執行函數構造的閉包里面,然后在暴露出命名空間(可以為API,函數,對象),如只暴露 $ 和 jQuery 這2個變量給外界:
(function(window, undefined) { // 用一個函數域包起來,就是所謂的沙箱 // 在這里邊var定義的變量,屬于這個函數域內的局部變量,避免污染全局 // 把當前沙箱需要的外部變量通過函數參數引入進來 // 只要保證參數對內提供的接口的一致性,還可以隨意替換傳進來的這個參數 "use strict"; window.jQuery = window.$ = jQuery; ... // jQuery代碼}) (window);jQuery有一個針對壓縮優化細節,在代碼壓縮時,window和undefined都可以壓縮為1個字母且確保它們就是window和undefined。外層函數只傳了一個參數,因此沙箱執行時,u自然會undefined,把9個字母縮成1個字母,可以看出壓縮后的代碼減少一些字節數。
// 壓縮策略// w -> window , u -> undefined(function(w, u) { "use strict"; w.jQuery = w.$ = jQuery; var a; if (a == u) return;})(window);2、jQuery 無 new 構造
實例化一個jQuery對象的方法:
$('#text').text('myJQuery'); // 無 new 構造等價于:
var text = new $('#text');text.text('myJQuery');使用jQuery時一般都使用無new的構造方式,直接$('')進行構造,這也是jQuery十分便捷的一個地方。當使用無new構造方式時,其本質是相當于new jQuery(),在jQuery內部的實現方式是:
(function(window, undefined) { // ... jQuery = function(selector, context) { // 實例化方法jQuery()實際上是調用了其拓展的原型方法 jQuery.fn.init return new jQuery.fn.init(selector, context, rootjQuery); }, // jQuery.prototype是jQuery的原型,掛載在上面的方法,即可讓所有生成的jQuery對象使用 jQuery.fn = jQuery.prototype = { // 實例化方法,這個方法可以稱作 jQuery 對象構造器 init: function(selector, context, rootjQuery) { // ... } } // jQuery 沒有使用 new 運算符將 jQuery 實例化,而是直接調用其函數 // 要實現這樣,那么 jQuery 就要看成一個類,且返回一個正確的實例,且實例還要能正確訪問 jQuery 類原型上的屬性與方法 // jQuery 的方式是通過原型傳遞解決問題,把 jQuery 的原型傳遞給jQuery.prototype.init.prototype,所以通過這個方法生成的實例 this 所指向的仍然是 jQuery.fn,所以能正確訪問 jQuery 類原型上的屬性與方法 jQuery.fn.init.prototype = jQuery.fn;})(window);
新聞熱點
疑難解答
圖片精選