當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
通过jQuery源码学习javascript(三)
生活随笔
收集整理的這篇文章主要介紹了
通过jQuery源码学习javascript(三)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
序 承接上兩篇繼續寫下去。我盡量把我明白的地方給大家說清楚。有些大家的提問我也有點搞不明白,如果有人能解答,再好不過了。 疑問 第一篇中有位博友提出了以下的問題,我也不太明白,如果有明白的,能否告知一、二。
?傳入window變量原因: 使window變量由全局變量變為局部變量,不需要將作用域鏈回退到頂層作用域,以便更快的訪問window。 在參數列表中增加undefined原因: 在自調用匿名函數的作用域內,確保undefined是真的未定義。 這樣設計的好處: 創建私有命名空間。函數體內的變量和方法,不會影響全局空間。不會與其他程序的變量發生沖突。 功能擴展extend() 根據一般的設計習慣,可以直接通過點(.)語法實現,或者在prototype對象結構中增加一個屬性即可。——jQuery框架是通過extend()函數來實現功能擴展的。 我們也做個類似的方法。——把指定參數對象包含的所有屬性復制給cQuery或cQuery.prototype對象。 (function(){var_cQuery = window.cQuery,cQuery = function(){return new cQuery.fn.init();};cQuery.fn = cQuery.prototype = {init : function () {return this;}};cQuery.fn.init.prototype = cQuery.fn;cQuery.extend = cQuery.fn.extend = function( obj ) {for (var prop in obj) {this[ prop ] = obj[ prop ];} return this;} cQuery.fn.extend({test : function() {console.log('測試!');} });window.C = window.cQuery = cQuery; })(); // 調用方式 C().test();
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
var str = "test"; for(var a in str){console.log(a + ":" + str[ a ]); }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??輸出結果
?
這是一個字符串對象,在使用for的時候,會出現上面的情況。
自調用匿名函數(function(){})(window) (function(window, undefined){// jquery code })(window);代碼解析:
第一個括號:創建一個匿名函數。
第二個括號:立即執行。
?傳入window變量原因: 使window變量由全局變量變為局部變量,不需要將作用域鏈回退到頂層作用域,以便更快的訪問window。 在參數列表中增加undefined原因: 在自調用匿名函數的作用域內,確保undefined是真的未定義。 這樣設計的好處: 創建私有命名空間。函數體內的變量和方法,不會影響全局空間。不會與其他程序的變量發生沖突。 功能擴展extend() 根據一般的設計習慣,可以直接通過點(.)語法實現,或者在prototype對象結構中增加一個屬性即可。——jQuery框架是通過extend()函數來實現功能擴展的。 我們也做個類似的方法。——把指定參數對象包含的所有屬性復制給cQuery或cQuery.prototype對象。 (function(){var_cQuery = window.cQuery,cQuery = function(){return new cQuery.fn.init();};cQuery.fn = cQuery.prototype = {init : function () {return this;}};cQuery.fn.init.prototype = cQuery.fn;cQuery.extend = cQuery.fn.extend = function( obj ) {for (var prop in obj) {this[ prop ] = obj[ prop ];} return this;} cQuery.fn.extend({test : function() {console.log('測試!');} });window.C = window.cQuery = cQuery; })(); // 調用方式 C().test();
?
好處: 1、方便用戶快速擴展jQuery框架的功能,不會破壞jQuery框架的原型結構。 2、方便管理。 注意: 通過prototype擴展的對象,我們必須通過實例化函數來調用(如cQuery().test(),而不能使用cQuery.test()) 對象url參數化param() (function(){var _cQuery = window.cQuery,cQuery = function(){return new cQuery.fn.init();}; cQuery.fn = cQuery.prototype = {init : function () {return this; }};cQuery.param = function(obj) {var prefix, s = [];for ( prefix in obj ) {s[ s.length ] = encodeURIComponent( prefix ) + "=" + encodeURIComponent( obj[ prefix ]);}return s.join( "&" );}cQuery.fn.init.prototype = cQuery.fn;window.C = window.cQuery = cQuery; })();var param = cQuery.param({"name":"chuanshanjia", "age":30}); console.log( param );? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?輸出結果
對象url參數化:有利于結構化,易于維護。如果在url后面加一坨的參數列表,難道看著不眼暈嗎??
總結 暫時寫到這里,如果大家有所補充,那最好不過了。——大家多交流互相學習下。 推薦?
休閑區 如果大家喜歡這個模塊的化,請留言。我統計一下,如果喜歡的人多的話,那我以后會在每篇博文的后面,都會放置這樣的模塊。——權當休息一下。 【當你學不進去的時候】----普瑞馬法則總結
以上是生活随笔為你收集整理的通过jQuery源码学习javascript(三)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: excel脚本
- 下一篇: android webview 字体被放