JS封装库--连缀
2017-03-15 16:07
211 查看
连缀的介绍:
最简单的理解:一句话同时设置一个或多个节点两个或者两个以上操作。
好处:快速方便的设置节点的操作。
例子:
改写库对象:
如果是实现操作连缀,那么我们就需要改写对象写法: var Base = {},这种写法无法在它的原型中添加方法,所以需要使用函数式对象写法:
PS:这种写法麻烦的地方是,需要在前台 new 出来,然后调用。但采用这种方式, 我们可以在每个方法里都返回这个对象 ,并且还可以在对象的原型里添加 方法,这些都是连缀操作最基本的要求。
PS:为了避免在前台 new 一个对象,我们可以在库里面直接 new。
最简单的理解:一句话同时设置一个或多个节点两个或者两个以上操作。
好处:快速方便的设置节点的操作。
例子:
$().getId('box').css('color', 'red').html('标题').click(function () {alert('a')});
改写库对象:
如果是实现操作连缀,那么我们就需要改写对象写法: var Base = {},这种写法无法在它的原型中添加方法,所以需要使用函数式对象写法:
function Base() { //把返回的节点对象保存到一个 Base 对象的属性数组里 this.elements = []; //获取 id 节点 this.getId = function (id) { this.elements.push(document.getElementById(id)); return this; }; //获取 name 节点数组 this.getName = function (name) { var names = document.getElementsByName(name); for (var i = 0; i < names.length; i ++) { this.elements.push(targs[i]); } return this; } //获取元素节点数组 this.getTagName = function (tag) {  var tags = document.getElementsByTagName(tag); for (var i = 0; i < tags.length; i ++) { this.elements.push(tags); } return this; }; }
PS:这种写法麻烦的地方是,需要在前台 new 出来,然后调用。但采用这种方式, 我们可以在每个方法里都返回这个对象 ,并且还可以在对象的原型里添加 方法,这些都是连缀操作最基本的要求。
Base.prototype.click = function (fn) { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].onclick = fn; } return this; }; Base.prototype.css = function (attr, value) { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].style[attr] = value; } return this; } Base.prototype.html = function (str) { for (var i = 0; i < this.elements.length; i ++) { this.elements[i].innerHTML = str; } return this; }
PS:为了避免在前台 new 一个对象,我们可以在库里面直接 new。
var $ = function () { return new Base(); };
相关文章推荐
- 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,
- [js项目]封装库-连缀
- js封装库2-连缀
- [js项目]封装库-连缀
- JS——封装一个可以连缀的DOM库
- 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,
- [js项目]封装库-连缀
- [推荐]!链接已恢复]AJAX自动完成功能的js封装源码[支持中文,翻页]v3
- Class Of Marquee Scroll通用不间断滚动JS封装类第1/2页
- 一个js封装的不错的选项卡效果代码
- 如何封装JS和CSS文件为服务器端控件
- 如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
- 如何封装JS和CSS文件封装为服务器端控件---ASP.NET 2.0
- 收集了项目中常用的js函数和封装代码.
- 一个封装的在后台弹出JS Alert消息和JS confirm信息以及跳转到指定的页面
- 一个封装的创建DOM元素的JS方法
- 本人写的一个不错的js封装类(有什么不好的地方请提出)
- 通用不间断滚动JS封装类
- JS中封装解析xml的代码,以及实例应用
- 如何封装JS和CSS文件为服务器端控件