在前兩天已經封裝了框架的選擇器模塊的函數了,在這裏爲了保持代碼的完整性,以及體現框架模塊的功能。這裏用一個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)
哎呀!十二點了,今天就寫到這吧。編程