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

一、建立基本库

首先建立一个基本库，名字叫作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);
};

二、实现连缀语法

便可以使用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("标题");
};

三、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课程实战篇笔记整理