繼續封裝jQuery架構的模組功能

標籤：pre   cto   架構   作用   window   清空   for   str   選擇   

在前兩天已經封裝了架構的選取器模組的函數了，在這裡為了保持代碼的完整性，以及體現架構模組的功能。這裡用一個h5的方法，簡單表示選取器模組。

 1 (function(window){ //傳入window全域對象，可以減少範圍的訪問深度 2      //1、選取器模組 3         var select = (function () { 4             return function (selector, context) { 5                 if (context) { 6                     return context.querySelectorAll(selector); 7                 } else { 8                     return document.querySelectorAll(selector); 9                 }10             }11         }());12      //2、架構的入口函數13      function itcast(selector,context){14     return new itcast.fn.init(selector,context);15      }16 17    var push = Array.prototype.push;  //將數組的push方法存起來18 //3、添加原型屬性方法19 itcast.fn = itcast.prototype={20     constructor:itcast,21     splice:Array.prototype.splice, //將數組的splice方法儲存為當前對象的屬性，方便調用22     init:function(selector,context){23         if(selector == null) return this;24         //借用數組的splice方法，清空原來的元素25         this.splice.call(this,0,this.length);26         if(typeof selector ==="string"){27            if(selector.charAt(0)==="<" && selector.charAt(selector.length-1)===">" && selector.length>=3){28                  //表示selector是一個帶有標籤的字串的情況29                  var div = document.createElement("div");30                  //div其實就是作為一個中間量，方便將元素以偽數組形式儲存到init對象中31                  div.innerHTML = selector;32                  push.apply(this,div.childNodes);33            }else{34                  push.apply(this,select(selector,context);35            }    36         }else if(selector.nodeType){  //selector是一個dom元素的情況37             this[0] = selector;38             this.length =1;39         }40         return this;  //返回當前的init對象，實現鏈式編程41     }42 };43 44 //4、在下面改變init函數的原型對象，使的init的執行個體對象可以訪問到incast.fn中的方法45 itcast.fn.init.prototype = itcast.fn;46 47 //5、封裝一個extend方法，用於之後擴充方法48 //extend方法的主要功能是完成拷貝，將一個對象中的方法、屬性拷貝到另一個對象中49 itcast.fn.extend = itcast.extend = function(){50     var target;  //目標對象51     var sources =[];  //來源物件52     if(arguments.length===1){53         target =this;54         sources.push(arguments[0]);55     }else{56         target = arguments[0];57         sources.push.apply(sources,arguments);58         sources.splice(0,1);  //去除第一個元素，因為第一個元素是目標對象59     }60     for(var i=0;i<sources.length;i++){61         var source = sources[i];62         for(var key in source){63             target[key]=source[key];64         }65     }66     return target;  //返回的是拷貝之後的目標對象67 }68 })(window)

哎呀！十二點了，今天就寫到這吧。

繼續封裝jQuery架構的模組功能