沿用我们上一次的Base对象,连缀功能就像下面这样调用,用一个对象连续利用各个方法,避免代码冗余:
Base.getId('box').css('color','red').html('标题').click(function () {alert('a')});
<divid="box">box</div>
主要思想: Base是一个基础库的核心对象,但是Base.getId('box')返回的是一个divElement,这个对象是没有css方法的。所以我们只要将Base.getId('box')返回改成Base,返回Base对象,然后为Base对象添加css,html,click方法,而且Base.getId('box').css('color','red')返回的也是Base对象,无论后面加多少个,返回的都会是Base对象。
改进第一步,先把var改成function:
function Base(){ //这里要注意和var Base的写法做区分
this.getId=function(id){
Return document.getElementById(id);
}
}
上面的写法相当于还是没有返回Base对象,所以还是一个一个地写。这时候在调用的时候也是alert(Base.getId('box').innerHTML);这样直接写,但是前面需要new一下,varbase=new Base();
base.getId('box').style.color= 'red';//可以把字改成红色的
base.getId('box').style.backgroundColor= 'black';//把背景改成黑色的
base.getId('box').innerHTML= 'pox';//把文字改成Pox
base.getId('box').οnclick= function () {//鼠标点击会弹出这个对象的文本
alert(this.innerHTML);
};
改进第二步:创建一个数组来存
functionBase() {
//创建一个数组,来保存获取的节点和节点数组
this.elements= [];
//获取ID节点;用的是this后面接函数名,而且不再是冒号,是等号
this.getId= function (id) {
this.elements.push(document.getElementById(id));//这里相当于把它压进数组里
returnthis;//然后再return this
};
//获取元素节点 像这种标签就会有很多个了,所以要附很多遍。
this.getTagName= function (tag) {
vartags = document.getElementsByTagName(tag);
for(var i = 0; i < tags.length; i ++) {
this.elements.push(tags[i]);
}
returnthis;
};
}
这时候如果我再写base.getId(‘box’).style.color已经不行了,已经不是divelement了。
alert(base.getId('box').elements.length); 但是这时候elements是可以调用到的。
改进第三步:开始添加css方法
最好不要写在刚才function Base(){}里面,不好区分。可以在外面写 Base.prototype.css=function(){ alert(“abc”);} 加一个prototype原型就可以了。
具体正确写法如下:
在window.οnlοad=function(){
varbase=new Base();
base.getId(‘box’).css(‘color’,’red’)
}
Base.prototype.css = function (attr, value){
for(var i = 0; i < this.elements.length; i ++) {
this.elements[i].style[attr]= value;
} //这样去利用style.color=’red’;
returnthis;//还要返回原来这个对象才行哦。
}
再来做一个,这个是改字的
Base.prototype.html = function (str) {
for(var i = 0; i < this.elements.length; i ++) {
this.elements[i].innerHTML= str;
}
returnthis;
}
再来做一个事件的话,里面的参数是函数
Base.prototype.click = function (fn) {
for(var i = 0; i < this.elements.length; i ++) {
this.elements[i].οnclick= fn;
}
returnthis;
}
调用的话就像之前说的那样:Base.getId('box').css('color','red').html('标题').click(function () {alert('a')}); 就行了
改进第四步:
这里会出现一个错误,就是用的一个对象会覆盖掉前面别的div的那些操作,导致混乱,原因就是我们这里调用的时候只用了一个var base=new Base();
所以在Base定义的地方,也就是base.js里面要写下面这个函数:
var $ = function () {
returnnew Base();
}//每次返回一个新的Base对象。
然后调用的时候我们就不要var base =new Base()这些了,将前面改成$().就行了
$().getId('box').css('color','red').css('backgroundColor', 'black');
$().getTagName('p').css('color','green').html('标题').click(function () {
alert('a');
}).css('backgroundColor','pink');