jquery模型(外壳实现)

详细解释:

  1、现在传入的参数是window,document,可以知道是它俩引用

  2、

3、

4、每次调用jquery方法,都会创建一个实例,但是内存并没有暴涨,原因是:jquery里面new 的这个实例,是一个局部变量,局部变量在没有被全局引用的情况下,会被浏览器

自动回收

  1 /*
  2     传入参数:
  3     1、标示度,一眼能够知道在那引用
  4     2、加快查找速度(JS是往上冒泡查找的,所以传入会更快)
  5     3、undefined(当方法参数没有传入的时候,那么他就是未定义的)
  6 
  7  */
  8 (function(win,doc){//毕包
  9     //这里面声明的变量/方法都是局部的,如果全局需要引用,那么需要注册全局
 10     
 11     
 12     //无new构造
 13 
 14 
 15     //局部变量在没有引用的时候会被浏览器自动回收
 16 
 17     var  myjquery = function(_this){
 18         return new Base(_this);//每次执行都得到一个实例,说明Base里面的不会相互影响
 19     }
 20 
 21     function Base(_this){
 22 
 23         this.elements = [];//存放/保存获取的DOM元素
 24         //因为每个对象操作的是已知的DOM元素所以每次返回只需要this(Base)本身即可
 25         if(_this != undefined){
 26             this.elements[0] = _this;//
 27         }
 28     }
 29     /*
 30         //获取ID
 31         Base.prototype.getId = function(id){//ID是唯一的,不需要管理,可以直接获取
 32             this.elements.push(document.getElementById(id));
 33             return this;
 34         }
 35 
 36         //Tag标签和class是可以获取多个的,所以需要特殊对待,就需要for循环逐个处理获取
 37         //获取标签(Tag)
 38         Base.prototype.getTagName = function(tag){
 39             var tags = document.getElementsByTagName(tag);
 40             for(var i = 0;i < tags.length;i++){
 41                 this.elements.push(tags[i]);
 42             }
 43             return this;
 44         }
 45 
 46         Base.prototype.getClass = function(){
 47 
 48         }
 49 
 50      */
 51      //解耦
 52     Base.prototype = {//括号里面都是以对象(名字:对象)的形式书写
 53         //获取ID
 54         getId:function(id){//ID是唯一的,不需要管理,可以直接获取
 55             this.elements.push(doc.getElementById(id));
 56             return this;
 57         },
 58         //Tag标签和class是可以获取多个的,所以需要特殊对待,就需要for循环逐个处理获取
 59         //获取标签(Tag)
 60         getTagName:function(tag){//仅仅只是一个开始
 61             var tags = doc.getElementsByTagName(tag);
 62             for(var i = 0;i < tags.length;i++){
 63                 this.elements.push(tags[i]);
 64             }
 65             return this;
 66         },
 67         //获取class
 68         //和Tag一样,需要逐个获取
 69         getClass:function(className,idName){
 70             //ID:document.getElmenentById();
 71             //class:document.getElementsByClassName();//不兼容
 72             var node = null;
 73             if(arguments.length == 2){
 74                 node = doc.getElementById(idName);
 75             }else{
 76                 node = doc;
 77             }
 78 
 79             var all = node.getElementsByTagName("*");
 80             for(var i = 0;i < all.length;i++){
 81                 //需要判断是否存在class,而不是等于
 82                 //这里暂时直接等于,但不是包含(绝对不能写包含)
 83                 if(all[i].className == className){
 84                     this.elements.push(all[i]);
 85                 }
 86             }
 87             return this;
 88 
 89         },
 90         //增加class
 91         //给获取的元素增加class
 92         addClass:function(className){//$(".box .title")
 93             for(var i = 0;i < this.elements.length;i++){
 94                 //匹配每个元素是否有传入的class名字,IndexOf
 95                 //作业:如何实现给增加的class避免重复(注意完美实现)
 96                 if(this.elements[i].className == className){//解决可能元素不存在
 97                     continue;
 98                 }
 99                 this.elements[i].className += " "+ className;
100 
101 
102             }
103             return this;
104         },
105         //indexOf和replace不可取
106         removeClass:function(className){
107             for(var i = 0;i < this.elements.length;i++){
108                 if(this.hasClass(this.elements[i],className)){
109                     var currEle = this.elements[i];
110                     //移除准确需要的位置,而不是直接replace
111                     currEle.className = currEle.className.replace(
112                         new RegExp('(\s|^)' + className + '(\s|$)'),"");
113                 }
114             }
115             return this;
116         },
117         //判断元素是否存在className
118         hasClass:function(element,className){
119             //正则匹配:true/false
120             return element.className.match(new RegExp('(\s|^)' + className + '(\s|$)'));
121         },
122         //选择
123         eq:function(num){//只选择一个
124             var element = this.elements[num];//拿到选择的那个元素
125             this.elements = [];//清空之前获取的元素
126             this.elements[0] = element;//把选择的那个元素存储到this.elements
127             return this;
128         },
129         click:function(fn){
130             for(var i = 0;i < this.elements.length;i++){
131                 this.elements[i].onclick = fn;
132             }
133             return this;
134         },
135         hide:function(){
136             for(var i = 0;i < this.elements.length;i++){
137                 this.elements[i].style.display = "none";
138             }
139             return this;
140         },
141         show:function(){//
142             for(var i = 0;i < this.elements.length;i++){
143                 this.elements[i].style.display = "block";
144             }
145             return this;
146         },
147         /*
148             不传入参数则表示获取
149             传入参数则表示设置/覆盖
150          */
151         html:function(str){
152             for(var i = 0;i < this.elements.length;i++){
153                 if(arguments.length == 0){//判断传入参数没有,0个
154                     return this.elements[i].innerHTML;
155                 }
156                 this.elements[i].innerHTML = str;
157             }
158             return this;
159 
160 
161         },
162         tt:function () {
163             return this
164     }
165 
166     }
167     
168 
169     win.myjquery = win.$  = myjquery;//只是一个方法
170 
171 
172 })(window,document);//传入一些常用的变量/对象
原文地址:https://www.cnblogs.com/zhaobao1830/p/7231704.html