您的位置：首页 > Web前端 > JavaScript

js封装库2-连缀

2015-08-19 18:22 513 查看

连缀，可以理解成链式写法，就是捕抓到一个页面元素后通过链式写法惊醒后续的多个添加，象JQuery那样通过'.'来连接

如：

　　getId(id).css('样式内容').css('样式内容').html('标签包含的内容').click('点击事件');

同样的也是三个文件，demo.html、demo.js、base.js

demo.html页面建立这个代码：

　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="demo.js"></script>

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

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

</body>
</html>

demo.js：用于书写被封装的好的代码操作

base.js：书写封装的js代码

首先在base.js中书写上用于类作为调用方式的简写方法，先书写上简单的捕获元素ID的方法

function Base()
{
// 基类里面定义一个数组
this.elements = [];
// 获取id节点
this.getId = function (id){
this.elements.push(document.getElementById(id));
return this;
};
}

那么就可以在demo.js中调用对应的base.js代码来实现了

window.onload = function()
{
//实例化对象
var base = new Base();
调用方法
alert(Base.getId('box'));

}

这样可以捕抓到id，代码里做了弹出设置，查看是否成功弹出了对应的id

弹出是正常的。那么就进入到下一步了。

再在base.js上加入获取标签元素tagname的类方法，那么类里面就变成增加多一条方法，整体变成下面的代码

function Base()
{
// 基类里面定义一个数组
this.elements = [];
// 获取id节点
this.getId = function (id){
this.elements.push(document.getElementById(id));
return this;
};

// 获取元素节点
this.getTagName = function(tag){
// 为了获取多个标签内容，这里使用赋值，并进行for循环
var tags = document.getElementsByTagName(tag);
for (var i = 0; i <tags.length; i++) {
this.elements.push(tags[i]);
};
// 凡运算就有运算结果，返回当前对象给方法
return this;
};
}

那么demo.js可以加多一个弹出看能不能正确弹出获取到的标签

window.onload = function()
{
//实例化对象
var base = new Base();
//调用方法
alert(Base.getId('box'));
alert(Base.getTagName('p'));
}

既然能弹出正确的元素对象，下面接着写一个Css样式

// 更改CSS样式
Base.prototype.css = function (attr,value){
// 那么下面就需要for循环一下对象元素，进行设置值
for (var i = 0; i <this.elements.length; i++) {
this.elements[i].style[attr] = value;//遍历具体对象进行设置样式
};
// 凡运算就有运算结果，返回当前对象给方法
return this;
}

利用prototype可以直接修改对象原型的属性与值的特性，也就是方法中的两个形参 attr与value 这就象jquery里面的CSS调用一样了

而为什么这样写，因为页面上可以有多个标签，而如果我们只写：this.elements.style[attr] = value; 这句话就开始return的话，那么返回的只是一个对象，

并没是自己需要的多个以上的标签元素更改样式，利用for循环进行了遍历，输出每个元素的属性与值，这样做就可以将自己需要更改的多个标签样式更改完成了

这样demo.js中可以使用下面的代码进行实现效果：

window.onload = function()
{
var base = new Base();
Base.getId('box').css('color','red').css('background','green');
Base.getTagName('p').css('color','blue').css('background','blue');

}

通过demo.js的调用后， demo.html中的效果就出来了

效果是出来了，但发现，id为box的底色被P标签的底色覆盖了。这是什么原因呢

是因为，他们处于统一个对象下面，都是background这个属性，返回给同意个base对象后，后者就覆盖了前者

解决这个bug的地方就是按照老师的讲法，就是每次都new一个新对象。将他们单独起来。所以我在base.js中，在Base上面加上一个代码如下：

// 解决只下面只返回一个对象的问题，样式给覆盖了。
// 下面写这个函数后，每次都返回一个新对象就可以单独出现了
var $ = function ()
{
return new Base;
}

既然更改了封装库文件的对象代码，那么demo.js同时需要更新一下，如下：

window.onload = function()
{
$().getId('box').css('color','red').css('background','green');
$().getTagName('p').css('color','#fff').css('background','blue');

}

这样更新一下demo.js中的代码后，在demo.html出来的效果就是id是box的元素底色是绿色 p标签为蓝色了清晰明了

老师继续讲了连缀获取标签内的内容，需要在base.js中写在Base类的外面，同样需要利用到prototype原型来操作，代码如下：

// 更改内容
Base.prototype.html = function (str){
// 那么下面就需要for循环一下对象元素，进行设置值
for (var i = 0; i <this.elements.length; i++) {
this.elements[i].innerHTML = str;
};
// 凡运算就有运算结果，返回当前对象给方法
return this;
}

这里也是利用了for循环，但是获取对应i后面的属性变成了原生的innerHTML，都知道可以用于更改页面元素的属性

传入一个str 那么对象中的内容就更改成了输入进去的那个str字符串了

好的，下面继续在demo.js中修改一下P标签的代码，如下：

$().getTagName('p').css('color','#fff').css('background','blue').html('标题');

在后面增加了HTML连缀后，刷新一下页面，原本demo.html中的P表情内容全部被替换成了标题这两个字，确实很方便的封装。

下面老师继续讲了连缀的点击事件，也是需要在base.js中增加代码。利用原型对对象的属性进行修改：如下

// 点击事件  fn是回调函数
Base.prototype.click = function(fn){
for (var i = 0; i <this.elements.length; i++) {
this.elements[i].onclick = fn;
};
// 凡运算就有运算结果，返回当前对象给方法
return this;
}

封装库文件中的代码增加完毕后，再到demo.js中为P标签增加一个点击的连缀。如下这样增加：

$().getTagName('p').css('color','#fff').css('background','blue').html('标题').click(function(){
alert('a');
});

就是这样，直接在html后面用'.'进行连接，打上click 回调一个函数，弹出一个A 进行测试

刷新页面后，点击了随便一个P元素就弹出了一个A。就此连缀这节课完成了。而我也跟着老师完成了这个连缀的封装

通过回忆，与查看打完的代码，逐步回忆起老师的讲课步骤，巩固了一下脑中的东西

就此记录，方便以后查看。

从前端到后端，慢慢记录慢慢积累，走得再慢总会有登上高峰的日子。共勉。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航