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添加方法）

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

【总结】

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