精通JavaScript--07设计模式：行为型

在本章，我们将继续学习设计模式，着重了解行为型设计模式。我们在第5章所学的创建型设计模式侧重于对象的创建，在第6章所学的结构型设计模式侧重于对象结构，而本章介绍的行为型设计模式则侧重于辅助实现代码库中的多个对象之间的通信。本章的要点是要使得我们更容易去从整体的角度理解代码是如何在一起运作的，而不是着重于单独的对象的创建与结构。让我们一起学习8种行为型设计模式。

7.1　　　职责链模式

当基于一个相同“类”的若干个类可以相应地处理某项请求或调用时，可以使用职责链(chain of responsibility)模式。该项请求首先会发送至一个对象，如果该对象不是能处理该请求的最合适对象，则会把该请求传递至另一个对象进行处理。这样，传递就会不断进行，直至达到可以处理该请求的对象。然后，通过此职责链各对象的操作处理所得的结果会返回给原来的请求或方法调用。职责链中的每个对象都认识其他一个对象。如果一个对象不能亲自处理到达的请求，就会由职责链中的下一继任的对象来处理。当多个对象在一起时能组合成某种类型的层级关系（如代码请求7-1所示），但我们又不希望向代码的其他部分暴露其中的实现过程，则此时使用职责链模式最为合适。

代码清单7-1　　职责链模式

            //定义一个对象，列出系统中日志记录的不同级别————普通消息、警告消息和错误消息。每一种级别相比于其上一种级别，所表示的请求更为严重
            var LogLevel = {
                    INFO: 'INFO',
                    WARN: 'WARN',
                    ERROR: 'ERROR'
                },
                log;
            //定义一个“类”，用于为不同日志级别的日志消息生成相应的格式化日志消息
            function LogFormatter(logLevel) {
                this.logLevel = logLevel;
            }
            LogFormatter.prototype = {
                //定义一个属性，用于保存此对象实例在职责链中的后继者
                nextInChain: null,
                //定义一个方法，用于设置此对象实例在职责链中的后继者
                setNextInChain: function(next) {
                    this.nextInChain = next;
                },
                //定义一个方法，基于当前的日志记录级别生成相应格式的日志消息
                createLogMessage: function(message, logLevel) {
                    var returnValue;

                    //如果当前对象实例被指派的日志记录级别与传入的参数相同，则格式化该日志信息
                    if(this.logLevel === logLevel) {
                        //根据日志记录级别来相应地格式化该日志消息
                        if(logLevel === logLevel.ERROR) {
                            returnValue = logLevel + ":" + message.toUpperCase();
                        } else if(logLevel === logLevel.WARN) {
                            returnValue = logLevel + ":" + message;
                        } else {
                            returnValue = message;
                        }
                        //如果当前对象实例所被指派的日志记录级别与传入的参数不相同，则把该消息传递至职责链的下一个对象实例
                    } else if(this.nextInChain) {
                        returnValue = this.nextInChain.createLogMessage(message, logLevel);
                    }
                    return returnValue;
                }
            };
            //定义一个单例，用于保存和输出系统的日志消息记录
            log = (function() {
                //定义一个存储数组以存放日志消息
                var logs = [],
                    //创建3个对象实例，分别表示3种级别的日志记录：普通消息、警告消息和错误消息
                    infoLogger = new LogFormatter(LogLevel.INFO),
                    warnLogger = new LogFormatter(LogLevel.WARN),
                    errorLogger = new LogFormatter(LogLevel.ERROR),
                    logger = errorLogger;
                //使用每个对象事例中的setNextInChain()方法来设置职责链的层级。我们假设“错误信息”最为重要，其位于职责链的首位
                //在日志级别层级中，“错误消息”的下一位是“警告消息”，因为它的重要性次之
                errorLogger.setNextInChain(warnLogger);
                //在日志级别层级中，“警告消息”的下一位时“普通消息”，因为它的重要性最为普通
                warnLogger.setNextInChain(infoLogger);
                return {
                    //定义一个方法，用于读取所保存的日志消息
                    getLogs: function() {
                        return logs.join("
");
                    },
                    //定义一个方法，用于根据消息的日志记录级别把消息进行相应的格式化
                    message: function(message, logLevel) {
                        //我们只需调用层级中的首位对象实例的createLogMessage()方法。如果该方法本身不能处理该特定日志级别，
                        //则会进一步按职责链依次调用相应的方法。该日志消息会向职责链进一步传递，直至日志消息到达了能够处理该日志级别的对象实例
                        var logMessage = logger.createLogMessage(message, logLevel);
                        //添加该经格式化的日志消息至存储数组
                        logs.push(logMessage);
                    }
                }
            }());

            //执行log单例的message()方法，传入一个消息以及日志级别。职责链中的首位对象处理的是“错误消息”级别的日志消息，
            //因此以下日志消息不会向职责链进一步下传，日志消息由errorLogger对象返回
            log.message("Something vary bad happened", LogLevel.ERROR);
            //因为errorLogger对象只能处理“错误消息”级别的日志消息，所以以下消息会通过职责链进过errorLogger对象传至warnLogger对象
            log.message("Something bad happened", LogLevel.WARN);
            //以下消息会经过errorLogger对象传至warnLogger对象，并继续传至infoLogger对象，该对象可以处理“普通消息”级别的日志消息
            log.message("Something happened", LogLevel.INFO);

            //输入所存储的日志记录
            console.log(log.getLogs());
            //输出结果
            /*
             *Something vary bad happened
             *Something bad happened
             *Something happened
             */

当需要访问一些有层级关系的对象，但又不想向代码的其余部分暴露此层级结构时，使用职责链模式最为合适。

7.2　　命令模式

 通过确保所有的调用都经过某个对象上的一个单独、公共的方法（通常命名为run()或execute()）发出，命令（command）模式可以为发出调用的代码与某个对象的特定方法之间提供一个抽象层。使用此模式可以更改底层代码和API，但不会影响那些发起调用的代码。

代码清单7-2展示了一个使用命令模式的简单例子，它向一个单独的execute()方法传入所要执行的方法的名称以及执行时所用的参数。

代码清单7-2　　命令模式

            var cookie=(function(){
                var allCookies=document.cookie.split(";"),
                    cookies={},
                    cookiesIndex=0,
                    cookiesLength=allCookies.length,
                    cookie;
                for (;cookiesIndex<cookiesLength;cookiesIndex++) {
                    cookie=allCookies[cookiesIndex].split("=");
                    cookies[unescape(cookie[0])]=unescape(cookie[1]);
                }
                return {
                    get:function(name){
                        return cookies[name]||"";    
                    },
                    set:function(name,value){
                        cookies[name]=value;
                        document.cookie=escape(name)+"="+escape(value);
                    },
                    remove:function(name){
                        //通过从表示cookie的对象中移除相应名称的cookie的值并设置其失效日期为以前的时间来移除该cookie
                        delete cookie[name];
                        document.cookie=escape(name)+"=;expires=Thu,01 Jan 1970 00:00:01 GMT;";
                    },
                    //提供一个execute()方法，用于对其他方法的调用进行抽象。这样，其他方法的名称就可以在日后于需要时进行变更，
                    //但又不影响代码其余部分使用该API(只要这个execute()继续存在)
                    execute:function(command,params){
                        //该command参数包含着所要执行的方法的名称，因此要检查该方法的存在以及它是否是函数
                        if(this.hasOwnProperty(command)&&typeof this[command]==="function"){
                            //如果该方法存在并且可被执行，则传入所提供的params来执行它
                            return this[command].apply(this,params);
                        }
                    }
                }
            }());
            //使用该execute()方法来非直接地调用cookie单例的set()方法，并提供参数，将其传入到set()方法中，
            //从而完成一个cookie的设置
            cookie.execute("set",["name","wing"]);
            
            //通过使用execute()执行get方法来检查该cookie是否已经正确设置
            alert(cookie.execute("get",["name"]));//wing

命令模式还可以使用在那些需要有undo（回撤）功能的应用程序的环境中，当中所执行的语句可能需要在将来某个时刻进行反操作，例如，在进行文字处理的网页应用程序的环境中。在这种情况下，命令会被传至一个执行命令的对象。

该对象根据此抽象概念（可回撤的操作）来保存相应的函数（第2个参数），反操作所传入的方法调用（第1个参数）。如代码清单7-3所示，当中展示了一个简单的命令执行对象以及一个结合代码清单7-2的代码来操作cookie的例子。

代码清单7-3　　执行命令的对象（利用它可以在网页应用程序中实现多次“回撤”操作）

            //创建一个单例，它可以执行其他方法并具有“回撤”这些方法的功能
            var command = (function() {
                //创建一个数组，用于一次存储“回撤”命令。这样的数组通常也成为做stack（栈）（后进先出）
                var undoStack = [];
                return {
                    //定义一个方法，来执行所提供的第1个函数参数，保存第2个函数参数，以便以后对第1个函数的操作执行“回撤”操作
                    execute: function(command, undoCommand) {
                        if(command && typeof command === "function") {
                            //如果第1个参数是函数，则执行该函数，并把第2个参数加入栈中，以备以后对该命令实施反操作
                            command();
                            undoStack.push(undoCommand);
                        }
                    },
                    //定义一个方法，利用存储“回撤”命令的栈来对最后一个执行的命令进行反操作
                    undo: function() {
                        //从栈中移除并保存所执行的最后一个命令，即最近一次加入栈的那个命令。以下操作将从栈中移除该命令，使数组的项数减少
                        var undoCommand = undoStack.pop();
                        if(undoCommand && typeof undoCommand === "function") {
                            //检查该命令是否为一个有效的函数。若是，则执行它，执行的效果实际上就是“回撤”最近一次所执行的命令
                            undoCommand();
                        }
                    }
                }
            }());

            //把每一项的可被“回撤”的操作包装在对command.execute()方法的调用中，马上执行的命令作为第1个参数传入，
            //对该命令进行反操作所执行的函数作为第2个参数传入。第2个参数将会被保存起来，直至需要使用它的时刻
            command.execute(function() {
                //使用代码清单7-2中的代码来设置一个cookie，它将会马上执行
                cookie.execute("set", ["name", "wing"]);
            }, function() {
                //设置cookie这个动作的反操作作为移除该cookie。此反操作将被保存起来，以供以后使用。
                //如果调用command.undo()方法，则会进行反操作
                cookie.execute("remove", ["name"]);
            });

            //执行第2个可被“回撤”的操作，设置第2个cookie
            command.execute(function() {
                cookie.execute("set", ["company", "baidu"]);
            }, function() {
                cookie.execute("remove", ["company"]);
            });
            
            //检查两个cookie的值
            alert(cookie.get("name")); //wing
            alert(cookie.get("company")); //baidu

            //把上一次的操作进行反操作，即移除名为company的cookie            
            command.undo();
    
            //检查两个cookie的值
            alert(cookie.get("name")); //"wing"
            alert(cookie.get("company")); //""(一个空字符串) 因为现在该cookie已经被移除了
            //对第一次的操作进行反操作，即移除名为name的cookie
            command.undo();
            alert(cookie.get("name")); //""
            alert(cookie.get("company")); //""

 当需要从代码的其余部分抽象出特定方法的名称时，使用命令模式最为合适。通过方法的名称（以字符串保存）来引用方法，可以在任意时刻更改底层的代码而不影响代码的其余部分。

7.3　　迭代器模式

顾名思义，迭代器（iterator）模式可以使应用程序中的代码对一个数据集合进行迭代或循环访问，但又不必清楚该数据在内部是如何保持或构建的。通常，迭代器会提供一组标准方法，用于移动至该集合中的下一个数据项，还用于检查当前数据项是否位于集合中的第一项或最后一项。

代码清单7-4展示的是一个可以迭代数组类型和对象类型数据的一般性“类”的一个例子。通过所提供的rewind()、current()、next()、hasNext()和first()方法，可以实现用手动方式对此迭代器的实例进行操作和查询。还可以使用它的each()方法来实现迭代器的自动迭代访问。each()方法的参数是一个回调函数。对于数组集中的每一项数据，该回调函数都会相应执行一次，从而提供一种十分有用的与for循环等价的访问形式。

 代码清单7-4　　迭代器模式

            //定义一个一般性“类”，用于迭代/循环数组或有对象特征（object-like）的数据结构
            function Iterator(data) {
                var key;
                //在data属性中保存所提供的数据
                this.data = data || {};
                this.index = 0;
                this.keys = [];
                //使用一个指示符来表示所提供的数据究竟是数组还是对象
                this.isArray = Object.prototype.toString.call(data) === "[object Array]";
                if(this.isArray) {
                    //如果所提供的数据是数组，则保存其length，以供快速访问
                    this.length = data.length;
                } else {
                    //如果所提供的是对象数据，则把每一项属性的名称保存至数组中
                    for(key in data) {
                        if(data.hasOwnProperty(key)) {
                            this.keys.push(key);
                        }
                    }
                    //该用于保存属性名称的数据组的项数就是对数据进行迭代的数据项数
                    this.length = this.keys.length;
                }
            }
            //定义一个方法，用于重置序号，实际上就是把迭代器重置回数据的起始位置
            Iterator.prototype.rewind = function() {
                this.index = 0;
            };
            //定义一个方法，用于返回迭代器当前序号位置保存的值
            Iterator.prototype.current = function() {
                return this.isArray ? this.data[this.index] : this.data[this.keys[this.index]];
            };
            //定义一个方法，用于返回迭代器当前序号位置所保存的值，并将序号增加，指向数据的下一数据项
            Iterator.prototype.next = function() {
                var value = this.current();
                this.index = this.index + 1;
                return value;
            }
            //定义一个方法，用于指出当前位置是否为数据的末位位置
            Iterator.prototype.hasNext = function() {
                return this.index < this.length;
            }
            //定义一个方法，用于重置迭代器至数据的起始位置,并返回数据的第一个数据项
            Iterator.prototype.first = function() {
                this.rewind();
                return this.current();
            };
            //定义一个方法，用于迭代（或循环）访问每一项数据。每一轮的迭代都会执行回调函数，并把当前数据项作为第1个参数传入该回调函数
            Iterator.prototype.each = function(callback) {
                callback = typeof callback === "function" ? callback : function() {};

                //使用for循环进行迭代，从数据的起始位置开始（通过rewind()方法实现），一直循环，直至再也没有数据供迭代（有hasNext()方法指出）
                for(this.rewind(); this.hasNext();) {

                    //在整个循环过程的每一轮都会执行该回调函数。使用next()方法，把当前数据项的值传入并使循环递增入下一轮
                    callback(this.next());
                }
            }

可以如代码清单7-5所示般来使用代码清单7-4中的代码。这里演示了使用该一般性“类”对所保存的数据进行的不同方式的迭代和循环访问。

代码清单7-5 使用迭代器模式

            //定义一个对象和一个数组，我们将对它们进行迭代访问
            var user = {
                    name: "wing",
                    occupation: "Head of web Development",
                    company: "alibaba"
                },
                daysOfWeek = ["Monday", "Tuesday", "wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
                //使用这2种不同类型的数据来创建该Iterator“类”的2个实例
                userIterator=new Iterator(user),
                daysOfWeekIterator=new Iterator(daysOfWeek),
                //创建3个数组来保存迭代所得的输出数据，以便稍后进行显示
                output1=[],
                output2=[],
                output3=[];
            //userIterator已准备就绪可供使用,那么我们就使用for循环来迭代所保存的数据。注意，我们并不需要为for
            //循环提供第1参数，因为迭代器已经处于重置状态并初始化在数据的起始位置。我们也不需要为for循环提供
            //第2参数，因为在循环体之外对next()方法的调用为我们实施了对序号位置的增加
            for (; userIterator.hasNext();) {
                output1.push(userIterator.next());
            }
            //因为我们迭代的是一个对象，所以所产生的数据是由该对象的每一项属性中所保存的值组成的
            alert(output1.join(", "));//wing, Head of web Development, alibaba
            //在再次对同一数据进行迭代之前，迭代器的序号必须倒回至起始位置
            userIterator.rewind();
            //使用while循环来迭代该对象的各项属性，循环会一直进行，直至没有更多的数据供迭代器迭代
            while(userIterator.hasNext()){
                output2.push(userIterator.next());
            }
            alert(output2.join(", "));//wing, Head of web Development, alibaba
            //使用迭代器的内建each()方法来对数组数据进行迭代。使用这种方法并不需要手动操作序号的位置，只需简单地传入一个回调函数即可
            daysOfWeekIterator.each(function(item){
                output3.push(item);
            });
            alert(output3.join(", "));//Monday, Tuesday, wednesday, Thursday, Friday, Saturday, Sunday

当需要为代码的其余部分提供一种标准的方法来对复杂数据结构进行迭代循环访问，但又不暴露该数据最终是如何保存或表示的时,使用迭代器模式最为合适.

7.4　　观察者模式

观察者(observer)模式所使用的场合是，由多个独立代码模块所组成的较大型代码库，各个模块之间需要相互依赖或相互通信。对于这样的一个代码库，从一个模块对另一个模块的硬编码引用就被称为紧解耦，它需要明确系统中的其他每个模块才能使整体代码正确地运行在一起。然而，理想情况是，在大型代码库中的模块应该是松解耦的。引用不能是显式地指向其他模块。相反，要在整个代码库进行全系统性的事件发布与监听，就好比一个自定义版本的标准DOM事件处理。

作为例子，如果一个模块负责处理所有的通过Ajax进行的客户端至服务器的通信，而另一个模块负责渲染和检验表单然后传送至服务器，那么在由用户成功地进行提交并通过验证后，代码库就可以发出一个全局的“表单已提交”事件并传送从表单提交的数据，而通信模块会一直监听此事件。这样，通信模块将会实施它的任务，即把相关数据发送至服务器，并接收服务器的响应数据，然后由通信模块发出“响应已接收”事件，而表单模块则会一直监听此事件。当接收到该事件时，表单模块就会渲染一个消息，指出该表单已经成功提交。这一切都不需要两个模块互相知道对方。每个模块唯一所要清楚的只是一个全局配置的事件名称。该系统中所有的模块都可以发出或响应这些事件。

实现了观察者模式的系统必须具备3个全局方法以供系统代码库使用：publish()，按名称发布一个事件，可传入任意个参数；subscribe()，使某个模块可以指派一个函数，当特定的某名称的事件发生时，执行该函数：unsubscribe()，反指派函数，当相应名称的事件发生时，该函数就不会再被执行。代码清单7-6中的代码演示了一个简单对象，可以在你的应用程序中全局性地使用该对象，以实现观察者模式中的这些方法。

代码清单7-6　　观察者模式

            //定义一个包含全局方法publish()、subscribe()和unsubscribe()的对象，用于实现观察者模式
            var observer = (function() {
                //定义一个对象，用于按事件名称保存所注册的事件以及和该事件相关联的各个回调函数，以便在全代码库中的任意部分（按名称订阅了这些事件的）使用这些函数
                var events = {};
                return {
                    //定义subscribe()方法，用于保存一个函数以及和该函数相关联的事件名称。稍后某个时刻，当此名称对应的特定事件发出时，调用该函数
                    subscribe: function(eventName, callback) {
                        //如果所提供的名称（第1个参数）对应的事件还有没有被订阅，则在events对象中添加一个属性。
                        //该属性的数据类型为数组，该属性的名称为该事件的名称。以此属性来保存在稍后该名称的事件发出时所要调用的函数
                        if(!events.hasOwnProperty(eventName)) {
                            events[eventName] = [];
                        }
                        //把所提供的回调函数添加至该关联着特定事件名称的数组中
                        events[eventName].push(callback);
                    },
                    //定义unsubscribe()方法，用于从函数数组（当所提供的名称对应的事件发出时会执行该数组中的函数）中移除一个给定的函数
                    unsubscribe: function(eventName, callback) {
                        var index = 0,
                            length = 0;
                        if(events.hasOwnProperty(eventName)) {
                            length = events[eventName].length;
                            //根据给定的事件名称，循环遍历其对应的数组中所保存的各个函数，并从该数组中移除与所提供的函数（第2个参数）相匹配的函数
                            for(; index < length; index++) {
                                if(events[eventName][index] === callback) {
                                    events[eventName].splice(index, 1);
                                    break;
                                }
                            }
                        }
                    },
                    //定义publish()方法，用于依次执行所有与给定的事件名称相关联的所有函数。传给这些函数的参数都是相同的任意项数据，
                    //此数据是作为publish()的参数传入的
                    publish: function(eventName) {
                        //除了第1个参数，把调用publish函数时传入的所有参数保存为一个数组
                        var data = Array.prototype.slice.call(arguments, 1),
                            index = 0,
                            length = 0;
                        if(events.hasOwnProperty(eventName)) {
                            length = events[eventName].length;
                            //根据给定的事件名称，循环遍历其对应的数组中所保存的各个函数，并依次执行这些函数，传入所有提供的参数作为这些函数的参数
                            for(; index < length; index++) {
                                events[eventName][index].apply(this, data);
                            }
                        }
                    }
                };
            }());

代码清单7-7中的代码演示了如何使用代码清单7-6中给出的观察者模式的publish()、subscribe()和unsubscribe()方法。假设这是运行在HTML页面的环境中，页面中含有<form id="my-form">标签,表单拥有有效的action标签特性（指表单可以成功提交给服务器的某个文件），表单中含有若干<input type="text">标签，标示各项表单域。

代码清单7-7 使用观察者模式

            //定义一个模块，用于Ajax通信。此模块的依赖是代码清单7-6的观察者对象
            (function(observer) {
                //定义一个函数，用于进行Ajax POST,所执行的POST基于所提供的URL，form-encoded(表单编码，HTTP/1.1协议中最常见的POST提交数据的方式)的数据字符串,
                //以及一个回调函数，一旦从服务器成功接收到响应数据就执行回调函数
                function ajaxPost(url, data, callback) {
                    var xhr = new XMLHttpRequest(),
                        STATE_LOADED = 4,
                        STATUS_OK = 200;
                    xhr.onreadystatechange = function() {
                        if(xhr.readyState !== STATE_LOADED) {
                            return;
                        }
                        if(xhr.status === STATUS_OK) {
                            //一旦从服务器成功接收到响应数据就执行所提供的回调函数
                            callback(xhr.responseText);
                        }
                    };
                    xhr.open("POST", url);
                    //通知服务器，我们将发送表单编码的数据，这其中的名称和值通过等号（=）进行分隔,
                    //而每个“名称/值”对通过符号(&)进行分隔
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    //向服务器POST数据
                    xhr.send(data);
                }
                //订阅全局的，自定义的form-submit事件。当该事件由代码库中的其他模块发出时，使用所提供的URL和数据来发出一个Ajax POST请求。完成后，发出ajax-response事件，
                //并把所提供的URL和数据来发出一个Ajax POST请求。完成后，发出ajax-response事件，并把此次Ajax调用从服务器所得的响应数据传入
                observer.subscribe("form-submit", function(url, formData) {
                    ajaxPost(url,formData ,function(response) {
                        //发出全局事件ajax-response,把Ajax POST期间从服务器所得到的返回数据传入
                        observer.publish("ajax-response", response);
                    });
                });
            }(observer));

            //定义一个模块，用于处理页面中的一个简单表单的提交事宜，此表单含有若干文本表单域，表单的ID是my-form
            //本代码清单中的两个模块都没有列出对对方的引用，它们只是引用观察者对象。观察者对象负责处理系统中模块之间的所有联系事宜。
            //每个模块可被称为loosely-coupled（松解耦）,因为它们并没有对任何其他模块的硬编码依赖
            (function(observer) {
                //获取对当前HTML页面中ID为my-form的表单的引用
                var form = document.getElementById("my-form"),
                    //从该表单中获取action标签特性的值，这将是我们实施Ajax POST指向的URL
                    action = form.action,
                    data = [],
                    //获取对表单中的所有<input>表单域的引用
                    fields = form.getElementsByTagName("input"),
                    index = 0,
                    length = fields.length,
                    field,
                    //创建一个HTML <p>标签,用作在表单的提交发生之后所显示的感谢信息
                    thankYouMessage = document.createElement("p");
                //定义一个函数，在表单提交时执行此函数。此函数使用观察者模式来通过Ajax的方式提交表单域的数据
                function onFormSubmit(e) {
                    //阻止提交事件的默认行为，这意味着常规的页面内HTML表单提交将不会发生
                    e.preventDefault();

                    //循环遍历表单中的所有<input>标签，把表单中所输入的数据转化成一个由各“名称/值”对所组成的数组
                    for(; index < length; index++) {
                        field = fields[index];
                        data.push(escape(field.name) + "=" + escape(field.value));
                    }
                    //用观察者对象发出全局事件form-submit，把Ajax POST指向的URL和所要发送的表单数据传入。
                    //Ajax通信模块正在监听这一事件，并将处理所有与数据提交至服务器相关的事宜
                    observer.publish("form-submit", action, data.join("&"));
                }
                //把onFormSubmit()函数关联至表单的submit事件
                form.addEventListener("submit", onFormSubmit, false);
                //订阅全局的、自定义的ajax-response事件，并使用随同该事件传来的服务器响应数据来填充感谢消息，以显示在在页面中的表单旁边
                observer.subscribe("ajax-response", function(response) {
                    thankYouMessage.innerHTML = "Thank you for your form submission.<br>The server responded with:" + response;
                    form.parentNode.appendChild(thankYouMessage);
                });
            }(observer));

利用观察者模式可以移除代码中各模块之间的硬编码引用，以支持实现一个易于维护的自定义的、全系统的事件列表。随着代码库的增长和模块数量的增加，要考虑使用该模式来对代码进行简化，以及实现各模块之间的解耦。请注意，如果某一个模块出现了错误，某个事件没有理多当然地发出，则该错误的根源可能不会立即明显地出现，需要额外的调试。我推荐在开发期间向观察者对象里增加调试日志记录功能，以便更容易地追踪代码中的各种事件。

当希望实现各模块之间的松耦合以减少spaghetti code(意大利面式代码)时，则使用观察者模式最为合适。

7.5　　中介者模式

中介者（mediator）模式是观察者模式的一种变体，但二者有个重要差别。观察者模式定义了一个全局性对象用以在整个系统中进行事件的发布与订阅，而中介者模式则定义了一些局部的对象用于实现某些特定的目标，每个对象都具有相同的publish()、subscribe()和unsubscribe()方法。事实证明，随着代码库的不断增大，使用观察者模式会产生出大量难以控制的需要加以管理的事件。因此，可以使用中介者模式来把者较大的事件列表分解划分为较小的多个组别。观察者模式是通过一个全局性的单例对象来实现的，而中介者模式则通过使用一个“类”来实现，因此可以根据需要创建出多个对象实例来支持实现代码的各项功能。代码清单7-8展示了一个可以在代码中实现中介者模式的“类”。注意其与 代码清单7-6中为实现观察者模式所创建的对象之间的相似之处。

            //定义一个包含着publish()、subscribe()和unsubscribe()方法的“类”，来实现中介者模式。注意其与观察者模式的相似之处。
            //它们唯一的区别是，这里是创建一个“类”以供以后创建对象实例使用，同时还会为每个对象实例初始化一个用于存储事件的数组，以避免所有实例共享内存中的同一数组
            function Mediator() {
                this.events = {};
            }
            Mediator.prototype.subscribe = function(eventName, callback) {
                if(!this.events.hasOwnProperty(eventName)) {
                    this.events[eventName] = [];
                }
                this.events[eventName].push(callback);
            };
            Mediator.prototype.unsubscribe = function(eventName, callback) {
                var index = 0,
                    length = 0;
                if(this.events.hasOwnProperty(eventName)) {
                    length = this.events[eventName].length;
                    for(; index < length; index++) {
                        if(this.events[eventName][index] === callback) {
                            this.events[eventName].splice(index, 1);
                            break;
                        }
                    }
                }
            };
            Mediator.prototype.publish = function(eventName) {
                var data = Array.prototype.slice.call(arguments, 1),
                    index = 0,
                    length = 0;
                if(this.events.hasOwnProperty(eventName)) {
                    length = this.events[eventName].length;
                    for(; index < length; index++) {
                        this.events[eventName][index].apply(this, data);
                    }
                }
            };

代码清单7-8中的中介者面膜是可以如代码清单7-9所示般进行使用。当中创建了2个中介者对象来表示代码的特定功能，并允许在代码库中实现模块化。假设运行环境为包含有一个<form id="my-form">标签的HTML页面，其中含有若干<input type="text">标签，表示各个表单域。

代码清单7-9 使用中介者模式

            //为我们的代码库定义2个中介者，一个是编写来辅助实现关于表单的功能的，而另一个是辅助实现日志消息的记录功能的
            //formsMediator将具备2个事件form-submit和ajax-response,而loggingMediator将具备3个事件log，retrieve和log-retrieved
            //请注意我们是如何应用中介者模式为不同的功能来划分各个事件的
            var formsMediator=new Mediator(),
                loggingMediator=new Mediator();
            //定义一个模块，用于Ajax通信。当formsMediator发出form-submit事件时，此模块会把所提供的数据POST至服务器
            (function(formsMediator){
                function ajaxPost(url,data,callback){
                    var xhr=new XMLHttpRequest(),
                        STATE_LOADED=4,
                        STATUS_OK=200;
                    xhr.onreadystatechange=function(){
                        if(xhr.readyState!==STATE_LOADED){
                            return;
                        }
                        if(xhr.status===STATUS_OK){
                            callback(xhr.responseText);
                        }
                    };
                    xhr.open("POST",url);
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    xhr.send(data);
                }
                formsMediator.subscribe("form-submit",function(url,formData){
                    ajaxPost(url,formData,function(response){
                        formsMediator.publish("ajax-reponse",response);
                    })
                })
            }(formsMediator));
            
            //定义一个模块，用于处理当前页面的一个简单表单的提交事宜。此表单只包含有若干文本表单域，
            //表单ID为my-form。当表单提交时，会在formsMediator中发出form-submit事件
            (function(formsMediator){
                var form=document.getElementById("my-form"),
                    action=form.action,
                    data=[],
                    fields=form.getElementsByTagName("input"),
                    index=0,
                    length=fields.length,
                    field,
                    thankYouMessage=document.createElement("p");
                function onFormSubmit(e){
                    e.preventDefault();
                    for (; index < length; index++) {
                        field=fields[index];
                        data.push(escape(field.name)+"="+escape(field.value));
                    }
                    formsMediator.publish("form-submit",action,data.join("&"));
                }
                form.addEventListener("submit",onFormSubmit,false);
                formsMediator.subscribe("ajax-response",function(response){
                    thankYouMessage.innerHTML="Thank you for your form submission.<br>The server responded with:"+response;
                    form.parentNode.appendChild(thankYouMessage);
                });                
            }(formsMediator));
            
            //定义一个模块，用于记录该系统中的消息，以帮助调试可能出现的问题，使用loggingMediator来分离出代码库的日志记录功能———与处理表单提交事宜的formsMediator相分离
            (function(loggingMediator){
                //创建一个数组，用于存储日志记录
                var logs=[];
                //当loggingMediator发出log事件时，向logs数组添加一个对象数组项。该对象包含着所提供的消息以及接收到该消息的日期/时间
                loggingMediator.subscribe("log",function(message){
                    logs.push({
                        message:message,
                        date:new Date()
                    });
                });
                //当loggingMediator发出retrieve-log事件时，这里就发出log-retrieve事件，
                //并传入当前所保存的logs数组
                loggingMediator.subscribe("retrieve-log",function(){
                    loggingMediator.publish("log-retrieve",logs);
                });
            }(loggingMediator));
            
            //定义一个模块，使得在loggingMediator中所保存的日志记录在屏幕中显示出来
            (function(loggingMediator){
                //创建一个按钮，单击该按钮时将显示出当前所记录的日志
                var button =document.createElement("button");
                button.innerHTML="Show logs";
                button.addEventListener("click",function(){
                    //用loggingMediator发出retrieve-log事件。这会触发log-retrieve事件。loggingMediator在发出log-retrieve事件时会传入当前所记录的日志
                    loggingMediator.publish("retrieve-log");
                },false);
                //当log-retrieve事件出现时，在屏幕上显示日志记录
                loggingMediator.subscribe("log-retrieved",function(logs){
                    var index=0,
                        length=logs.length,
                        ulTag=document.createElement("ul"),
                        liTag=document.createElement("li"),
                        listItem;
                    //循环遍历日志数组中的每条记录，把所保存的日期时间和消息渲染至一个<li>标签中
                    for(;index<length;index++){
                        listItem=liTag.cloneNode(false);
                        listItem.innerHTML=logs[index].date.toUTCString()+":"+logs[index].message;
                        ulTag.appendChild(listItem);
                    }
                    //在页面下方添加该包含着所有<li>标签的表示当前所记录的日志数据的<ul>标签
                    document.body.appendChild(ulTag);
                });
                //把该按钮添加至当前页面底部
                document.body.appendChild(button);
            }(loggingMediator));
            
            //定义一个模块，用于记录formsMediator中发生的事件。这是本例中唯一一个使用频率超过一个中介者的模块
            (function(formsMediator,loggingMediator){
                //使用loggingMediator的log事件来记录当form-submit事件在formsMediator中发出时表单所提交的URL
                formsMediator.subscribe("form-submit",function(url){
                    loggingMediator.publish("log","Form submitted to"+url);
                });
                //当ajax-response事件在formsMediator中发生时，记录参数中所提供的从服务器返回的响应数据
                formsMediator.subscribe("ajax-response",function(response){
                    loggingMediator.publish("log","The server responded to an Ajax call with:"+response);
                });
                
            }(formsMediator,loggingMediator));

随着代码库的增长，你可能会发现从观察者模式转为中介者模式，把系统中的各个事件分组成为更具可维护性的多种功能是很值得做的。

当希望在一个非常大型的代码库中实现各模块之间的松解耦，而若使用观察者模式会使得各种事件的处理变得繁多且难以管理时，使用中介者模式最为合适。

7.6　　备忘录模式

备忘录（memento）模式以静态形式在内存中定义对象数据的存储，这样，在代码执行过程的后期就可以对对象数据进行恢复。代码清单7-10展示的是一个简单的“类”，它通过以JSON格式的字符串表示形式来保存对象的快照，并提供方法对原来的JavaScript对象进行保存和恢复，从而实现备忘录模式。

代码清单7-10　　备忘录模式

            //定义一个简单的“类”，用于实现备忘录模式。使用它可以实现保存和恢复内存中的对象快照的功能
            //某些老式浏览器（例如Internet Explorer7）本身并不支持JSON.stringify()和JSON.parse()。
            //对于这些浏览器，我们可以引用Douglas Crockford的库，网址为https://github.com/douglascrockford/JSON-js
            function Memento() {
                //在内存中定义一个对象直接量，以特定的键（属性）存储其他对象的快照
                this.storage = {};
            }

            //定义一个方式，用于把某对象的状态保存在storage对象直接量的特定键之下
            Memento.prototype.saveState = function(key, obj) {
                //把所提供的对象转换成JSON格式的字符串表示形式
                this.storage[key] = JSON.stringify(obj);
            };

            //定义一个方法，用于恢复并返回某特定键之下所保存的对象状态
            Memento.prototype.restoreState = function(key) {
                var output = {};

                //如果所提供的键存在，则找出当中所保存的对象
                if(this.storage.hasOwnProperty(key)) {
                    output = this.storage[key];

                    //把所保存的值从JSON字符串转换为正规的对象格式
                    output = JSON.parse(output);
                }
                return output;
            };

代码清单7-11演示的是使用了代码清单7-10中的Memento类的一个应用程序。

代码清单7-11 使用备忘录模式

            //定义一个Memento的实例，用于对目标对象的状态进行保存及恢复
            var memento = new Memento(),
                //定义一个对象，我们希望可以对它的状态进行保存及恢复
                user = {
                    name: "wing",
                    age: 70
                };
            //使用memento来保存user对象的当前状态
            memento.saveState("user",user);
            
            //直接从memento中的storage对象读取值，证明user对象的状态已使用JSON格式保存
            console.log(memento.storage["user"]);//{"name":"wing","age":70}
            
            //现在来随便改动user对象的值
            user.name="zhangwei";
            user.age=21;
            
            //输出user对象的当前状态
            console.log(JSON.stringify(user));//{"name":"zhangwei","age":21}
            
            //当想要恢复user对象上一次所保存的状态时，只需要简单地调用memento的restoreSate()方法即可
            user=memento.restoreState("user");
            
            //输出已被恢复至上一次所保存状态的user对象的新值
            console.log(JSON.stringify(user));//{"name":"wing","age":70}

当需要在应用程序执行的特定时刻把其中的对象进行保存和恢复时，使用备忘录模式最为合适。

7.7　　承诺模式

当处理异步函数时，通常我们会向异步函数传入回调函数。当异步函数完成了它的工作时，将会执行该回调函数来实现我们的某些操作。这会如我们所愿地执行，但唯一的问题是，这种做发法所产生的代码会变得难以阅读并且晦涩模糊。要知道，这个调用的函数是一个异步函数，传给它的函数用作了它的回调函数。如果想要等待若干异步函数运行完生成结果后再执行回调函数，会令所编写的代码愈发模糊，难以进行后续维护。现在向大家隆重介绍承诺（promiss）模式。此设计模式创建于20世纪70年代，后由CommonJs团队（http://wiki.commonjs.org/wiki/CommonJS）进行了改进，以应用于JavaScript。它定义了一种方式，实现了从一个异步函数的调用返回一个promise对象。此promise对象可以链式连接至对另一个函数的调用，该函数只有在此promise对象完成时才会执行，而此promise对象的完成要依赖于其对相应的异步函数执行的完成。这种做法有利于回调函数与异步函数调用的充分分离，可以改善代码的清晰程度，使得代码更具可读性，并因而更易于理解和维护。

promise对象在JavaScript中表现为一个包含着then()方法的对象实例。一旦处于执行中的异步函数完成执行，就会执行then()方法。我们来看一个简单的Ajax调用，它以一个回调函数作为其第2个参数，执行如下：

            ajaxGet("/my-url", function(response) {
                
                //对response进行相关处理
                
            });

使用承诺模式，对相同的Ajax调用所用的JavaScript代码看起来将会如下：

            ajaxGet("/my-url").then(function(response) {
                
                //对response进行相关处理
                
            });

你可能会认为这两者其实没有什么很大的不同。事实上后者更为清晰。它很明确地告诉我们，第2个函数将在第1个函数执行完毕后执行，然后在前者中只是隐晦地表达出了该意思。当处于存在多个异步调用的情况时，使用承诺模式就会显得比使用普通回调函数的相同代码更为清晰。如，我们来考虑以下代码，它首先向一个URL发出Ajax调用，然后再向另一个不同的URL发出第2个Ajax调用:

            ajaxGet("/my-url", function() {
                ajaxGet("/my-other-url", function() {
                    //进行相关处理
                });
            });

如果使用承诺模式，此代码将会精简得更为易于理解，并可避免多层的代码嵌套。链中的异步调用越多，承诺模式的优点就越明显。

            ajaxGet("/my-url").then(ajaxGet("my-other-url")).then(function(){
                
                //进行相关处理
                
            });

在标准JavaScript中，当需要在多个同时发出的异步调用之后在执行某个单独的回调函数时，事情就会变得愈发复杂。而使用承诺模式，则需要简单地传入一个promises数组给all()方法，它就会同时执行数组中每项promises。当数组中的每一个方法都满足其各自对应promises时（所有项都成功完成之后），则返回一个单独的状态为fulfilled（成功满足）的promise,如下所示:

                Promise.all([ajaxGet("/my-url"),ajaxGet("/my-other-url")]).then(function(){
                    
                    //对从这两个调用所返回的数据实施某些操作
                    
                });

JavaScript中的表示promises的“类”如代码清单7-12所示。

代码清单7-12　　承诺模式

            //定义代表promise的“类”，使得我们可以写出可读性高，易于理解的代码，来支持实现执行异步方法以及它们的回调函数。
            //由此“类”创建的实例遵循Promises/A+规范（此规范的详细介绍请参见https://promisesaplus.com），
            //并且能够通过所有的官方单元测试（https://github.com/promises-aplus/promises-tests，能通过测试便证明了其能够遵循该规范）
            var Promise = (function() {
                //定义promise对象可以拥有的3种可能状态：pending————默认值，“等待”，表示该promise尚未完成处理；
                //fulfilled——“成功完成”，表示该promise已成功完成处理：rejected——“失败”，表示该promise处理失败并处理了错误
                var state = {
                    PENDING: "pending",
                    FULFILLED: "fulfilled",
                    REJECTED: "rejected"
                };
                //定义表示promise的“类”。如果在初始化时传入一个异步函数，则此异步函数将立即执行
                function Promise(asyncFunction) {
                    var that = this;
                    //定义一个属性来表示该promise对象的当前状态，默认为pending
                    this.state = state.PENDING;

                    //定义一个属性，用于保存该异步方式执行完成时所要调用的各个回调函数（callback数组中存放的数组项时各个callback对象，callback对象包含一个promise对象，它可以含有fulfill方法和（或）reject方法）的清单
                    this.callbacks = [];

                    //定义一个属性，用于保存由该promise对象所表示的异步方法时所返回的值
                    this.value = null;

                    //定义一个属性，用于保存执行该异步方法时所产生的任何错误的详细信息
                    this.error = null;

                    //定义2个函数，它们将会传入由此promise表示的异步函数。如果该异步函数成功执行，则执行第1个函数；
                    //如果该异步函数不能成功执行，则执行第2个函数
                    function success(value) {
                        //执行测promise对象的resolve()方法，它会确保党此promise对象的异步函数成功执行时，与此
                        //promise对象相连的任何所要执行的函数（通常是then()中的回调函数）都能被执行
                        that.resolve(value);
                    }

                    function failure(reason) {

                        //执行此promise对象的resolve()方法，它将执行所有相连的回调函数，用于显示错误信息或对错误进行处理。
                        //与此promise对象按链式相连的所有更深层promise对象将不会执行
                        that.reject(reason);
                    }
                    //如果此promise对象在初始化时被传入一个异步函数，则此异步函数会立即执行，上面所定义的success()和failure()函数会作为参数传入。
                    //该异步函数必须根据其所尝试执行的行为的运行结果情况来确保这两个函数中最合适的那个得到执行
                    if(typeof asyncFunction === "function") {
                        asyncFunction(success, failure);
                    }
                }
                //定义then()方法。这是Promise/A+规范的关键。它实现了基于异步函数是否成功地完成其执行任务来使callback函数关联至该异步函数的运作结果。
                //它使得多个promise可以在彼此之间实现链式连接。在当前的一个promise成功地完成之后，将执行下一个，从而实现了更进一步的异步函数的执行
                Promise.prototype.then = function(onFulfilled, onRejected) {
                    //创建一个新的promise对象（在本方法的最后会返回此promise），以通过then()实现链式调用
                    var promise = new Promise(),
                        //定义一个callback对象，将其保存在promise对象中，并把新的promise实例关联其上，作为任何callback对象方法的上下文
                        //(可以把callback对象理解为此promise完成其异步函数的执行后所要执行的回调函数，回调函数可保存在callback对象的fulfill()和（或）reject()方法中).
                        callback = {
                            promise: promise
                        };
                    //如果提供了一个函数，它在该异步函数成功地完成时执行，则保存咋这个函数callback对象中，
                    //callback对象还有那个心创建的promise对象作为这个函数的运行上下文（此时，该callback对象里有一个promise属性（promise属性的值是一个promise对象），callback对象里有一个fulfill方法）
                    if(typeof onFulfilled === "function") {
                        callback.fulfill = onFulfilled;
                    }

                    //如果提供了一个函数，它在该异步函数不能成功地完成时执行，则保存咋这个函数callback对象中，
                    //callback对象还有那个心创建的promise对象作为这个函数的运行上下文（此时，该callback对象里有一个promise属性（promise属性的值是一个promise对象），callback对象里有一个reject方法）
                    if(typeof onRejected === "function") {
                        callback.reject = onRejected;
                    }
                    //把该callback对象添加至callbacks数组
                    this.callbacks.push(callback);

                    //尝试执行callbacks数组所保存的各个callback对象。其异步函数已经完成执行后才进行此操作（执行callbacks数组中的callback对象所代表的回调函数）。
                    //如果异步函数没有执行完成。则当该“类”的其他代码调用executeCallback()时，才执行executeCallbacsk(),来调用callbacks对象中的回调函数
                    this.executeCallbacks();

                    //返回该新创建的promise对象，使得可以通过重复调用then()方法来实现链式链接其他个异步函数
                    return promise;
                };
                //定义一个方法，用于在此promise对象所对应的异步函数的执行已经完成时，执行此promise相关的所有callback对象
                Promise.prototype.executeCallbacks = function() {
                    var that = this,
                        value,
                        callback;
                    //定义2个函数，如果此promise的callbacks数组中所保存的callback对象尚未保存相等同的fulfill()和reject()方法，则默认使用这2个函数
                    function fulfill(value) {
                        return value;
                    }

                    function reject(reason) {
                        throw reason;
                    }
                    //只有在该promise不处于未完成状态（即其对应的异步函数尚未完成执行）时，才执行callbacks数组中的各个callback对象
                    if(this.state !== state.PENDING) {
                        //Promises/A+规范的2.2.4节指出，promise对象的回调函数应当异步执行（promise对象的回调函数对应其callbacks数组的callback对象的fulfill()和（或）reject()方法）,
                        //而脱离出所有的对then()的可能会发生的调用的这个流程。这样就确保了整个由promise组成的链准备就绪后，对回调函数的调用才发生。
                        //使用Oms的setTimeout可以给JavaScript引擎一个很短的时间来完成对整个promise链的处理，然后才是任何回调函数的运行。对于setTimeout的调用，
                        //各种浏览器都会有一个最小延时可能值（4ms或16ms）。因此，在实际运行中，promise对象的回调函数通常会在4ms之后才执行
                        setTimeout(function() {
                            //循环遍历此promise对象的callbacks数组中所有的callback对象，并依次执行每一个callback对象。
                            //如果该promise能够成功完成（通过其异步函数成功地完成了执行），则选择使用callback对象的fulfill方法；如果其异步函数在执行期间返回错误，
                            //则选择reject方法
                            while(that.callbacks.length) {
                                callback = that.callbacks.shift();

                                //把callback对象的执行抱够在try/catch块中，以防它抛出错误。如果出现了错误，
                                //我们并不希望promise对象链停止执行，我们希望对该promise对象进行失败处理（使用reject方法），
                                //使得发起调用的代码可以自己来处理该错误
                                try {
                                    //基于该promise对象的状态，执行响应的callback对象方法。如果callback对象
                                    //并没被配置fulfill()和reject()方法，则退而使用默认的fulfill()和reject()方法。
                                    //这两个方法在executeCallbacks()方法一开始的位置被定义，见上方
                                    if(that.state === state.FULFILLED) {
                                        value = (callback.fulfill || fulfill)(that.value);
                                    } else {
                                        value = (callback.reject || reject)(that.error);
                                    }
                                    //把该回调函数的执行结果传给resolve()方法，resolve()方法将会把该promise
                                    //对象标记为“成功完成”或者继续进一步执行
                                    callback.promise.resolve(value);
                                } catch(reason) {
                                    //如果回调函数执行过程中出现了错误
                                    callback.promise.reject(reason);
                                }

                            }

                        }, 0);
                    }
                };

                //如果此promise对象在之前尚未处于“成功完成”或“失败”状态，则fulfill()方法将会把此promise
                //对象标记为“完成”。在此promise对象相关联的所有回调函数将会在此时执行
                Promise.prototype.fulfill = function(value) {
                    //如果此promise对象仍然处于“未完成”状态，才可以转换此promise对象至“完成”状态。
                    //此fulfill方法执行时会被传入一个值（在我们使用fulfill方法时根据需要而定，通常为此promise对象对应的异步函数的执行返回值）
                    if(this.state === state.PENDING && arguments.length) {
                        this.state = state.FULFILLED;
                        this.value = value;
                        this.executeCallbacks();
                    }
                };

                //如果此promise对象在之前尚未处于“成功完成”或“失败”状态，则reject()方法将会把promise对象标记为“失败”。
                //与此promise对象相关联的所有回调函数将会在此时执行
                Promise.prototype.reject = function(reason) {

                    //如果此promise仍然处于“未完成”状态，才可以转换此promise至“失败”状态。此reject方法执行时会被传入一个值
                    //（在我们使用reject方法时根据需要而定，通常为出错原因）
                    if(this.state === state.PENDING && arguments.length) {
                        this.state = state.REJECTED;
                        this.error = reason;
                        this.executeCallbacks();
                    }
                };

                //resolve()方法接收一个对promise对象的fulfill()回调函数的成功调用的返回值。如果该promise对象是
                //位于这条有then()方法调用所形成的链的最后一个promise对象，则使用此返回值来使该promise对象完成。
                //如果该promise对象不是链中的最后一个，就会继续往下处理该链，递归地对链式连接的promise对象进行
                //相应的完成处理或失败处理
                Promise.prototype.resolve = function(value) {
                    var promise = this,

                        //检测从callback对象的fulfill()方法所返回的值的类型。如果这是链的最后一个promise对象，
                        //该值就会是其异步函数本身的执行结果。如果此promise对象具有链式相连的其他promise对象，
                        //那么传给此方法的值将包含着另一个promise对象。递归地，它又会再次调用resolve()方法
                        valueIsThisPromise = promise === value,
                        valueIsApromise = value && value.constructor === Promise,

                        //词语"thenable" 是指这样的一个对象，它看起来像是一个promise对象，因为它包含有一个
                        //属于自己的then()方法，然而它不是这个Promise"类"的一个实例。当需要将其他实现了
                        //Promises/A+规范的类所产生的promise对象连接在一起时，这是很有帮助的
                        valueIsThenable = value && (typeof value === "object" || typeof value === "function"),

                        isExecuted = false,
                        then;

                    //如果传给此方法的值与这里所表示的promise对象相同，则把此promise进行失败处理。
                    //不然，我们就可能会陷入死循环
                    if(valueIsThisPromise) {
                        //Promises/A+规范指出，如果此promise对象与传给此方法的promise对象相同，则应该把一个TypeError传给reject()方法，从而有效地停止执行链中的更下一步的promise
                        promise.reject(new TypeError());

                        //如果传给resolve()方法的值是这个Promise“类”的另一个案例，则基于所提供的promise对象的
                        //状态来把当前promise对象进行fulfill（成功完成）或reject(失败)处理
                    } else if(valueIsApromise) {
                        //如果传给resolve()方法的promise对象已经被进行过成功完成处理或失败处理，则把所传入的
                        //promise对象中包含的值或错误信息继续传给当前promise对象
                        if(value.state === state.FULFILLED) {
                            promise.fulfill(value.value);
                        } else if(value.state === state.REJECTED) {
                            promise.reject(value.error);
                            //如果传给resolve()方法的promise对象尚未进行成功完成处理或失败处理，则执行所传进来的
                            //promise对象的then()方法，以确保当所传进来的promise对象的异步函数完成执行时，当前
                            //promise对象可以连同所传进来的promise对象一起被处理或进行失败处理
                        } else {
                            value.then(function(value) {
                                promise.resolve(value);
                            }, function(reason) {
                                promise.reject(reason);
                            });
                        }
                        //如果传给resolve()方法的值不是这个Promise“类”的一个实例，而是一个包含有自己的then()方法
                        //的类似对象，则执行它的then()方法，基于这个传入的promise对象的状态把当前promise对象进行成功完成处理或失败处理。
                        //当要连接其他与此Promise类一样实现了相同的规范的类所创建的promise对象时，这是很有帮助的

                    } else if(valueIsThenable) {
                        //把执行包裹在try/catch块中，以防在其他类型的promise对象的实现过程中在底层代码抛出错误
                        try {
                            then = value.then;

                            //如果该value变量中所保存的对象包含then()方法，则执行该then()，以确保当这个
                            //promise对象（该value变量中所保存的对象）完成其工作后，能够基于其结果使当前promise
                            //对象进行成功完成处理或失败处理
                            if(typeof then === "function") {
                                then.call(value, function(successValue) {
                                    if(!isExecuted) {
                                        isExecuted = true;
                                        promise.resolve(successValue);
                                    }
                                }, function(reason) {
                                    if(!isExecuted) {
                                        isExecuted = true;
                                        promise.reject(successValue);
                                    }
                                });
                            } else {
                                promise.fulfill(value);
                            }
                        } catch(reason) {
                            if(!isExecuted) {
                                isExecuted = true;
                                promise.reject(reason);
                            }
                        }
                        //如果传给resolve()方法的值不是一个promise对象，则使用该值来使当前promise对象完成。
                        //与该promise对象关联的所有回调函数将会被执行
                    } else {
                        promise.fulfill(value);
                    }

                };
                //增加一个额外的方法Promise.all()。它并不属于Promise/A+规范的一部分，但属于ECMAScript 6 Promises
                //规范的一部分。此规范具有Promise机制的优点，直接集成到了JavaScript语言中。（在ECMAScript6中，Promise是JavaScript的原生对象之一）

                //此方法接收一个promise对象的数组。每一个数组项都表示一个异步函数，这些异步函数会同时执行。all()方法最后会返回一个单独的promise对象，
                //使得当数组中所有提供的promise都成功完成后可以执行一个单独的then()方法。在成功完成后，所传递的值是一个数组。该数组包含着promise对象数组中每个promise对象的执行返回值。
                //返回值数组项的次序与原promise对象数组的次序相同
                Promise.all = function(promises) {
                    var index = 0,
                        promiseCount = promises.length;

                    //返回一个单独的promise对象来代表提供给all()方法的所有promise对象。
                    //当所提供的所有promise对象都成功完成时，此promise对象就会进行成功完成处理
                    return new Promise(function(fulfill, reject) {
                        var promise,
                            results = [],
                            resultCount = 0;

                        //当所提供的promise对象中的某一个完成时，执行一次onSuccess()函数，把该promise对象的
                        //产生结果添加至数组中，所在的数组位置序号与该promise对象在原来的数组中的位置序号相同
                        function onSuccess(result, index) {
                            result[index] = result;
                            resultCount++;

                            //如果已经收集齐了所有promise对象的产生结果，则把当前这个单独的promise对象（代码所有promise对象的这个promise对象）进行
                            //成功完成处理，并把由各个独立promise对象的完成结果所组成的数组传入
                            if(resultCount === promiseCount) {
                                fulfill(results);
                            }

                        }

                        //如果所提供的promise对象当中某一个是“失败”的，则把当前promise对象（代码所有promise对象的这个promise对象）进行失败处理

                        function onError(error) {
                            reject(error);
                        }

                        //处理一个给定的promise对象。如果它能完成，则执行onSuccess()；如果不能，则执行onError()
                        function resolvePromise(index, promise) {
                            promise.then(function(value) {
                                onSuccess(value, index);
                            }, onError);
                        }

                        //循环遍历提供给all()方法的所有promise对象，依次对其进行处理
                        for(; index < promiseCount; index++) {
                            promise = promises[index];
                            resolvePromise(index, promise);
                        }
                    });

                }
                return Promise;
            }());

看看代码清单7-13，当中展示了如果利用代码清单7-12的Promise“类”来在代码中创建和使用成功模式

代码清单7-13 使用承诺模式

            //定义一个变量，用作在本代码后面的毫秒计算器
            var millisecondCount = 0;

            //定义一个方法，向给定的URL以GET的请求方式获取所返回的数据。它会返回一个promise对象。
            //可以使用该对象的then()方法来连接回调函数至该对象
            function ajaxGet(url) {
                //返回一个新的promise对象，以实施Ajax请求的异步函数对其进行初始化。当promise执行此函数时，
                //它会传入2个函数参数。当该异步请求成功时则执行第1个函数，当该异步请求的执行出现了错误时则执行第2个函数
                return new Promise(function(fulfill, reject) {
                    var xhr = new XMLHttpRequest(),
                        STATE_LOADED = 4,
                        STATUS_OK = 200;
                    xhr.onreadystatechange = function() {
                        if(xhr.readyState !== STATE_LOADED) {
                            return;
                        }

                        //如果该Ajax GET请求已成功地收到返回数据，则执行该fulfill方法
                        if(xhr.stats === STATUS_OK) {
                            fulfill(xhr.responseText);
                            //如果该Ajax GET请求不能成功地接收到返回数据，则执行该reject方法
                        } else {
                            reject("For the Url'" + url + "',the server responded with:" + xhr.status);
                        }
                    }    
                    //实施Ajax GET请求
                    xhr.open("GET",url);
                    xhr.send();
                });
            }

            //定义一个方法，确保经过给定的毫秒数后在进行计数。返回一个promise
            function wait(milliseconds) {
                return new Promise(function(fulfill, reject) {

                    //如果所提供的毫秒数的值是一个大于0的数值，则调用setTimeout方法来等待该毫秒数，
                    //然后执行fulfill方法
                    if(milliseconds && typeof milliseconds === "number" && milliseconds > 0) {
                        setTimeout(function() {
                            fulfill(milliseconds);
                        }, milliseconds);
                    } else {
                        reject("Not an acceptable value provided for millseconds:" + milliseconds);
                    }
                });
            }

            //定义2个函数，分别用于某特定的promise成功或失败之时
            function onSuccess(milliseconds) {
                alert(milliseconds + "ms passed");
            }

            function onError(error) {
                alert(error);
            }

            //例子1：成功
            //使用一个我们确知能使之成功的值来执行wait()函数。这里将会执行所提供给then()方法的2个方法中的第1个
//            wait(500).then(onSuccess, onError); //等待0.5s后，输出500ms passed

            //例子2：错误
            //使用一个我们确知不能使之成功的值来执行wait()函数。因为这会立即对promise对象进行失败处理，所以
            //先会向用户演出这里的错误信息的提示框，然后才是例子1的结构提示框
//            wait(0).then(onSuccess, onError); //Not an acceptable value provided for millseconds:0

            //例子3：链式调用
            //使用then()方法可以使多个promise链在一起，从而实现多个操作的按序执行。之前的一个异步函数的执行
            //结果出来后，再执行下一个。如果不使用Promise模式，就需要使用复杂的多重嵌套回调函数来实现。
            //Promise模式可以令其显著地简化
            wait(1000).then(function(milliseconds) {
                //在经过了1s的延迟后，用传入该函数参数的值（此例为1000）对毫秒计数器进行增加
                millisecondCount += milliseconds;

                //在这个函数里返回一个promise对象。这意味着，一旦之前的操作完成。
                return wait(1600);
            }).then(function(milliseconds) {
                //到这一刻，已经过去了2600ms。该值保存在毫秒计数器变量中
                millisecondCount += milliseconds;

                //返回另一个promise对象，表示从现在起要进行400ms的延迟，然后再执行接下来的then()语句中所指定的函数
                return wait(400);
            }).then(function(milliseconds) {
                //把刚过去的400ms增加至毫秒计数器变量中，现在它共为3000
                millisecondCount += milliseconds;

                //最后，输出经过这些步骤之后毫秒计数器的值，表示从此链的第一项操作开始到现在所过去的毫秒数
                alert(millisecondCount + "ms passed"); //经过3秒之后
            });

            //例子4：多个promise
            //不同的promise对象可以链在一起。就如本例，先请求URL /page1.html（假设它存在于服务器），然后等待3s，
            //再请求另一个URL /page2.html(同样，假设其存在)
            ajaxGet("/page1.html").then(function() {
                return wait(3000);
            }).then(function() {
                return ajaxGet("/page2.html");
            }).then(function() {
                //只有当/page1.html和/page2.html都存在并可以访问时，此提示框才会出现
                alert("/page1.html and /page2.html received,with a 3s gap between requests");
            });

            //例子5：多个promise同时进行
            //Promise.all()方法接收一个以promise对象作为数组项的数组。这些promise对象将被同时进行处理，
            //所得的结果会以数组的形式传给Promise的then()方法中的成功函数（then()方法中的第1个函数参数）。同时对/page1.html和/page2.html
            //进行请求，当二者都完成时，执行then()当中的成功回调函数。两个文件（/page1.html和/page2.html）
            //的内容会以数组的形式传给此成功函数作为参数，数组项的次序与promise对象数组的次序相同。如果所
            //提供的promise对象当中任何一个出现失败情况，则执行的将会是那个错误回调函数。传入错误回调函数的
            //参数是传给all()的参数中所出现的第1个错误的详细内容
            Promise.all([ajaxGet("/page1.html"), ajaxGet("/page2.html")]).then(function() {
                alert("/page1.html=" + files[0].length + " bytes. /page2.html = " + files[1].length + " bytes.");
            }, function(error) {
                alert(error);
            });

当代码中存在很多异步操作，使得出现大量嵌套回调函数是，使用承诺模式最为合适。承诺模式使回调函数得以链式连接至异步调用，使得代码更易于阅读和理解。

7.8 策略模式

策略（strategy）模式的最适用场合是，某个“类”包含着大量的条件性语句（if-else或switch）,每一条件分支都会引起该“类”的特定行为以不同方式作出改变。与其维护一段庞大的条件性语句，不如将每一行为划分成多个独立对象，每个对象被称为一个策略（strategy）。在每一次的应用中，这些策略对象中只有一个会应用至原来的对象，原来对象被称作客户（client）。设置多个策略对象还助于改进代码的质量，因为我们可以彼此独立地对这些策略对象进行单元测试。

代码清单7-14展示了一个适合应用策略模式的“类”的样例。当中包含了许多条件性语句，这些语句改变了从该“类”创建的各个对象的某项特定行为。

代码清单7-14 适用应用策略模式的代码

            //定义一个“类”，表示HTML页面中的一个表单域
            function FormField(type, displayText) {
                this.type = type;
                this.displayText = displayText;

                //创建一个新的<input>标签，使用该“类”在实例化时所提供的type的值来设置此表单域的type标签特性
                this.element = document.createElement("input");
                this.element = document.setAttribute("type", this.type);

                //创建一个新的<labal>标签，使用该“类”在实例化时所提供的displayText的值来设置它显示的文本
                this.label = document.createElement("label");
                this.label.innerHTML = this.displayText;

                //添加该<labal>和<input>标签当前页面
                document.body.appendChild(this.label);
                document.body.appendChild(this.element);
            }

            //为每个表单域对象实例配备3个方法
            FormField.prototype = {

                //返回该表单域当前所保存的值
                getValue: function() {
                    return this.element.value;
                },

                //为表单域设置一个新值
                setValue: function(value) {
                    this.element.value = value;
                },

                //根据该表单域中的值是否有效来返回true或false
                isValid: function() {
                    var isValid = false,
                        value;

                    //如果这是<input type="text">表单域，当它的值不是空字符串时，则以为它是有效的
                    if(this.type === "text") {
                        isValid = this.getValue() !== "";

                        //如果这是<input type="email">表单域，若它的值不是空字符串，并且包含有@字符，
                        //在@之后还包含有.字符串，则认为它是有效的
                    } else if(this.type === "email") {
                        value = this.getValue();
                        isValid = value !== "" && value.indexOf("@") > 0 && value.indexOf(".", value.indexOf("@")) > 0;

                        //如果这是<input type="number">表单域，如果它的值是数值，则认为它时有效的
                    } else if(this.type === "number") {
                        value = this.getValue();
                        isValid = !isNaN(parseInt(value, 10));

                    } else {
                        //其他
                    }
                    return isValid;
                }
            };

代码清单7-15展示了如果应用策略模式来对代码清单7-14中的代码进行重构，使之成为更高效、更易于管理的结构。

代码清单7-15 策略模式

            //定义一个类“类”，表示HTML页面中的一个表单域。请注意，其在实例化时会传入一个新对象作为第3个参数。
            //此对象包含我们所创建的特定类型的表单域的isValid()方法的特定实现。例如，text表单域所需要的isValid()
            //方法是检查所保存的值是否为一个空字符串，因此我们创建一个包含着此方法的对象并在实例化时通过策略对象将其传入
            function FormField(type, displayText, strategy) {
                this.type = type || "text";
                this.displayText = displayText || "";

                this.element = document.createElement("input");
                this.element.setAttribute("type", this.type);

                this.label = document.createElement("label");
                this.label.innerHTML = this.displayText;

                //检查是否有包含isValid()方法的策略对象传入。如果有，则保存该策略对象，以便在此对象的isValid()
                //方法执行时使用。如果没有提供策略对象，则使用默认对象
                if(strategy && typeof strategy.isValid === "function") {
                    this.strategy = strategy;
                } else {
                    this.strategy = {
                        isValid: function() {
                            return false;
                        }
                    }
                }
                document.body.appendChild(this.label);
                document.body.appendChild(this.element);
            }

            FormField.prototype = {
                getValue: function() {
                    return this.element.value;
                },
                setValue: function(value) {
                    this.element.value = value;
                },

                //通过调用所保存的策略对象中提供的isValid()方法来代替之前的isValid()的方法。不再需要使用多个
                //if..else语句，从而使得此“类”的代码更加精简并更易于维护
                isValid: function() {
                    return this.strategy.isValid.call(this);
                }
            };

            //定义3个策略对象,当FormField“类”实例化时，供3中不同类型的表单域使用。在这里，我们提供了isValid()
            //方法的各种特定情况的实现，但我们可以继续扩展以下内容以包含更多的方法和(或)属性来满足我们的需求
            //对于本例这种情况，我们可以创建出策略“类”，然后创建出若干对象作为该“类”的实例。在这里我们就有
            //若干简单对象，这样就能使代码更灵活地保持精简并能够切中要点
            var textFieldStrategy = {

                    //关于<input type="text">表单域验证的特定功能
                    isValid: function() {
                        return this.getValue() !== "";
                    }
                },
                emailFieldStrategy = {

                    //关于<input type="email">表单域验证的特定功能
                    isValid: function() {
                        var value = this.getValue();
                        return value !== "" && value.indexOf("@") > 0 && value.indexOf(".", value.indexOf("@")) > 0;
                    }
                },
                numberFieldStrategy = {

                    //关于<input type="number">表单域验证的特定功能
                    isValid: function() {
                        var value = this.getValue();
                        return !isNaN(parseInt(value, 10));
                    }
                };

代码清单7-15中的代码可以如代码清单7-16所示般进行使用

代码清单7-16 使用策略模式

            //为HTML页面创建3个表单域，每一个都有不同的类型。我们传入表单域类型，其关联的<label>标签的文本以及
            //为此表单域类型提供表单域值验证所需行为的相关策略对象
            var textField = new FormField("text", "First Name", textFieldStrategy),
                emailField = new FormField("email", "Email", emailFieldStrategy),
                numberField = new FormField("number", "Age", numberFieldStrategy);

            //为每个表单域设置我们确知能够通过验证的值
            textField.setValue("wing");
            emailField.setValue("wingzw@qq.com");
            numberField.setValue(35);
            
            //检查表单域中的值是否正确通过验证
            alert(textField.isValid());//true
            alert(emailField.isValid());//true
            alert(numberField.isValid());//true
            
            //使用我们确定不能通过验证的值来改变这些表单域的值
            textField.setValue("");
            emailField.setValue("zhangwei");
            numberField.setValue("wing");
            
            //检查以确保isValid()方法能正确运行，反映相应新值验证的变化
            alert(textField.isValid());//false
            alert(emailField.isValid());//false
            alert(numberField.isValid());//false

如果某个“类”中的方法的行为的实现需要使用到大量的条件性逻辑语句而导致代码难以管理，则使用策略模式最为合适。