2.项目 1-博客前端：封装库--连缀

学习要点：

1.连缀介绍
2.改写库对象

本章我们重点来介绍，在调用库的时候，我们需要能够在前台调用的时候可以同时设置
多个操作，比如设置 CSS，设置 innerHTML，设置 click 事件等等。那么本节课来讨论这个
问题。

一．连缀介绍

所谓连缀，最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作。
比如：

$().getId('box').css('color', 'red').html('标题').click(function () {alert('a')});

连缀的好处，就是快速方便的设置节点的操作。

二．改写库对象

如果是实现操作连缀，那么我们就需要改写上一节课的对象写法：var Base = {}，这种
写法无法在它的原型中添加方法，所以需要使用函数式对象写法：

function Base() {
//把返回的节点对象保存到一个 Base 对象的属性数组里
this.elements = [];
//获取 id 节点
this.getId = function (id) {
this.elements.push(document.getElementById(id));
return this;
};
//获取 name 节点数组
this.getName = function (name) {
var names = document.getElementsByName(name);
for (var i = 0; i < names.length; i ++) {
this.elements.push(targs[i]);
}
return this;
}
//获取元素节点数组
this.getTagName = function (tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i ++) {
this.elements.push(tags);
}
return this;
};
}

PS：这种写法麻烦的地方是，需要在前台 new 出来，然后调用。但采用这种方式，
我们可以在每个方法里在每个方法里都返回这个对象，并且还可以在对象的原型里添加
方法，这些都是连缀操作最基本的要求。

Base.prototype.click = function (fn) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onclick = fn;
}
return this;
};
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style[attr] = value;
}
return this;
}
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].innerHTML = str;
}
return this;
}

PS：为了避免在前台 new 一个对象，我们可以在库里面直接 new。

var $ = function () {
return new Base();
};

感谢收看本次教程！