《javascript设计模式》笔记之第六章：方法的链式调用
浏览数：16 /
时间：2015年06月08日
这一章要实现的就是jQuery的那种链式调用，例子：
$(this).setStyle(‘color‘, ‘green‘).show();
一：调用链的结构：
首先我们来看一下最简单的$()函数的实现：
function $() { var elements = []; for (var i = 0, len = arguments.length; i < len; ++i) { var element = arguments[i]; if (typeof element == ‘string‘) { element = document.getElementById(element); } if (arguments.length == 1) { return element; } elements.push(element); } return elements; }
如果我们要实现$().method()这样的使用方法，想到应该就是$()函数有返回值，并且返回的是一个对象。要实现前面的所说的，最好的方法就是$()里面应该有个类可以让我们new一个对象出来，所以上面的代码就变成下面的样子：
(function() { // Use a private class. function _$(els) { this.elements = []; 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); } } // The public interface remains the same. window.$ = function() { return new _$(arguments); }; })();
此外我们的对象应该要有方法可以调用啊，那就定义在prototype上吧，然后代码就变成下面那样了：
(function() { function _$(els) { // ... } _$.prototype = { each: function(fn) { for ( var i = 0, len = this.elements.length; i < len; ++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); }; })();
到这里，我们就可以大概的使用一下了：
$(‘test-1‘, ‘test-2‘).show(). setStyle(‘color‘, ‘red‘). addEvent(‘click‘, function(e) { $(this).setStyle(‘color‘, ‘green‘); });
二：设计一个支持方法链式调用的JavaScript库：
一般的js库里面都包含着事件、DOM、Ajax这几个重要的模块，那模仿一下：
Function.prototype.method = function(name, fn) { this.prototype[name] = fn; return this; }; (function() { function _$(els) { // ... } /* Events * addEvent * getEvent */ _$.method(‘addEvent‘, function(type, fn) { // ... }).method(‘getEvent‘, function(e) { // ... }). /* DOM * addClass * removeClass * replaceClass * hasClass * getStyle * setStyle */ method(‘addClass‘, function(className) { // ... }).method(‘removeClass‘, function(className) { // ... }).method(‘replaceClass‘, function(oldClass, newClass) { // ... }).method(‘hasClass‘, function(className) { // ... }).method(‘getStyle‘, function(prop) { // ... }).method(‘setStyle‘, function(prop, val) { // ... }). /* AJAX * load. Fetches an HTML fragment from a URL and inserts it into an element. */ method(‘load‘, function(uri, method) { // ... }); window.$ = function() { return new _$(arguments); }); })();
其实用的还是上面的方法。
不过，注意到最上面的几行代码了吗，我记得第一章说过，这样的话让添加prototype方法也使用链式调用玩起来了。。
还有，倒数第四行那里，我们总是把函数赋予给window.$,这样的话与一些使用$做命名空间的库是有冲突的，例如和jQuery有冲突~，那换命名空间吧，下面就实现一个安装器来方便改变命名空间：
Function.prototype.method = function(name, fn) { // ... }; (function() { function _$(els) { // ... } _$.method(‘addEvent‘, function(type, fn) { // ... }) // ... window.installHelper = function(scope, interface) { scope[interface] = function() { return new _$(arguments); } }; })();
上面代码的主要思想就是先不给任何全局变量赋值，只有调用installHelper绑定相应的命名空间之后才能使用。
使用方法如下：
installHelper(window, ‘$‘); $(‘example‘).show();
这样就等于把函数赋值给了window.$了。
三：使用回调从支持链式调用的方法获取数据：
上面说的那些链式方法都是返回this的，如果方法本身要返回值了？那么和返回this不就冲突了吗？所以对于这种情况，我们要想出一种方法，那就是对于这种情况，我们传入一个回调函数，来调用返回来的数值，之后还是要返回this的~
例子：
window.API2 = window.API2 || {}; API2.prototype = function() { var name = ‘Hello world‘; // Privileged mutator method. setName: function(newName) { name = newName; return this; }, // Privileged accessor method. getName: function(callback) { callback.call(this, name); return this; } }();
上面代码只要看getName哪里就可以了，传入了一个回调函数，然后取出值来直接调用，之后还是返回this，就不破坏链式调用了。
上面代码的一个使用方法：
var o2 = new API2; o2.getName(console.log).setName(‘Meow‘).getName(console.log);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
