javascript库概念与连缀
一、JavaScript 库
1.什么是javascript库：
javascript库，说白了，就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。
现如今有太多优秀的开源 JavaScript 库，比如：jQuery、Prototype、Dojo、Extjs 等等。这些 JavaScript 库已经把最常用的代码进行了有效的封装，以方便我们开发，从而提高效率。
2.创建基础库
base.js
/*函数式
function $(id) {
return document.getElementById(id);
}
*/
/*对象式*/
var Base = {
getId : function (id) {
return document.getElementById(id)
},
getName : function (name) {
return document.getElementsByName(name)
},
getTagName : function (tag) {
return document.getElementsByTagName(tag);
}
};
demo.js
/*
window.onload = function () {
alert(document.getElementById('box').innerHTML);
alert(document.getElementsByName('sex')[0].value);
alert(document.getElementsByTagName('p')[0].innerHTML);
};
window.onload = function () {
alert($('box').innerHTML);
}
*/
window.onload = function () {
alert(Base.getId('box').innerHTML);
alert(Base.getName('sex')[0].value);
alert(Base.getTagName('p')[0].innerHTML)
};
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>第34章 项目1-博客前端：理解JavaScript库</title> <script type="text/javascript" src="../js/base.js"></script> <script type="text/javascript" src="../js/demo.js"></script> </head> <body> <div id="box">id</div> <input type="radio" name="sex" value="男" checked="checked" /> <p>段落</p> </body> </html>
二、连缀
所谓连缀，最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作。比如：
$().getId('box').css('color', 'red').html('标题').click(function () {alert('a')});
连缀的好处，就是快速方便的设置节点的操作。
demo.js
/*
//alert(Base.getId('box'));
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
alert('a');
}).addClass('a');
Base是一个基础库的核心对象
Base.getId('box')返回的是一个divElement，这个对象是没有css方法的
将Base.getId('box')返回改成Base即可，返回Base对象
Base.getId('box').css('color','red')返回的也是Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black')还是返回的Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox')也是返回的Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
alert('a');
}); click方法执行完毕之后，还是返回的Base对象
在Base对象中，添加css方法,html方法,click方法
var base = new Base();
base.getId('box').style.color = 'red';
base.getId('box').style.backgroundColor = 'black';
base.getId('box').innerHTML = 'pox';
base.getId('box').onclick = function () {
alert(this.innerHTML);
};
*/
window.onload = function () {
//alert(base.getId('box').elements.length);
$().getId('box').css('color', 'red').css('backgroundColor', 'black');
//alert(base.getTagName('p').elements.length);
$().getTagName('p').css('color', 'green').html('标题').click(function () {
alert('a');
}).css('backgroundColor', 'pink');
};
base.js
function Base() { //创建一个数组，来保存获取的节点和节点数组 this.elements = []; //获取ID节点 this.getId = function (id) { this.elements.push(document.getElementById(id)); return this; }; //获取元素节点 this.getTagName = function (tag) { var tags = document.getElementsByTagName(tag); for (var i = 0; i < tags.length; i ++) { this.elements.push(tags[i]); } return this; }; } //上面写法麻烦的地方是，需要在前台 new 出来，然后调用。但采用这种方式， //我们可以在每个方法里在每个方法里都返回这个对象，并且还可以在对象的原型里添加 //方法，这些都是连缀操作最基本的要求。 //为了避免在前台 new 一个对象，我们可以在库里面直接 new。 var $ = function () { return new Base(); } 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; } Base.prototype.click = function (fn) { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].onclick = fn; } return this; }
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>第34章 项目1-博客前端：理解JavaScript库</title> <script type="text/javascript" src="../js/base.js"></script> <script type="text/javascript" src="../js/demo.js"></script> </head> <body> <div id="box">box</div> <p>段落</p> <p>段落</p> <p>段落</p> </body> </html>