JS实现博客前端页面（一）—— 封装基础库

1、创建基本库

首先创建一个基本库，名字叫做base.js,用于编写最常用的代码，然后不断的扩展封装。
在最常用的代码中，最常用的就是获取节点的方法。这里我们可以编写代码如下：

//创建base.js
//整个库可以是一个对象
var Base={
    //方法名尽可能简短而富有意义
    getId:function(id){
        return document.getElementById(id);
    },
    getName:function(name){
        return document.getElementsByName(name);
    },
    getTagName:function(tag){
        return document.getElementsByTagName(tag);
    }
}
//类方法调用
window.onload=function(){
    alert(Base.getId('box').innerHTML);
    alert(Base.getName('chk')[0].value);
    alert(Base.getTagName('p')[0].innerHTML);
};

2、实现连缀语法

即可以使用Base.getId('box').css('color','red').html('标题').click(function(){alert('a')});类似的语句实现对象方法的连续调用
需要在步骤1的基础上改写库对象：

//分析：想要实现连缀语法Base.getId('box').css('color','red').html('标题').click(function(){alert('a')});
//需要在Base类中实现css(),html(),click()方法，且方法都要return一个Base对象
//在Base对象中，一般设置css,innnerHTML,onclick的方法如下
//var base=new Base();    new一个Base类的实例
//base.getId('box').style.color='red';   定义color
//base.getId('box').style.backgroundColor='red';
//base.getId('box').innerHTML='标题';
//base.getId('box').onclick=function(){alert('a')};
//现在需要将上面的设置为Base类的css,html,click方法，

//定义$函数，用于生成多个Base()实例对象，后面需要Base实例时，直接使用$()即可
var $ = function(){
    return new Base();
};
function Base(){
    //使用this关键字创建elements数组，用来保存获取目标节点和节点数组
    this.elements=[];
    //使用this关键字定义获取节点的方法
    this.getId=function(id){
        var e=document.getElementById(id);
        this.elements.push(e);
        return this;
    }
    this.getTagName=function(tag){
        var e=document.getElementsByTagName(tag);
        for(var i in e){
            this.elements.push(e[i]);
        }
        return this;
    }
}
//也可以使用prototy添加Base的原型方法
Base.prototype.css=function(attr,value){
    //对指定节点元素设置属性和值
    for(var i in this.elements){
        this.elements[i].style[attr]=value;
    }
    return this;
}
Base.prototype.html=function(str){
    for(var i in this.elements){
        this.elements[i].innerHTML=str;
    }
    return this;
};
//类方法调用
window.onload=function(){
     //每一个$()为一个对象实例，可调用类中封装好的方法
    $().getId('box').css("color","red").html("title");
    $().getTagName('p').css("color","blue").html("标题");
};

3、CSS的封装

获取行内样式

以上是通过html()方法和css()方法可以设置标题内容和CSS样式，但现在如果想要通过这两个方法获取已将定义好的属性值：类似于:$().getId('box').html(); $().getId('box').css();时是不满足的，现在就需要重写这两个方法。

//分析：要实现方法既能设置传入的参数值，返回Base对象，又能在传入参数为null的情况下返回当前属性值，那只要判断传过来的参数即可：
//如果没有传参数，则函数返回当前属性值，如果传入参数，则需要设置传入的属性值，并返回Base对象，重写的代码如下：
Base.prototype.css=function(attr,value){
    //对指定节点元素设置属性和值
    for(var i in this.elements){
        //使用arguments数组对象获取传入的参数，并判断参数的个数
        if(arguments.length==1){
            return this.elements[i].style[attr];
        }
        this.elements[i].style[attr]=value;
    }
    return this;
}
Base.prototype.html=function(str){
    for(var i in this.elements){
        //使用arguments数组对象获取传入的参数，并判断参数的个数
        if(arguments.length==0){
            return this.elements[i].innerHTML;
        }
        this.elements[i].innerHTML=str;
    }
    return this;
};
//类方法调用
window.onload=function(){
     //每一个$()为一个对象实例，可调用类中封装好的方法
    $().getId('box').css("color","red").html("title");
    //$().getTagName('p').css("color","blue").html("标题");
    alert($().getId('box').html());
    alert($().getId('box').css("color"));
};

获取外部CSS样式

以上获取的css样式，仅是行内的css，如果使用link链接的外部CSS,又该如何处理呢？
这里可以使用W3C 的window.getComputedStyle和IE的currentStyle来获取，更改后的代码如下：

Base.prototype.css=function(attr,value){
    //对指定节点元素设置属性和值
    for(var i in this.elements){
        //使用arguments数组对象获取传入的参数，并判断参数的个数
        if(arguments.length==1){
            if(typeof window.getComputedStyle != 'undefined'){//W3C
                return window.getComputedStyle(this.elements[i],null)[attr];
            }else if(typeof this.elements[i].currentStyle != 'undefined'){//IE
                return this.elements[i].currentStyle[attr];
            }
        }
        this.elements[i].style[attr]=value;
    }
    return this;
}

以上内容来自李炎恢老师JavaScript课程实战篇笔记整理