JavaScript学习-封装基础库1

版权声明：本文为博主原创文章，欢迎转载。 https://blog.csdn.net/fww330666557/article/details/78784031

一、为什么要封装

JS中我们最常用的，也许就是获取节点的方法，例如如下HTML：

<div id='box'>id</div>
<input type="radio" name ="sex" value='男' checked="checked"/>
<p>段落</p>

通常我们可以如下获取：

window.onload = function(){
    alert(document.getElementById('box').innerHTML);
    alert(document.getElementsByName('sex')[0].value);
    alert(document.getElementsByTagName('p')[0].innerHTML);
}

可以看到这些基本的方法书写比较复杂，而且容易出错，并且这些方法又非常常用，一个页面中可能就会用到好多次。因此我们可以对其进行封装。

二、初步封装

原则：方法尽可能简短而且富有含义。

demo.html：

<div id='box'>id</div>
<input type="radio" name ="sex" value='男' checked="checked"/>
<p>段落</p>

demo.js:

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

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);
    }
};

三、连缀

一句代码同时设置一个或多个节点两个或两个以上的操作。如：

Base.getId('box').css('color','red').css('backgroundColor','black').html('pox').click(function(){alert('a');});

我们分析一下这句代码：
Base是我们基础库的核心对象；
Base.getId(‘box’)返回的是一个divElement,这个对象是没有css()方法的;
在Base对象中添加css()方法、html()方法、click()方法,调用这些方法的时候返回Base对象即可。

demo.html：

<div id='box'>box</div>
<p>段落</p>
<p>段落</p>
<p>段落</p>

demo.js:

window.onload = function(){
    $().getId('box').css('color','red').css('backgroundColor','black');
    $().getTagName('p').css('color','green').html('标题').click(function(){
        alert(123);
    });
}

base.js:

// 前台调用
var $ = function(){
    return new Base();
}
// 基础库
function Base(){
    // 创建一个数组来保存获取的节点和节点数组
    this.elements = [];
}
// 获取ID节点
Base.prototype.getId = function(id){
    this.elements.push(document.getElementById(id));
    return this;
}
// 获取元素节点
Base.prototype.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;
}
// 设置innerHTML
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;
}