JavaScript链式调用实现原理与库设计指南

链式调用基础原理

链式调用本质上是一种语法技巧，旨在通过复用初始操作，用精简的代码表达复杂的逻辑。该技术的核心由两部分组成：

用于创建代表HTML元素对象的工厂函数。

一组针对这些HTML元素执行特定操作的方法。

调用链的结构设计

(function() {
    /*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
     */
function _$(els) {
this.elements = []; //存放HTML元素
for(var i=0, len=els.length; i<len; 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);
    };   
})();

由于所有对象都会继承其原型对象的属性和方法，因此我们可以让定义在原型对象中的方法都返回调用该方法的实例对象引用（即this），从而实现对后续方法的链式调用。

(function() {
    /*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
     */
function _$(els) {
        //...
    }
//对HTML元素可执行的操作
_$.prototype = {
each: function(fn) { //fn 回调函数
for(var i=0; i<this.elements.length; 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);
    }
})();
//----------------------- 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库

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)
        }
    }  
})();

小结：

链式调用有助于简化代码编写，使代码更加简洁、易读。它避免了多次重复使用对象变量，从而减少代码量。若需保持类接口一致性，使赋值器和取值器均支持链式调用，可在取值器中使用回调函数来解决数据获取问题。