博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery模型(外壳实现)
阅读量:2240 次
发布时间:2019-05-09

本文共 5652 字,大约阅读时间需要 18 分钟。

详细解释:

  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 //移除准确需要的位置,而不是直接replace111 currEle.className = currEle.className.replace(112 new RegExp('(\\s|^)' + className + '(\\s|$)'),"");113 }114 }115 return this;116 },117 //判断元素是否存在className118 hasClass:function(element,className){119 //正则匹配:true/false120 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.elements127 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 this164 }165 166 }167 168 169 win.myjquery = win.$ = myjquery;//只是一个方法170 171 172 })(window,document);//传入一些常用的变量/对象

 

转载于:https://www.cnblogs.com/zhaobao1830/p/7231704.html

你可能感兴趣的文章
【LEETCODE】205-Isomorphic Strings
查看>>
【LEETCODE】204-Count Primes
查看>>
【LEETCODE】228-Summary Ranges
查看>>
【LEETCODE】27-Remove Element
查看>>
【LEETCODE】66-Plus One
查看>>
【LEETCODE】26-Remove Duplicates from Sorted Array
查看>>
【LEETCODE】118-Pascal's Triangle
查看>>
【LEETCODE】119-Pascal's Triangle II
查看>>
word2vec 模型思想和代码实现
查看>>
怎样做情感分析
查看>>
用深度神经网络处理NER命名实体识别问题
查看>>
用 RNN 训练语言模型生成文本
查看>>
RNN与机器翻译
查看>>
用 Recursive Neural Networks 得到分析树
查看>>
RNN的高级应用
查看>>
TensorFlow-7-TensorBoard Embedding可视化
查看>>
轻松看懂机器学习十大常用算法
查看>>
一个框架解决几乎所有机器学习问题
查看>>
特征工程怎么做
查看>>
机器学习算法应用中常用技巧-1
查看>>