连缀
所谓的连缀就是可以同时对一个或多个节点进行多种操作,
比如:
$().getTagName('p').css('color','blue').html('标题').click(function(){alert('a')})
这是该篇文章得思路
一.首先创建js基础库对象:
var Base={
getId:function(id){
return document.getElementById(id);
},
getName:function(name){
return document.getElementsName(name);
},
getTagName:function(tagname){
return document.getElementsByTagName(tagname);
}
}
不足之处:(对象方式创建基础)
- 要想对元素赋值,必须这样写(因为各自返回的都是元素对象,类型有很多,不方便抽象方法给不同类型对象赋值,正因如此,才出现了基础库):
var base =new Base();
base.getId('box').style.color='red';
base.getId('box').style.backgroundColor='yellow';
base.getId('box').innerHTML='pox';
base.getId('box').onclick=function(){
alert(this.innerHTML);
}; - 没有实现连缀功能,较传统的写法,较麻烦
改进:(function创建基础库)
function Base(){
//创建一个数组,来保存获取的节点和节点数组
this.elements=[]; //所有的节点都放到该数组中
//获取id节点
this.getId=function(id){
this.elements.push(document.getElementById(id));
return this; //返回base对象
};
//获取元素节点数组
this.getTagName=function(tag){
var tags=document.getElementsByTagName(tag);
for (var i=0;i<tags.length;i++){
this.elements.push(tags[i]);
}
return this;
}
}
优点:
- 每个方法都返回基础库对象,这样就方便了给基础库赋属性或方法
- 实现了连缀功能
给Base对象添加方法:(必须给Base原型添加方法,而不是直接给Base添加方法)
//设置css
Base.prototype.css=function(attr,value){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style[attr]=value;
}
return this;
}
//设置innerhtml方法
Base.prototype.html=function(str){
for(var i=0;i<this.elements.length;i++){
this.elements[i].innerHTML=str;
}
return this;
}
//触发click事件
Base.prototype.click=function(fn){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onclick=fn;
}
return this;
}
二.实现连缀功能
window.onload=function(){
var base=new Base();
base.getId('box').css('color','red'); //此时base里面有了id为box的节点
base.getTagName('p').css('color','blue').html('标题').click(function(){//此时base里面添加了TagName为p的节点,此时base里面有2个节点,后面对其设置方法时,是对这2个节点元素进行设置(因为每个设置的方法都会便利base对象里的所有元素,所以会出现后面设置的样式覆盖原来的样式)
alert('a');
}).css('backgroundColor','pink');
};
不足:
- 样式覆盖
改进:
抽象一个方法,使得每个样式设置方法每次使用的都是新的Base对象
function $(){
return new Base();
}
再次调用方法时:
window.onload=function(){
$().getId('box').css('color','red');
$().getTagName('p').css('color','blue').html('标题').click(function(){
alert('a');//此次调用方法时使用的是新的base对象,不会出现覆盖问题
}).css('backgroundColor','pink');
};
对象方法、类方法、原型方法
不知同学们有没有注意到,获得id节点等一些方法,放在Base的构造函数里,但是设置Css方法放在了Base构造函数外面了,其实给对象创建方法一共有3种形式:
- 对象方法:方法放在对象的构造函数的里面
如:上面的获取id节点方法 - 原型方法:方法放在对象构造函数外面
如:上面的设置CSS样式 - 类方法:方法放在对象构造函数的外面
写法如下:
Base.css=function(attr,value){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style[attr]=value;
}
return this;
}
- 法1,2需要通过实例化对象去调用,法3方法调用时不需要对象实例
- 原型方法一般用于对象实例的共享,当创建多个对象时,这些对象的方法分配一个共享内存,不用每实例化一次就要分配相应的内存
【总结】
- 弄清除问题出现的根源,才能对其进行修改,得到想要的结果
- 遇到不明白的知识点要总结,总结的过程肯定比看视频时想的多,更仔细,因为如果你想让别人看懂你的博客,首先自己必须很清楚的知道自己写的什么