繼續封裝jQuery框架的模塊功能

在前兩天已經封裝了框架的選擇器模塊的函數了,在這裏爲了保持代碼的完整性,以及體現框架模塊的功能。這裏用一個h5的方法,簡單表示選擇器模塊。node

 1 (function(window){ //傳入window全局對象,能夠減小做用域的訪問深度
 2      //一、選擇器模塊
 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      //二、框架的入口函數
13      function itMei(selector,context){
14     return new itMei.fn.init(selector,context);
15      }
16 
17    var push = Array.prototype.push;  //將數組的push方法存起來
18 //三、添加原型屬性方法
19 itMei.fn = itMei.prototype={
20     constructor:itMei,
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 //四、在下面改變init函數的原型對象,使的init的實例對象能夠訪問到incast.fn中的方法
45 itMei.fn.init.prototype = itMei.fn;
46 
47 //五、封裝一個extend方法,用於以後擴展方法
48 //extend方法的主要功能是完成拷貝,將一個對象中的方法、屬性拷貝到另外一個對象中
49 itMei.fn.extend = itMei.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)

哎呀!十二點了,今天就寫到這吧。編程

相關文章
相關標籤/搜索