一个前端博客（1）——元素的选取和连缀
在写一个项目的时候，我们会用到很多库，比如jQuery，prototype，这里我们自己来写一个库来实现一个前端博客。
在这里我们首先实现两个功能：
- 元素的选取
- 连缀
元素的选取
我们用原生的JavaScript对于dom元素的搜索有这几种:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div id="box">id</div> <input type="radio" name="sex" value="男" selected="selected"> <p>段落</p> <script src="js/tar.js"></script> <script src="js/app.js"></script> </body> </html>
window.onload = function(){ var box = document.getElementById("box").innerHTML; var sex = document.getElementsByName("sex")[0].value; var p = document.getElementsByTagName("p")[0].innerHTML; console.log(box); console.log(sex); console.log(p); }
由于我们会重复的使用这几种方法，所以我们将他们封装起来。创建我们的库tar.js,通过对象式的方法，来封装。
var Tar = { getId : function(id){ return document.getElementById(id); }, getName : function(name){ return document.getElementsByName(name); }, getTagName : function(tagName){ return document.getElementsByTagName(tagName); }, getClass : function(className){ return document.getElementsByClassName(className); }, }
然后我们可以在我们的demo.html文件下调用。
demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div id="box">id</div> <input type="radio" name="sex" value="男" selected="selected"> <p>段落</p> <script src="js/tar.js"></script> <script src="js/app.js"></script> </body> </html>
app.js
window.onload = function() { var box = Tar.getId("box").innerHTML; var sex = Tar.getName("sex")[0].value; var p = Tar.getTagName("p")[0].innerHTML; console.log(box); console.log(sex); console.log(p); }
连缀
连缀是我们写代码可以很简洁，同时提高开发速度。如果用我们上面代码去实现下面的代码产生的效果，显然是错的。
window.onload = function() { Tar.getId('box').css('color','red').css('background', 'pink'); }
第一点，显然我们没有css方法，其次即使有了css方法，在getId方法返回一个dom节点后，我们依然不能使用css方法。为什么？因为dom节点没有css方法，css方法是Tar对象的，所以我们需要在每次取得一个节点后返回Tar对象，同时要存储dom节点，这里我们可以利用一个数组来维护。一下是代码，这里我们放弃了之前的对象方式，采用了函数式：
function Tar() { this.elements = []; this.getId = function(id) { this.elements.push(document.getElementById(id)); return this; }; this.getName = function(name) { var names = document.getElemntsByName(name); for(var i = 0; i < names.length; i++) { this.elements.push(names[i]); } return this; }; this.getTagName = function(tagName) { var tags = document.getElementsByTagName(tagName); for(var i = 0; i < tags.length; i++) { this.elements.push(tags[i]); } return this; }; this.getClass = function(className) { var classes = document.getElementsByClassName(className); for(var i = 0; i < classes.length; i++) { this.elements.push(classes[i]); } }; };
其中，this.elements就是我们用来存储节点的数组。为了区分搜索节点操作和其他操作，我们将其他的方法通过添加给原型对象方法的方式来实现。如下:
Tar.prototype.css = function(attr, value) { for(var i = 0; i < this.elements.length; i++) { this.elements[i].style[attr] = value; } return this; } Tar.prototype.html = function(str) { for(var i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = str; } return this; }
这里我们就完成了连缀功能，现在我们来尝试一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div id="box"> box </div> <p>段落</p> <p>段落</p> <p>段落</p> <script src="js/tar.js"></script> <script src="js/app.js"></script> </body> </html>
window.onload = function() { var T = new Tar(); TgetId('box').css('color', 'red'); T.getTagName('p').css('background','pink'); }
结果你会发现有些问题，为什么box那个div背景也变颜色了呢？因为当前就只有一个Tar实例，所以操作的是所有的dom节点。所以我们要对不同节点集合创造不同的实例。
于是我们修改tar.js，添加：
var $ = function() { return new Tar(); }
这样我们只要在app.js里
window.onload = function() { $().getId('box').css('color', 'red'); $().getTagName('p').css('background','pink'); }
这样就实现了这样的效果:
现在完整的tar.js代码如下:
var $ = function() { return new Tar(); } function Tar() { this.elements = []; this.getId = function(id) { this.elements.push(document.getElementById(id)); return this; }; this.getName = function(name) { var names = document.getElemntsByName(name); for(var i = 0; i < names.length; i++) { this.elements.push(names[i]); } return this; }; this.getTagName = function(tagName) { var tags = document.getElementsByTagName(tagName); for(var i = 0; i < tags.length; i++) { this.elements.push(tags[i]); } return this; }; this.getClass = function(className) { var classes = document.getElementsByClassName(className); for(var i = 0; i < classes.length; i++) { this.elements.push(classes[i]); } }; }; Tar.prototype.css = function(attr, value) { for(var i = 0; i < this.elements.length; i++) { this.elements[i].style[attr] = value; } return this; } Tar.prototype.html = function(str) { for(var i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = str; } return this; }
先到这里，待续。。。。
