如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用
1.以$ 函数为例。通常返回一个HTML元素或一个元素集合。
代码如下:
function $(){
var elements = [];
for(var i=;i<arguments.length;i++){
var element = argument[i];
if(typeOf element == "String") {
element = document.getElementById(element);
}
if ( arguments.length === ) {
return element;
}
elements.push(element);
}
return elements;
}
但是;如果把这个函数改造为一个构造器,把那写元素作为数组保存在一个实例属性中,并让所有
定义在构造器函数的prototype属性所指对象的方法都返回泳衣调用方法的那个实例的引用,那么它
就有了进行链式调用的能力。
首先,需要把$函数改为一个工厂方法,负责支持链式调用的对象,这个函数应该能接受元素数组形式的参数,以便于我们能够使用与原来一样的公共借口。
代码如下:
(function(){
//私有
function _$(els){
this.elements = [];
for(var i=;i<els.length;i++) {
var element = els[i];
if(typeOf element === "String") {
element = document.getElementById(element);
}
this.elements.push(element);
}
//共有借口 仍然一样
window.$ = function() {
return new _$(arguments);
} })()
由于所有对象都会继承其原型对象的属性和方法,所以我们可以让定义在原型对象中的几个方法都返回用于调用方法的实例对象的引用,这样就可以对那些方法进行链式调用---》有了这一点《-----我们就可以动手在_$这个私有构造函数的prototype对象中添加方法,用于实现链式调用;
代码如下:
(function() {
// 私有构造器
function _$(els){
this.elements = [];
for(var i = ;i<els.length;i++){
var element = els[i];
if(typeOf element === "String") {
element = document.getElementById(element);
}
this.elements.push(element);
}
// 在原型中添加属性和方法
_$.prototype = {
each: function(){
for(var i = ;i<this.elements.length;i++){
fn.call(this,this.elements[i]);
}
return this;
},
setStyle: function(prop, val) {
this.each(function(el){
el.style[prop] = val;
});
return this;
},
show: function() {
var that = this;
this.each(function(el){
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn){
var add = function(el){
if(window.addEventListener) {
el.addEventListener(type, fn,false);
} else if(window.attachEvent) {
el.attachEvent(on + 'type', fn);
}
this.each(function(el){
add(el);
});
}
return this;
}
};
window.$ = function() {
return new _$(arguments);
} } })
到目前为止,该类的每一个方法的最后一行都是以 return this 结束。 这会将用以调用方法的对象传给调用链上的下一个方法。支持链式调用的接口带来的可能性是无穷的。现在你就可以实现代码的链式调用了
$(window).addEvent('load',function(){
$('xxx').show().setStyle().addEvent('click',function(){
//想写的代码
})
})
ps: 到此为止,你基本上可以理解JS 或者 Jquery是如何实现了方法的链式调用。。。
如果觉得文章不错,欢迎打赏
下一篇将介绍如何设计一个支持方法链式调用的JS 库
如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用的更多相关文章
- JavaScript设计模式——方法的链式调用
方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...
- 学了ES6,还不会Promise的链式调用?🧐
前言 本文主要讲解promise的链式调用的方法及其最终方案 应用场景 假如开发有个需求是先要请求到第一个数据,然后根据第一个数据再去请求第二个数据,再根据第二个数据去请求第三个数据...一直到最后得 ...
- 这一次搞懂Spring代理创建及AOP链式调用过程
文章目录 前言 正文 基本概念 代理对象的创建 小结 AOP链式调用 AOP扩展知识 一.自定义全局拦截器Interceptor 二.循环依赖三级缓存存在的必要性 三.如何在Bean创建之前提前创建代 ...
- 【Java】子类的链式调用
记录最近在项目设计中遇到的一个小问题. 前提:有这样两个POJO类,它们都可以通过链式调用的方式来设置其属性值,其中一个类继承了另一个类. 问题:通过链式调用,子类对象访问父类方法后,如何使返回对象仍 ...
- Swift2.1 语法指南——可空链式调用
原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...
- Swift-09-可空链式调用(Optional Chaining)
我对这个的理解就是:我们有可能会用到其他的属性或者方法,当我们在使用其他的时候,可以使用点语法去访问另一个的属性,这样的使用,就形成了链式访问. 可空链式调用是一种可以请求和调用属性.方法及下表的过程 ...
- swift 学习- 19 -- 可选链式调用
// 可选链式调用 是一种在当前值可能为 nil 的可选值上请求 和 调用属性, 方法以及下标, 如果 可选值有值, 那么调用就会成功, 如果可选值是 nil, 那么就会将返回 nil , // 多个 ...
- js链式调用 柯里化
var d = 1; d.add(2).add(3).add(4) //输出10 写出这个add函数 Number.prototype.add = function(x){ return this + ...
- [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数
一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...
随机推荐
- ubuntu下面更改用户名的方法
在装HADOOP 系统时候不小心, 没有将三台机器的用户名设置为一致的用户名,导致后面发生很多麻烦.下面总结一下UBUNTU中改用户名的方法. 1. 先给系统添加一个super用户,我们用这个用户名 ...
- html-fieldset线中嵌套字符
<form> <fieldset> <legend>health information</legend> height: <input type ...
- PRINCE2特征(二)
英国体系环境下项目有什么特征(二) 今天又要和大家分享了,这个时间也是自己很喜欢的时刻.上次给大家分享的是英国体系下项目的特征之一:临时性.不知道大家还有没有印象,英国体系下项目的特征有五个,今天来给 ...
- 【USACO 3.2】Spinning Wheels(同心圆旋转)
题意: 5个同心圆,告诉你角速度,每个圆有1至5个楔,告诉你起点和宽度.求最早时间如果有的话使得存在某个角度经过5个圆的楔. 题解: 最重要的是要意识到,360秒钟后,每个圆都回到了原来的位置. 我的 ...
- kafka集群安装部署
kafka集群安装 使用的版本 系统:centos6.5 centos6.7 jdk:1.7.0_79 zookeeper:3.4.9 kafka:2.10-0.10.1.0 一.环境准备[只列,不具 ...
- The commands of Disk
The commands of Disk fdisk( the disk size is less 2TB) fdisk - partition table manipulator for Linux ...
- HTML <a> 标签的 target 属性
HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...
- jstack工具查看系统线程问题
背景: 最近在做项目系统的异常测试,项目依赖于nkv,需要模拟依赖组件nkv异常时系统的响应及性能情况.通过tc工具模拟当服务器发送到nkv的请求超时时系统的响应.发现接口返回错误率100%,查看服务 ...
- 安装LNMP(Nginx+Mysql+PHP)
1:安装nginxyum install -y gcc pcre-devel openssl-develwget http://www.nginx.org/download/nginx-1.4.2.t ...
- confirm对话框取消后阻止ajax操作、ajax做批量删除
在做批量删除的时候,需要用confirm弹出一个提示框让用户确认是否删除,点击确定,执行操作,点击取消,取消操作.但是如果使用ajax把选中项的主键值传到处理页面处理时,如果使用下面的方法将confi ...