js封装库2-连缀
连缀,可以理解成链式写法,就是捕抓到一个页面元素后通过链式写法惊醒后续的多个添加,象JQuery那样通过'.'来连接
如:
getId(id).css('样式内容').css('样式内容').html('标签包含的内容').click('点击事件');
同样的也是三个文件,demo.html、demo.js、base.js
demo.html页面建立这个代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="base.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div id="box">id</div> <p>段落</p> <p>段落</p> <p>段落</p> </body> </html>
demo.js:用于书写被封装的好的代码操作
base.js:书写封装的js代码
首先在base.js中书写上用于类作为调用方式的简写方法,先书写上简单的捕获元素ID的方法
function Base() { // 基类里面定义一个数组 this.elements = []; // 获取id节点 this.getId = function (id){ this.elements.push(document.getElementById(id)); return this; }; }
那么就可以在demo.js中调用对应的base.js代码来实现了
window.onload = function() { //实例化对象 var base = new Base(); 调用方法 alert(Base.getId('box')); }
这样可以捕抓到id,代码里做了弹出设置,查看是否成功弹出了对应的id
弹出是正常的。那么就进入到下一步了。
再在base.js上加入获取标签元素tagname的类方法,那么类里面就变成增加多一条方法,整体变成下面的代码
function Base() { // 基类里面定义一个数组 this.elements = []; // 获取id节点 this.getId = function (id){ this.elements.push(document.getElementById(id)); return this; }; // 获取元素节点 this.getTagName = function(tag){ // 为了获取多个标签内容,这里使用赋值,并进行for循环 var tags = document.getElementsByTagName(tag); for (var i = 0; i <tags.length; i++) { this.elements.push(tags[i]); }; // 凡运算就有运算结果,返回当前对象给方法 return this; }; }
那么demo.js可以加多一个弹出看能不能正确弹出获取到的标签
window.onload = function() { //实例化对象 var base = new Base(); //调用方法 alert(Base.getId('box')); alert(Base.getTagName('p')); }
既然能弹出正确的元素对象,下面接着写一个Css样式
// 更改CSS样式 Base.prototype.css = function (attr,value){ // 那么下面就需要for循环一下对象元素,进行设置值 for (var i = 0; i <this.elements.length; i++) { this.elements[i].style[attr] = value;//遍历具体对象进行设置样式 }; // 凡运算就有运算结果,返回当前对象给方法 return this; }
利用prototype可以直接修改对象原型的属性与值的特性, 也就是方法中的两个形参 attr与value 这就象jquery里面的CSS调用一样了
而为什么这样写,因为页面上可以有多个标签,而如果我们只写:this.elements.style[attr] = value; 这句话就开始return的话,那么返回的只是一个对象,
并没是自己需要的多个以上的标签元素更改样式,利用for循环进行了遍历,输出每个元素的属性与值,这样做就可以将自己需要更改的多个标签样式更改完成了
这样demo.js中可以使用下面的代码进行实现效果:
window.onload = function() { var base = new Base(); Base.getId('box').css('color','red').css('background','green'); Base.getTagName('p').css('color','blue').css('background','blue'); }
通过demo.js的调用后, demo.html中的效果就出来了
效果是出来了,但发现,id为box的底色被P标签的底色覆盖了。这是什么原因呢
是因为,他们处于统一个对象下面,都是background这个属性,返回给同意个base对象后,后者就覆盖了前者
解决这个bug的地方就是按照老师的讲法,就是每次都new一个新对象。将他们单独起来。所以我在base.js中,在Base上面加上一个代码 如下:
// 解决只下面只返回一个对象的问题,样式给覆盖了。 // 下面写这个函数后,每次都返回一个新对象就可以单独出现了 var $ = function () { return new Base; }
既然更改了封装库文件的对象代码,那么demo.js同时需要更新一下,如下:
window.onload = function() { $().getId('box').css('color','red').css('background','green'); $().getTagName('p').css('color','#fff').css('background','blue'); }
这样更新一下demo.js中的代码后,在demo.html出来的效果就是id是box的元素底色是绿色 p标签为蓝色了 清晰明了
老师继续讲了连缀获取标签内的内容,需要在base.js中 写在Base类的外面,同样需要利用到prototype原型来操作,代码如下:
// 更改内容 Base.prototype.html = function (str){ // 那么下面就需要for循环一下对象元素,进行设置值 for (var i = 0; i <this.elements.length; i++) { this.elements[i].innerHTML = str; }; // 凡运算就有运算结果,返回当前对象给方法 return this; }
这里也是利用了for循环,但是获取对应i后面的属性变成了原生的innerHTML,都知道可以用于更改页面元素的属性
传入一个str 那么对象中的内容就更改成了输入进去的那个str字符串了
好的,下面继续在demo.js中修改一下P标签的代码,如下:
$().getTagName('p').css('color','#fff').css('background','blue').html('标题');
在后面增加了HTML连缀后,刷新一下页面,原本demo.html中的P表情内容全部被替换成了标题这两个字, 确实很方便的封装。
下面老师继续讲了连缀的点击事件,也是需要在base.js中增加代码。利用原型对对象的属性进行修改:如下
// 点击事件 fn是回调函数 Base.prototype.click = function(fn){ for (var i = 0; i <this.elements.length; i++) { this.elements[i].onclick = fn; }; // 凡运算就有运算结果,返回当前对象给方法 return this; }
封装库文件中的代码增加完毕后,再到demo.js中为P标签增加一个点击的连缀。如下这样增加:
$().getTagName('p').css('color','#fff').css('background','blue').html('标题').click(function(){ alert('a'); });
就是这样, 直接在html后面用'.'进行连接,打上click 回调一个函数,弹出一个A 进行测试
刷新页面后,点击了随便一个P元素就弹出了一个A。 就此连缀这节课 完成了。 而我也跟着老师完成了这个连缀的封装
通过回忆,与查看打完的代码, 逐步回忆起老师的讲课步骤,巩固了一下脑中的东西
就此记录,方便以后查看。
从前端到后端,慢慢记录慢慢积累,走得再慢 总会有登上高峰的日子。 共勉。