继续封装jQuery框架的模块功能

Posted 2020-08-19

在前两天已经封装了框架的选择器模块的函数了，在这里为了保持代码的完整性，以及体现框架模块的功能。这里用一个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)

哎呀！十二点了，今天就写到这吧。