JS链式调用的实现方法_javascript技巧
程序员文章站
2023-12-26 14:53:27
...
链式调用
链式调用其实只不过是一种语法招数。它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。该技术包括两个部分:
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
this.elements = []; //存放HTML元素
for(var i=0, len=els.length; i var element = els[i];
if(typeof element === 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
}
//对HTML元素可执行的操作
_$.prototype = {
each: function() {},
setStyle: function() {},
show: function() {},
addEvent: function() {},
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
};
})();
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
//...
}
//对HTML元素可执行的操作
_$.prototype = {
each: function(fn) { //fn 回调函数
for(var i=0; i //执行len次,每次把一个元素elements[i]作为参数传递过去
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, value) {
this.each(function(el) {
el.style[prop] = value;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
}else if(document.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
addHandle(el);
});
return this;
}
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
}
})();
window.API = window.API || function() {
var name = 'mackxu';
//特权方法
this.setName = function(name0) {
name = name0;
return this;
};
this.getName = function(callback) {
callback.call(this, name);
return this;
};
};
//------------- test ---
var obj = new API();
obj.getName(console.log).setName('zhangsan').getName(console.log);
设计一个支持方法链式调用的JS库
JS库特征:
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
//...
}
/*
* Events
* addEvent
* removeEvent
*/
_$.method('addEvent', function(type, fn) {
//...
}).method('removeEvent', function(type, fn) {
})
/*
* DOM
* addClass
* removeClass
* hover
* hasClass
* getClass
* getStyle
* setStyle
*/
.method('addClass', function(classname) {
//...
}).method('removeClass', function(classname) {
//...
}).method('hover', function(newclass, oldclass) {
//...
}).method('hasClass', function(classname) {
//...
}).method('getClass', function(classname) {
//...
}).method('getStyle', function(prop) {
//...
}).method('setStyle', function(prop, val) {
//...
})
/*
* AJAX
* ajax
*/
.method('ajax', function(url, method) {
//...
});
window.$ = function() {
return new _$(arguments);
};
//解决JS库命名冲突问题
window.installHelper = function(scope, interface) {
scope[interface] = function() {
return _$(arguments)
}
}
})();
链式调用其实只不过是一种语法招数。它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。该技术包括两个部分:
一个创建代表HTML元素的对象的工厂。
一批对这个HTML元素执行某些操作的方法。
调用链的结构
$函数负责创建支持链式调用的对象
复制代码 代码如下:
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
this.elements = []; //存放HTML元素
for(var i=0, len=els.length; i
if(typeof element === 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
}
//对HTML元素可执行的操作
_$.prototype = {
each: function() {},
setStyle: function() {},
show: function() {},
addEvent: function() {},
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
};
})();
由于所有对象都会继承其原型对象的属性和方法,所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用,这样就可以对那些方法进行链式调用了。
复制代码 代码如下:
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
//...
}
//对HTML元素可执行的操作
_$.prototype = {
each: function(fn) { //fn 回调函数
for(var i=0; i
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, value) {
this.each(function(el) {
el.style[prop] = value;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
}else if(document.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
addHandle(el);
});
return this;
}
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
}
})();
//----------------------- test --------
$(window).addEvent('load', function() {
$('test-1', 'test-2').show()
.setStyle('color', 'red')
.addEvent('click', function() {
$(this).setStyle('color', 'green');
});
})
链式调用的方法获取数据
使用回调函数从支持链式调用的方法获取数据。链式调用很适合赋值器方法,但对于取值器方法,你可能希望他们返回你要的数据而不是this(调用该方法的对象).解决方案:利用回调技术返回所要的数据.
复制代码 代码如下:
window.API = window.API || function() {
var name = 'mackxu';
//特权方法
this.setName = function(name0) {
name = name0;
return this;
};
this.getName = function(callback) {
callback.call(this, name);
return this;
};
};
//------------- test ---
var obj = new API();
obj.getName(console.log).setName('zhangsan').getName(console.log);
设计一个支持方法链式调用的JS库
JS库特征:
事件: 添加和删除事件监听器、对事件对象进行规划化处理
DOM: 类名管理、样式管理
Ajax: 对XMLHttpRequest进行规范化处理
复制代码 代码如下:
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
//...
}
/*
* Events
* addEvent
* removeEvent
*/
_$.method('addEvent', function(type, fn) {
//...
}).method('removeEvent', function(type, fn) {
})
/*
* DOM
* addClass
* removeClass
* hover
* hasClass
* getClass
* getStyle
* setStyle
*/
.method('addClass', function(classname) {
//...
}).method('removeClass', function(classname) {
//...
}).method('hover', function(newclass, oldclass) {
//...
}).method('hasClass', function(classname) {
//...
}).method('getClass', function(classname) {
//...
}).method('getStyle', function(prop) {
//...
}).method('setStyle', function(prop, val) {
//...
})
/*
* AJAX
* ajax
*/
.method('ajax', function(url, method) {
//...
});
window.$ = function() {
return new _$(arguments);
};
//解决JS库命名冲突问题
window.installHelper = function(scope, interface) {
scope[interface] = function() {
return _$(arguments)
}
}
})();
小结:
链式调用有助于简化代码的编写工作,并在某种程度上可以让代码更加简洁、易读。很多时候使用链式调用可以避免多次重复使用一个对象变量,从而减少代码量。如果想让类的接口保持一致,让赋值器和取值器都支持链式调用,那么你可以在取值器中使用回调函数来解决获取数据问题。
推荐阅读
-
JS链式调用的实现方法_javascript技巧
-
js中设置元素class的三种方法小结_javascript技巧
-
常见的原始JS选择器使用方法总结_javascript技巧
-
JS取得绝对路径的实现代码_javascript技巧
-
js控制容器隐藏出现防止样式变化的两种方法_javascript技巧
-
如何用js 实现依赖注入的思想,后端框架思想搬到前端来_javascript技巧
-
js实现每日自动换一张图片的方法_javascript技巧
-
让低版本浏览器支持input的placeholder属性(js方法)_javascript技巧
-
JS的replace方法与正则表达式结合应用讲解_javascript技巧
-
ExtJS实现文件下载的方法实例_javascript技巧