如何设计一个支持方法链式调用的JavaScript库

废话不多说，代码摆出来，注释什么的都很清楚，如果看不很懂，请移步 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();
	})();
*/

评论

1 楼 mfkvfn 2012-09-18  

不就是settter方法最后return this;么？说得那么高深干嘛