封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

 youjobit07 2014-10-10 15:32:59

前言：
      现如今有太多优秀的开源javascript库，比如jQuery,Prototype,Dojo等等，这些javascript库已经把最常用的代码进行了有效的封装，以便我们开发，从而提高效率。现在我这里探讨的是自己创建一个javascript库，自己创建的肯定没有那些开源javascript库功能强大，目的主要是为了提升自己的原生javascript开发能力。
      Base.js是我自己学习瓢城web俱乐部李炎灰老师的javascript教程，根据教程总结归纳出一份常用的js代码片段，里面有我学习时候的一些注释，笔记。这些笔记站在新手的角度思考初学时会碰上的问题，有些问题可能我自己以后再回头看都会笑自己当初怎么问这么幼稚的问题，希望在我学而时习之，温故而知新的同时，能帮助众多和我一样想学原生js的新手。当然，可能光看我的笔记作用不太大，不知道我写的什么玩意- -！！推荐大家自己也去看看李炎灰老师的javascript教程。百度搜"瓢城web俱乐部"就可以了。
//2014.10.07【90】

//在常用的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);
        }
};



/*
然后封装之后如何调用（有些啰嗦了，照顾新手）。就把Base.js当做一个jquery，写html页面的时候在</body>前面加上
<script src="js/Base.js"></script>
<script src="js/demo.js"></script>

封装好的Base.js不管它，需要在demo.js中调用我们封装好的代码。在demo.js中写

window.onload=function(){
        alert(Base.getId('box').innerHTML);
        alert(Base.getName('sex')[0].value);
        alert(Base.getTagName('div')[2].innerHTML);
}


【PS：写到这里发现我们自己封装好的Base.js获取节点的方法还是比不上jquery的选择器，不管是ID还是类或者元素，都可以直接一个“$”搞定，以后等到一定能力了去看看jquery里面怎么封装的那些获取节点的方法去。】


*/
复制代码


接下来是介绍【连缀】功能，比如写jquery的时候，经常会看到这样的代码。
$('#box').css('color','red').html('标题').click(function(){alert('a')});
这就是连缀，就是一句话同时设置一个或多个节点，两个或两个以上的操作。（突然想到一个词，链式调用....链式调用跟连缀感觉有些像....希望以后深入学习的时候可以弄懂吧.）
这样的话就需要对上面的代码作出一些修改，var Base={},这种写法不能在它的原型中添加方法，所以需要使用函数式对象写法：

//2014.10.07【91】

/*

现有代码：
var Base = {
        getId : function (id) {
                return document.getElementById(id)
        },
        getName : function (name) {
                return document.getElementsByName(name)
        },
        getTagName : function (tag) {
                return document.getElementsByTagName(tag);
        }
};

需求：
修改代码，在Base这个基础库的核心对象中，添加css方法，html方法，click方法，并且实现连缀，
即 Base.getId('box').css('color','red').css('backgroundColor','black').html('pox'),click(function(){alert('a')});

分析：添加方法不难，难的是如何实现连缀，
          Base.getId('box')返回的是一个divElement，这个对象是没有CSS方法的；
          我们需要将Base.getId('box')返回Base对象，
          Base.getId('box').css('color','red')返回的也是Base对象；
          Base.getId('box').css('backgroundColor','black')还是返回Base对象;
          即每执行完一个方法后 都要返回Base对象。
*/

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;
        }
}
//添加css()方法
Base.prototype.css = function (attr, value) {
        for (var i = 0; i < this.elements.length; i ++) {
                this.elements[i].style[attr] = value;
        }
        return this;
}
//添加html()方法
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;
}
/*
一：由push联想到数组那一章节，可以复习下关于数组的一些方法，toLocalString()、toString()、valueOf()、join()、后进先出栈方法LIFO, push(),shift(),先进先出队列方法FIFO吗，shift(),unshift(),reverse(),sort(),concat(),slice(),splice(),indexOf(),lastIndexOf(),every(),filter(),forEach(),map(),some(),reduce(),reduceRight()...

二：为什么CSS要写到外面，而不是Base(){} 里面？这是为了区分获取节点和各种方法。所以方法单独拿出来写

三：为什么是Base.prototype.css=... ，而不是 this.css=... 或者 Base.css=...？

如果用this.css，这时候this是代表window,所以不能用this；
关于this关键字，翻了下书，没找到什么合适的描述。留个链接以后详细看看
http://www.blogjava.net/baoyaer/articles/105864.html

如果用Base.css，运行依然会报错，“base.getId("#box").css is not a function”;
原因复习【33-39】面向对象与原型；




*/

//前台调用代码，即demo.js里面的代码

window.onload=function(){
        var base=new Base();
        base.getId('box').css('color','red').css('backgroundColor','black');
        base.getTagName('p').css('color','green').html('标题').click(function(){
                alert('a');
        }).css('backgroundColor','pink');
};


/*html主要代码

<div id="box">box</div>


<p>段落</p>
<p>段落</p>
<p>段落</p>

*/
复制代码


写到这里，满以为要告一段落了，一运行，看看，html()方法有效，把p里面的内容“段落”都改成标题了，背景颜色也变成粉色了，连缀也实现了，再看，仔细看，好像哪里不对劲！按照代码，我是想把 box的背景色变成黑色，段落背景变成粉色的，为什么都是粉色了？！而且本来只想把“段落”变成“标题”的，结果连带 “box”也变成“标题”二字了。

这是因为后面的与前面都是用的一个对象，var base=new Base();后面的会把前面的覆盖，所以得修改下，每个都必须有专门的一个实例。最后，得出来的纯净的代码就是

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

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;
        };
        
}
 文章来源:http://www.youjobit.com/news_248.html
IT人才招聘