[js项目]封装库-连缀

封装库-连缀

在调用库的时候，我们需要能够在前台调用的时候可以同时设置多个操作，比如设置 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();
};

转载于:https://my.oschina.net/jason26/blog/1623880

[js项目]封装库-连缀相关推荐

第一百三十节，JavaScript，封装库--连缀
JavaScript,封装库--连缀学习要点: 1.连缀介绍 2.改写库对象本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHT ...
项目封装库系列之“三”工具类【网络拦截器】
引言:记录自己项目中使用的库,非技术文章. okhttp请求的日志拦截器.基于okhttp3版本: 上代码: public class HttpLoggingInterceptor implement ...
Moment.js 一款JS时间封装库
链接地址:http://momentjs.cn/docs/#/displaying/difference/ 转载于:https://www.cnblogs.com/lpt1229/p/6023512. ...
只有 2 行代码的库，坑了数百万 JS 项目
综合整理:技术最前线(ID:TopITNews) 参考:solidot.ZDNet 上周末,一个 npm 小项目的更新给整个 npm 生态系统制造了一场混乱,影响到了数百万 JS 项目.这个库就是 i ...
第一百三十一节，JavaScript，封装库--CSS
JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 ...
第10章-Vue.js 项目实战
一.本节内容掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装能够使用axios进行数据请求二.webpack项目的目 ...
iOS、mac开源项目及库（转载）
目录 UI 下拉刷新模糊效果 AutoLayout 富文本图表表相关隐藏与显示 HUD与Toast 对话框其他UI 动画侧滑与右滑返回手势其他动画网络相关网络连接网络测试图像获取 ...
Android开源项目及库整理总结
自己总结的Android开源项目及库. github排名https://github.com/trending, github搜索:https://github.com/search UI Aweso ...
THREE.JS 与其他库的对比
随着 WebGL 的迅速发展,相关的 WebGL 库也丰富起来,接下来介绍几个比较火的 WebGL 库. 与 BABYLON.JS 对比 Babylon.JS 是最好的 JavaScript 3D 游 ...

[js项目]封装库-连缀

封装库-连缀

一．连缀介绍

二．改写库对象

[js项目]封装库-连缀相关推荐

最新文章

热门文章

[js项目]封装库-连缀

封装库-连缀

一． 连缀介绍

二． 改写库对象

[js项目]封装库-连缀相关推荐

最新文章

热门文章

一．连缀介绍

二．改写库对象