[js项目]封装库-连缀
2018-02-26 00:00
225 查看
封装库-连缀
在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置 CSS,设置innerHTML,设置 click事件等等。一. 连缀介绍
所谓连缀,最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作 。比如:
$().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项目]封装库-连缀
- [js项目]封装库-连缀
- 企业项目中js方法的封装和使用
- 收集了项目中常用的js函数和封装代码.
- [js项目]封装库-CSS[下]
- js封装库2-连缀
- JS——封装一个可以连缀的DOM库
- 项目日志的管理和应用 log4js-Node.js中的日志管理模块使用与封装
- [js项目]封装库-CSS[下]
- [js项目]封装库-CSS[上]
- 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,
- [js项目]封装库-下拉菜单
- [js项目]封装库-CSS[下]
- JS封装库--连缀
- [js项目]封装库-下拉菜单
- [js项目]封装库-下拉菜单
- struts2项目jsp页面通过js调取action中的封装的json
- QiYuAdmin-Thymeleaf的include封装共用js和css(项目优化)
- vue项目用js封装的md5
- 实用前端JS工具类(验证,AJAX请求封装,分页插件等)真实项目使用