废话不多说,代码摆出来,注释什么的都很清楚,如果看不很懂,请移步 javascript链式调用
//设计一个支持方法链式调用的JavaScript库
/*
常见于大多数JavaScript库中的特性
—————————————————————————————————————————————————————————————————————
特性 | 说明
————————————————————————————————————————————————————————————————————————————————
事件 | 添加和删除事件监听器,对时间对象进行规范内化处理
DOM | 类名管理,样式管理
Ajax | 多XMLHttpRequest进行规范化处理
————————————————————————————————————————————————————————————————————————————————
注:可以对私有的_$构造函数进行扩充
*/
Function.prototype.method = function(name, fn){
this.prototype[name] = fn;
return this;
};
(function(){
function _$(els){
this.element = [];
for(var i = 0, len = els.length; i < len; i++){
var element = els[i];
if(typeof element === 'string'){
element = document.getElementById(element);
}
this.element.push(element);
}
return this;
}
/*
Events
* addEvent
*/
_$.method('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);
});
}).
/*
otherFun
* each
* setStyle
* show
*/
method('otherFun', function(fn){
for(var i = 0, len = this.element.length; i < len; i++){
fn.call(this, this.element[i]);
}
return this;
}).
method('setStyle', function(prop, val){
this.each(function(el){
el.style[prop] = val;
});
return this;
}).
method('show', function(){
var that = this;
this.each(function(el){
that.setStyle('display', 'none');
});
return this;
});
window.installHelper = function(scope, interface){
scope[interface] = function(){
return new _$(arguments);
};
};
})();
/*
//处理库中$的冲突问题
用户可能会这样使用:
installHelper(window, "$");
$('example').show();
也可以将功能添加到实现定义好的命名空间对象中:
window.com = window.com || {};
com.example = com.example || {};
com.example.util = com.example.util || {};
installHelper(com.example.util, '$');
(function(){
var get = com.example.util.get;
get('example').show();
})();
*/
分享到:
相关推荐
链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。 描述 链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,...
javascript 支持链式调用的异步调用框架Async.Operation.docx
链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码...
本文实例讲述了JavaScript链式调用原理与实现方法。分享给大家供大家参考,具体如下: 1、什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:...
本文更多从链式调用方法返回值的角度,更进一步来说明如何实现链式调用。 什么是链式调用 链式调用在 JavaScript 语言界很常见,如 jQuery 、 Promise 等,都是使用的链式调用。链式调用可以让我们在进行连续...
格式化-function与小括号间留空格。链式调用不换行 文章链接https://editor.csdn.net/md/?articleId=103597199
主要带领大家学习JavaScript设计模式,其中重点介绍链式调用,感兴趣的小伙伴们可以参考一下
javascript 支持链式调用的异步调用框架Async.Operation
本文实例讲述了javascript简单链式调用方法。分享给大家供大家参考,具体如下: jQuery用的就是链式调用。像一条连接一样调用方法。 链式调用的核心就是return this;,每个方法都返回对象本身。 下面是简单的模拟...
这种调用方式就叫做链式调用,也就是说在调用一个方法之后,可以使用方法的返回值来继续进行方法调用。 2.如何实现链式调用: 了解了什么是链式调用,我们再来看如何实现链式调用,从1中所述我们应该知道链式调用的...
链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里。 没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法...
Javascript链式调用 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
本文实例分析了JavaScript链式调用。分享给大家供大家参考,具体如下: 对$函数你已经很熟悉了。它通常返回一个html元素或一个html元素的集合,如下: function$(){ var elements = []; for(vari=0,len=arguments...