版权声明:本文为博主原创文章,欢迎转载。 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;
}