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

【总结】

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

JavaScript实现连缀相关推荐

原生JavaScript实现连缀调用
即组合使用构造函数模式和原型模式,在构造函数中定义实例属性,在原型对象中定义方法和共享的属性, (构造函数定义实例属性的原因:因为当在原型对象中包含引用类型的值时,所有实例指向同一个引用类型. 原型中 ...
承载了多少儿女情长--古代女性信物大观(组图)
我出东门游, <script language="JavaScript" src="http://ad2.qianlong.com/cgi-bin/script?a ...
第一百三十节，JavaScript，封装库--连缀
JavaScript,封装库--连缀学习要点: 1.连缀介绍 2.改写库对象本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...
JavaScript连缀
先来理解一个概念:JavaScript库简单来说,就是把各种常用的代码片段,组织起来放在一个 js 文件里,组成一个包, 这个包就是 JavaScript 库.现如今有太多优秀的开源 JavaScr ...
JavaScript基础入门封装DOM 连缀
JavaScript基础入门封装DOM 连缀适合初学者获取元素节点获取ID 获取tagName 获取Name 设置这个只能是设置CSS样式,添加html方法,添加click方法等. 封装的b ...
javascript库概念与连缀
一.JavaScript 库 1.什么是javascript库: javascript库,说白了,就是把各种常用的代码片段,组织起来放在一个 js 文件里,组成一个包,这个包就是 JavaScript ...
封装原生javascript连缀
//连缀的封装 window.onload = function(){ $().getId('box').css('color','red').css('backgroundColor','black ...
JavaScript(DOM编程一)
在什么位置编写js代码一般把js代码写在window.onload方法中执行该方法时页面已经加载完毕,可以获取到所有的dom元素 --------------------------------- ...
第一百三十一节，JavaScript，封装库--CSS
JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...