在前两天已经封装了框架的选择器模块的函数了,在这里为了保持代码的完整性,以及体现框架模块的功能。这里用一个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 itMei(selector,context){ 14 return new itMei.fn.init(selector,context); 15 } 16 17 var push = Array.prototype.push; //将数组的push方法存起来 18 //3、添加原型属性方法 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 //4、在下面改变init函数的原型对象,使的init的实例对象可以访问到incast.fn中的方法 45 itMei.fn.init.prototype = itMei.fn; 46 47 //5、封装一个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)
哎呀!十二点了,今天就写到这吧。