JavaScript实现连缀

连缀

    所谓的连缀就是可以同时对一个或多个节点进行多种操作，
    比如：
      $().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添加方法）

//设置cssBase.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方法调用时不需要对象实例
• 原型方法一般用于对象实例的共享，当创建多个对象时，这些对象的方法分配一个共享内存，不用每实例化一次就要分配相应的内存

【总结】

• 弄清除问题出现的根源，才能对其进行修改，得到想要的结果
• 遇到不明白的知识点要总结，总结的过程肯定比看视频时想的多，更仔细，因为如果你想让别人看懂你的博客，首先自己必须很清楚的知道自己写的什么