精通JavaScript--06设计模式：结构型

 本章主要学习结构性设计模式，前一章介绍的创建型设计模式侧重于对象的处理，而结构型设计模式则有助于把多个对象整合为一个更大型的、更有组织的代码库。它们具有灵活性，可维护性，可扩展性，并能够确保当系统中的某一部分发生变更时，不必完全重写其余部分进行适应。结构型模式还可用于帮助我们与其他代码结构（在我们的应用程序中需要简易地实现与这些代码结构的协同运作）

6.1　　适配器模式

适配器（adapter）模式是一种很有用的设计模式。当需要关联两个或更多代码组件时便可应用此模式，否则这些代码将无法正常关联在一起。相类似地，当一个你之前开的API出现更新而不能再按相同的方法进行调用时，此模式也能帮上大忙。适配器提供了旧版本与新版本API之间的对接，能够帮助那些使用你的API的用户迁移至新API，使得用户在分享你改进后的代码的同时而又不必更改其原来的旧代码。代码清单6-1演示了如果使用此模式来为代码创建一个适配器，以将新的API映射至旧API。

 

            //假设以下节课深藏在你庞大的代码库中，用于通过HTTP发出Ajax请求
            var http = {
                makeRequest: function(type, url, callback, data) {
                    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(type.toUpperCase(), url);
                    xhr.send(data);
                }
            };

            //以上定义的http.makeRequest()方法可按如下方式进行调用，以对系统中的ID为“12345”的用户的数据进行获取和更新
            http.makeRequest("get", "/user/12345", function(response) {
                alert("HTTP GET response received,User data:" + response);
            });

            http.makeRequest("post", "/user/12345", function(response) {
                alert("HTTP POST response received,New User data:" + response);
            }, "company=AKQA&name=wing");

            //现在，假设你要对项目进行重构，你决定引入一个新的结构，使用命名空间，并把makeRequest()方法划分为
            //两个独立的方法来发出HTTP GET和POST请求
            var myProject = {
                data: {
                    ajax: (function() {
                        function createRequestObj(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);
                                }
                            };
                            return xhr;
                        }
                        return {
                            get: function(url, callback) {
                                var requestObj = createRequestObj(callback);
                                requestObj.open("GET", url);
                                requestObj.send();

                            },
                            post: function(url, data, callback) {
                                var requestObj = createRequestObj(callback);
                                requestObj.open("POST", url);
                                requestObj.send(data);
                            }

                        };
                    }())
                }
            };
            
            //新的get()和post()方法可按如下方式调用
            myProject.data.ajax.get("/user/12345",function(response){
                alert("Refactored HTTP GET response received.User data:"+response);
            });
            
            myProject.data.ajax.post("/user/12345","company=AKQA&name=wing",function(response){
                alert("Refactored HTTP GET response received.New User data:"+response);
            });
            
            //为了避免在代码库中的其余部分重写每一个对http.makeRequest()方法的调用,你可以创建一个适配器来映射
            //旧接口至新方法。配置器需要使用与所要替换掉的原方法相同的输入参数，并在适配器内部调用新方法
            function httpToAjaxAdapter(type,url,callback,data){
                if(type.toLowerCase()==="get"){
                    myProject.data.ajax.get(url,callback);
                }else if(type.toLowerCase()==="post"){
                    myProject.data.ajax.post(url,data,callback);
                }
            }
            
            //最后，应用配置器来代替员原来的方法
            //这样，它将会映射旧接口至新方法，而不需要同时重写整个代码的其余部分
            http.makeRequest=httpToAjaxAdapter;
            
            //按照原方法的使用方式使用该新的适配器————在内部，它将调用新的代码，但在外部，
            //它看起来有与旧的makeRequest()方法一模一样
            http.makeRequest("get","/user/123456",function(response){
                alert("Refactored HTTP GET response received.User data:"+response);
            });
            
            http.makeRequest("post","/user/12345",function(response){
                alert("Refactored HTTP GET response received.New User data:"+response);
            },"company=AKQA&name=wing");

当需要把不同的代码进行关联，否则这些代码无法兼容在一起工作时，使用适配器模式最为合适。例如，当某个外部API进行了更新时，可以创建一个是适配器来映射各新方法至旧方法，以避免更改依赖这些方法的其余代码。

 

6.2　　组合模式

组合（composite）模式为一个或多个对象创建了一个接口，使终端用户不需要知道他们所处里对象的个数。当你希望能够简化其他开发者对你的函数的访问方法时，该模式很有帮助。无论他人向同一方法传入的是一个单独对象还是一个由对象组成的数组，都不需要区别对待。代码清单6-2展示了组合模式的一个简单例子。用户可以添加class标签特性名称至一个或多个DOM节点，而不需要知道是否应将一个或多个DOM节点传给该方法。

代码清单6-2　　组合模式

 

    var elements = {
                //定义一个方法按tag名称获取DOM元素。如果只发现一个元素，则它作为一个单独的节点返回，
                //如果发现多个元素，则返回这些元素所组成的数组
                get: function(tag) {
                    var elems = document.getElementsByTagName(tag),
                        elemsIndex = 0,
                        elemsLength = elems.length,
                        output = [];

                    //把所找到的元素结构转化为一个标准数组
                    for(; elemsIndex < elemsLength; elemsIndex++) {
                        output.push(elems[elemsIndex]);
                    }
                    //如果只找到一个元素，则返回该独立元素，否则返回所找到的各个元素所组成的数组
                    return output.length === 1 ? output[0] : output;
                },

                //定义一个组合方法，用于为一个或多个元素添加class标签特性class名称，无论在执行时有多少个元素被传入都可实现
                addClass: function(elems, newClassName) {
                    var elemIndex = 0,
                        elemLength = elems.length,
                        elem;

                    //判断所传入的元素究竟是数组还是一个单独对象
                    if(Object.prototype.toString.call(elems) === "[object Array]") {
                        //如果是数组，循环遍历每一个元素并为每个元素都增加class标签特性class名称
                        for(; elemIndex < elemLength; elemIndex++) {
                            elem = elems[elemIndex];
                            elem.className += (elem.className === "" ? "" : " ") + newClassName;
                        }
                    } else {
                        //如果传入的是单独元素，则为其增加class标签特性class名称值
                        elems.className += (elems.className === "" ? "" : " ") + newClassName;
                    }
                }
            };

            //使用该elements.get()方法来找出当前页面的单独的<body>元素，已经<a>元素(可能有很多个)
            var body = elements.get("body"),
                links = elements.get("a");

            //该组合方式elements.addClass()为单独元素和多个元素给出了相同的使用接口，很明显地简化了该方法的使用
            elements.addClass(body, "has-js");
            elements.addClass(links, "custom-link");

若不希望那些正与你的方法进行交互的开发者操心需要传入多少个对象作为方法参数，使用组合模式最为合适，这样可以简化方法的调用。

 

6.3　　装饰模式

装饰（decorator）模式用于为某个“类”创建的对象扩展和定制额外的方法和属性，避免了因创建大量的子类而变得难以维护。其实现方法时，通过有效地将对象包装在另一个对象中，此另一个对象实现了相同的公共方法，根据我们所要增加的行为对相关方法进行重写。

代码清单6-3演示了一个例子，当中创建了若干装饰者，每个装饰者都会对一个已存在的对象增加额外的属性和行为。

 

            //定义一个类，用于构建一个对象来表示一个简单的表单域
            var FormField = function(type, displayText) {

                //使用构造函数的输入参数来确定该表单域的类型，默认为一个简单的文本域以及它的placeholder文本
                this.type = type || "text";
                this.displayText = displayText || "";
            }

            FormField.prototype = {
                createElement: function() {
                    this.element = document.createElement("input");
                    this.element.setAttribute("type", this.type);
                    this.element.setAttribute("placeholder", this.displayText);
                    return this.element;
                },

                isValid: function() {
                    return this.element.value !== "";
                }
            };

            //表单域装饰者，它实现了与FormField相同的公共方法
            var FormFieldDecorator = function(formField) {
                this.formField = formField;
            }

            FormFieldDecorator.prototype = {
                createElement: function() {
                    this.formField.createElement();
                },
                isValid: function() {
                    return this.formField.isValid();
                }
            };

            var MaxLengthFieldDecorator = function(formField, maxLength) {
                FormFieldDecorator.call(this, formField);
                this.maxLength = maxLength || 100;
            }

            MaxLengthFieldDecorator.prototype = new FormFieldDecorator();
            MaxLengthFieldDecorator.prototype.createElement = function() {
                var element = this.formField.createElement();
                element.setAttribute("maxlength", this.maxLength);
                return element;
            }

            var AutoCompleteFieldDecorator = function(formField, autocomplete) {
                FormFieldDecorator.call(this, formField);
                this.autocomplete = autocomplete || "on";
            }
            AutoCompleteFieldDecorator.prototype = new FormFieldDecorator();
            AutoCompleteFieldDecorator.prototype.createElement = function() {
                var element = this.formField.createElement();
                element.setAttribute("autocomplete", this.autocomplete);
                return element;
            }

代码清单6-3所创建的装饰者可以在代码清单6-4所示的情况下使用，用于生成表示表单当中的表单域的对象，使用这些装饰者而非通过子类来为对象添加属性和行为

代码清单6-4　　使用装饰模式

 

            //创建一个空的<form>标签，一个代表<input type="search"/>表单域的新FormField对象
            var form = document.createElement("form"),
                formField = new FormField("search", "Enter your search term");

            //使用装饰者为所生成的表单域元素添加maxlength和autocomplete属性，实现对formField对象的扩展。注意
            //我们是如果一次把经扩展的formField对象传入每个装饰者的。在这里，装饰者又对该对象进行了进一步扩展
            formField = new MaxLengthFieldDecorator(formField, 255);
            formField = new AutoCompleteFieldDecorator(formField, "off");

            //创建该HTML表单域元素并将其添加至<form>元素
            form.appendChild(formField.createElement());

            //添加一个事件处理函数至该<form>标签的submit事件，防止在我们添加的这个表单域当中没有值的
            //情况下提交表单
            form.addEventListener("submit", function(e) {
                //屏蔽表单的默认提交动作
                e.preventDefault();

                //检测该表单域是否通过验证，例如是否包含值
                if(formField.isValid()) {

                    //如果是，继续运行并提交表单
                    form.submit();
                } else {

                    //如果否，提示用户有错误存在，用户需要进行验证
                    alert("Please correct the issues in the form field.");
                }
            }, false);
            

            window.addEventListener("load", function() {
                document.body.appendChild(form);
            }, false);

当需要快速且简便地为从一个"类"所创建的对象实例增加行为，而又不借助于创建一系列的从继承于该“类”的子类来实现时，使用装饰者模式最为合适。

6.4　　外观模式

外观（facade）模式是很常见的。其实它就是通过编写一个单独的函数，来简化对一个或多个更大型的、可能更为复杂的函数的访问。有争论说那些直接调用另一个函数的函数其实就是这种模式的一个例子，但我认为最好视之为一种简化某种内容的手段，不然这些内容的实现会需要多个步骤；又或者看作是为一个更庞大的系统提供了一个单独方法入口，使得其他开发者能更加容易地访问该系统。代码清单6-5展示了一个简单的外观模式，该模式用包裹器简化了跨浏览器Ajax调用。

代码清单6-5　　外观模式

 

            //定义一个函数，作为facade来简化和帮助实现跨浏览器的Ajax调用，所支持的浏览器可回溯至Internet Explorer 5
            function ajaxCall(type, url, callback, data) {

                //根据当前浏览器获取对Ajax连接对象的引用
                var xhr = (function() {
                        try{
                            //所有现代浏览器所使用的标准方法
                            return new XMLHttpRequest();
                        }catch(e){}
                        
                        //较老版本的Internet Explorer使用用户机器上安装的一个ActiveX对象
                        try{
                            return new ActiveXObject("Msxml2.XMLHTTP.6.0");
                        }catch(e){}
                        
                        try{
                            return new ActiveXObject("Msxml2.XMLHTTP.3.0");
                        }catch(e){}
                        
                        
                        try{
                            return new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){}
                        
                        
                    }()),
                    STATE_LOADED = 4,
                    STATUS_OK = 200;
                //一旦从服务器收到表示成功的响应信息，则执行所给定的回调方法
                xhr.onreadystatechange=function(){
                    if(xhr.readyState!==STATE_LOADED){
                        return;
                    }
                    if(xhr.status===STATUS_OK){
                        callback(xhr.responseText);    
                    }
                };
                //使用浏览器的Ajax连接对象来向所给定的URL发出相关的调用
                xhr.open(type.toUpperCase(),url);
                xhr.send(data);
            }            
            //外观模式的示例见代码清单6-6，掩盖了跨浏览器Ajax操作后的复杂性

代码清单6-6 使用外观模式

            //ajaxCall()外观函数可实现跨浏览器的Ajax调用，使用方法如下
            ajaxCall("get","/user/12345",function(response){
                
                alert("HTTP GET response received.User data:"+response);
            });
            ajaxCall("get","/user/12345",function(response){
                
                alert("HTTP POST response received.User data:"+response);
            },"name=wing");

当需要通过一个单独的函数或方法来访问一系列的函数或方法调用，以简化代码库的其余内容，使得代码更易于跟踪管理并因而在日后更具可维护性和伸缩性时，使用外观模式最为合适。

 

6.5　　享元模式

享元(flyweight)模式是一种关于优化的模式。对于那些需要创建大量的相似对象却因此而消耗大量的内存代码来说，应用享元模式时很有帮助的。它使用少量可共享的对象来代替这些大量相似对象，使得代码的运行占用内存更少而更为高效。因此，此模式被名为flyweight。该名称来源于拳击界，它指得是那些最轻量级别的选手，那些最为敏捷灵活的选手。代码清单6-7演示了一个在设计中应用享元模式来处理问题（即多个对象的低效存储）的例子。

代码清单6-7　　低效的多个对象实例

 

            //创建一个类来保存员工数据，这些员工工作于一个或多个不同的公司
            function Employee(data) {

                //表示组织结构内员工的ID
                this.employeeId = data.employeeId || 0;

                //表示员工的社会安全号码
                this.ssId = data.ssId || "000-000";

                //表示员工的名称
                this.name = data.name || "";

                //表示员工的职业
                this.occupation = data.occupation || "";

                //表示员工的公司名称，地址和国籍
                this.companyName = data.companyName || "";
                this.companyAddress = data.companyAddress || "";
                this.companyCountry = data.companyCountry || "";
            }

            //建立3个方法，用于从保存数据的对象中获取员工的名称、职业和公司详细信息
            Employee.prototype.getName = function() {
                return this.name;
            };

            Employee.prototype.getOccupaction = function() {
                return this.occupation;
            };

            Employee.prototype.getCompany = function() {
                return [this.companyName, this.companyAddress, this.companyCountry].join(",");
            };

            //创建4个员工对象。注意，有两个员工对象具有相同的公司信息，而另两个员工对象具有相同的ssId和name
            //随着所创建对象的增加，数据出现重复的数量也将增加，这种实现方法的低效消耗了更多的内存
            var denOdell = new Employee({
                    employeeId: 1456,
                    ssId: "1234-567",
                    name: "wing",
                    occupation: "Head of web Development",
                    companyName: "baidu",
                    companyAddress: "beijing",
                    companyCountry: "CN"
                }),
                billGates = new Employee({
                    employeeId: 1,
                    ssId: "7754-344",
                    name: "Bill Gates",
                    occupation: "Founder",
                    companyName: "microsoft",
                    companyAddress: "New York",
                    companyCountry: "US"
                });

享元模式的应用是通过拆解一个已存在的“类”来实现的。这样，可以使该“类”的对象实例中的重复数据所占用的内存实现最小化。这是通过研究所有对象实例，找出其中的重复数据，
并创建若干独立的“类”来代表这些数据而实现的。这样，就可以用一个单独的对象实例来表示这些重复的数据，进而实现从原来的“类”的多个对象实例中对此对象的引用，
使得需要存储的数据变得更少，从而减少应用程序的内存占用。

当前对象实例中的数据核（data core）（不是指核心数据）被称作该“类”的内部状态数据（intrinsic data），而那些可以被提取出来进行单独存储的、并能从原对象对此独立存储的数据进行引用的数据则被称为
外部状态数据（extrinsic data）。在代码清单6-7中，对于员工信息来说，内部数据（本质上来说就是那些具有唯一性的数据）就是员工的employeeId和员工的occupation。而对于公司数据，
它目前在多个Employee对象重复出现，则可以被提出出来单独存放。同样地，每个单独的员工个人身份信息（如name和ssId）也可以被提取出来单独存放。因此，员工信息就可通过4项属性表示出来：employeeId、occupation、company、person。最后两个属性参见其他对象实例。

享元模式的应用分为3个阶段，如代码清单5-8所示。首先，创建各个新“类”来表示外部状态数据；然后，应用工厂模式来确保之前已创建的对象不会再次被创建；最后，编写代码，使得对象的创建可以按原来的方式进行，同时允许所有实现享元的繁重任务都在后台实现。

代码清单6-8 享元模式

            //实现享元模式的第一阶段是，从我们想要实现更高效的内存存储的对象的原来的外部状态数据
            //(原Employee的各项属性)中提取出要成为内部状态的数据
            //
            //在代码清单的Employee对象中，有2组外部状态数据——人员数据和公司数据。
            //让我们创建2个类来表示这些类型的数据
            //
            //Person对象表示独立的社会安全号码以及人员的名称
            function Person(data) {
                this.ssId = data.ssId || "";
                this.name = data.name || "";
            }

            //Company对象表示公司的名称、地址和国家详细内容
            function Company(data) {
                this.name = data.name || "";
                this.address = data.address || "";
                this.country = data.country || "";
            }

            //实现享元模式的第二阶段是，要确保代码唯一外部状态数据的对象，在下方employee[data.employeeId]中的对象直接量中的person对象和company对象,只被创建一次并保存起来以后供后续使用。
            //这是通过对每一个新的外部状态数据“类”应用工厂模式来抽象对象实例的创建过程来实现的。
            //这样，如果找到一个已经存在的对象，就会返回该对象而不是创建一个新的实例
            var personFactory = (function() {
                    //创建一个变量，用于按照ssId保存Person“类”的所有对象
                    var people = {},
                        personCount = 0;

                    return {
                        //建立一个方法，根据输入数据所提供的给定的ssId、如果还不存在该ssId对应的Person“类”的实例，
                        //则创建一个实例；如果已经存在、则返回该对象而不是创建一个新对象
                        createPerson: function(data) {
                            var person = people[data.ssId],
                                newPerson;
                            //如果该给定的ssId所对应的人员已经存在于本地数据存储区中，则返回该人员对象实例；
                            //否则，使用所提供的数据创建一个新的对象
                            if(person) {
                                return person;
                            } else {
                                newPerson = new Person(data);
                                people[newPerson.ssId] = newPerson;
                                personCount++;

                                return newPerson;
                            }
                        },

                        //建立一个方法，以便获悉已经创建了多少多个Person类的对象
                        getPersonCount: function() {
                            return personCount;
                        }
                    }
                }()),

                //为Company类的对象创建一个相似的工厂，按name保存公司数据
                companyFactory = (function() {
                    var companies = {},
                        companyCount = 0;

                    return {
                        createPerson: function(data) {
                            var company = companies[data.name],
                                newCompany;
                            if(company) {
                                return company;
                            } else {
                                newCompany = new Person(data);
                                companies[newCompany.name] = newCompany;
                                companyCount++;

                                return newCompany;
                            }
                        },

                        //建立一个方法，以便获悉已经创建了多少多个Person类的对象
                        getCompanyCount: function() {
                            return companyCount;
                        }
                    }
                }()),
                //实现享元模式的第三阶段是，使得对象的创建可以按照代码清单6-7中的相同方法进行，
                //实现了最高效的数据存储处理，且从终端用户的角度看来，这种处理是透明的
                //
                //创建一个对象，当中提供了保存员工数据的方法以及按员工的employeeId来返回每个对象的数据方法。
                //这简化了终端开发者的代码，因为他们不需要直接访问对象中的底层方法，只需要按此处理函数的交互方法进行使用即可
                employee = (function() {
                    //声明一个变量，作为数据存储区来存放所有创建的员工对象
                    var employees = {},
                        employeeCount = 0;
                    return {
                        //建立一个方法，用于往数据存储区添加员工对象，把参数所提供的数据传入Person和Company所
                        //对应的工厂，保存所生成指由对象直接量生成，而非工厂生成的对象（此对象由employeeId、occupation、person对象的引用和company对象的引用组成）至本地数据存储区
                        add: function(data) {

                            //根据所提供的参数数据、相应地创建或查找Person类的对象、Company类的对象
                            var person = personFactory.createPerson({
                                    ssId: data.ssId,
                                    name: data.name
                                }),
                                company = companyFactory.createPerson({
                                    name: data.name,
                                    address: data.address,
                                    country: data.country
                                });
                            //保存此新对象至本地数据存储区，此对象含有employeeId、occupation，以及员工所任职的公司，
                            //还有员工的唯一个人信息数据，其中包含其名称和社会安全号码
                            employee[data.employeeId] = {
                                employeeId: data.employeeId,
                                occupation: data.occupation,
                                person: person,
                                company: company
                            };
                            employeeCount++;
                        },
                        //建立一个方法，用于根据员工的employeeId来返回员工的名称————从相关的Person对象中获取人名数据
                        getName: function(employeeId) {
                            return employees[employeeId].person.name;
                        },
                        //建立一个方法，用于根据员工的employeeId来返回员工的职位
                        getOccupation: function(employeeId) {
                            return employees[employeeId].occupation;
                        },
                        //建立一个方法（方法名改成getCompany会好一点），用于返回员工所任职公示的地址————从相关联Company对象中获取有关数据
                        getCountry: function(employeeId) {
                            var company = employees[employeeId].company;
                            return [company.name, company.address, company.country].join(",");
                        },
                        //建立一个功能性方法来获悉已经创建的员工的数量
                        getTotalCount: function() {
                            return employeeCount;
                        }
                        
                    };
                }());

代码清单6-8中的享元模式代码可以如代码清单6-9般进行使用，当中实现了与代码清单6-7相同的行为。应用享元模式后，原来很耗内存的各个对象（旧Employee类的各个对象）中所重复的数据量越多，现在可共享的对象（新Person类元对象和新Company类元对象）就越多，从而减少了应用程序的内存占用。这体现了该设计模式的有用之处。
代码清单6-9 使用享元模式

            //创建4个员工对象。注意，其中有两个对象具有相同的公司信息。有两个对象具有相同的ssId和name。
            //在后台的处理上，代码清单6-8中的享元模式可以确保重复的人员信息和公司数据尽量以最高的方式存储
            var denOdell = employee.add({
                    employeeId: 1456,
                    ssId: "1234-567",
                    name: "wing",
                    occupation: "Head of web Development",
                    companyName: "baidu",
                    companyAddress: "beijing",
                    companyCountry: "CN"
                }),
                billGates =employee.add({
                    employeeId: 1,
                    ssId: "7754-344",
                    name: "Bill Gates",
                    occupation: "Founder",
                    companyName: "Microsoft",
                    companyAddress: "New York",
                    companyCountry: "US"
                }),
                billGatesPhilanthropist = employee.add({
                    employeeId:31,
                    ssId: "7754-344",
                    name: "Bill Gates",
                    occupation: "Founder",
                    companyName: "Microsoft",
                    companyAddress: "New York",
                    companyCountry: "US"
                });
            //我们已经以ssId和name创建了2个对象来表示人员：wing，Bill gates,
            alert(personFactory.getPersonCount());//2
            //我们已经以name，address和country创建了2个对象来表示公司：baidu，Microsoft
            alert(companyFactory.getCompanyCount());//2
            
            //我们已经创建了4个对象来表示员工，其中，有两个唯一属性和另两个属性分别指向自己已经存在的person和company对象。
            //有着相同人员和公司数据的员工对象创建得越多，应用程序所需保存的数据就越少，越能体现享元模式的高效性
            alert(employee.getTotalCount());//3

当面对大量的对象时，若在这些对象里面有着一些相似的共有属性“名称-值”对，这些属性“名称-值”对可以分离成更小的对象，可通过对这些小对象的引用来实现数据共享，使代码的内存占的更少，使代码运行更为高效，则此时使用享元模式最为合适。

6.6　　掺和模式

掺和（Mixin）模式通过快速并简易地从一个对象中把一组方法和属性直接应用至其他对象，或应用至“类”的prototype，使得该类的所有对象实例都能够访问这些属性和方法，从而避免了产生大量的子类和继承链的需要。虽然这听起来可能会像hack(作弊)，特别是对于那些有着传统面向对象背景而现在逐步接触JavaScript的开发人员来说，这种模式直接发挥了JavaScript语言以及它所使用的Prototype的优势，它并不是使用其他语言所应用的严格类继承。只要能够做到小心使用，此模式可以简化开发及代码维护工作。代码清单6-10显示了如果使用掺和模式来简易迅速地应用一组通用方法至一些对象中。

代码清单6-10　　掺和模式

 

            //定义一个mixin，可以借助它来实现调试日志记录，可将其应用至任何对象或“类”
            var loggingMixin = {
                    //声明一个存储数组，用于存放各条日志记录
                    logs: [],
                    //定义一个方法，用于存储消息到日志中
                    log: function(message) {
                        this.logs.push(message);
                    },
                    //定义一个方法，用于读取所存储的日志
                    readLog: function() {
                        return this.logs.join("\n");
                    }
                },
                element,
                header,
                textField,
                emailField;
            //定义一个函数，用于将一个对象中的方法和属性应用到另一个对象中,
            //我们将使用该函数来应用mixin至其他对象
            function extendObj(obj1, obj2) {
                var obj2key;

                for(obj2key in obj2) {
                    if(obj2.hasOwnProperty(obj2key)) {
                        obj1[obj2key] = obj2[obj2key];
                    }
                }
                return obj1;
            }
            //定义一个单例，我们将应用该mixin于其上（虽然没有该mixin此单例也能正常运作）
            element = {
                allElements: [],
                create: function(type) {
                    var elem = document.createElement(type);
                    this.allElements.push(elem);

                    //使用mixin的log()方法，确保该方法存在才调用它。如果该mixin尚未应用，则该方法仍然将正常运作
                    if(typeof this.log === "function") {
                        this.log("Created an element of type:" + type);
                    }
                    return elem;
                },
                getAllElements: function() {
                    return this.allElements;
                }
            };
            //定义一个简单“类”，我们将应用该mixin于其上
            function Field(type, displayText) {
                this.type = type || "";
                this.displayText = displayText || "";

                //确保该mixin的log()方法存在才调用它.
                if(typeof this.log === "function") {
                    this.log("Created an instance of Field");
                }
            }

            Field.prototype = {
                getElemengt: function() {
                    var field = document.createElement("input");
                    field.setAttribute("type", this.type);
                    field.setAttribute("placeholder", this.displayText);
                    if(typeof this.log === "function") {
                        this.log("Created a DOM element with placeholder text:" + this.displayText);
                    }
                    return field;
                }
            };

            //直接应用该mixin至element对象，实质时从该mixin复制各方法和属性至该单例
            element = extendObj(element, loggingMixin);
            //应用该mixin至Field“类”的Prototype，使得该mixin的方法为每一个从该“类”实例化出来的对象所拥有
            Field.prototype = extendObj(Field.prototype, loggingMixin);
            //使用element.create()方法来创建一个新的DOM元素
            header = element.create("header");
            //创建两个对象实例，两者都从Prototype中获得了getElement方法
            textField = new Field("text", "Enter the first line of your address");
            emailField = new Field("email", "Enter your email address");

            //            //将这些对象中所保存的元素添加至当前页面
            //            document.body.appendChild(textField.getElemengt());
            //            document.body.appendChild(emailField.getElemengt());
            //            
            //            //输出通过该mixin所保存的日志记录
            //            alert(loggingMixin.readLog());
            //            //输出如下内容，注意该mixin的每一次使用所录得的所有日志信息如何保存在一起的
            /*
                  Created an element of type:header
                Created an instance of Field
                Created an instance of Field
                Created a DOM element with placeholder text:Enter the first line of your address
                Created a DOM element with placeholder text:Enter your email address
                Created a DOM element with placeholder text:Enter the first line of your address
                Created a DOM element with placeholder text:Enter your email address
             */

 如果研究代码清单6-10中的代码，可能会注意到一些意想不到的事情：尽管mixin是独立地应用至单例和“类“的，但所有记录的日志数据却是存储在一起的。在任何包含着readLog()方法的对象上调用该方法都将得到相同的输出。这是因为，当extendObj()函数从某一对象复制有对象特征的属性至另一个对象时，比如本例中的logs数组（记住，在JavaScript中，数组是一种对象），这个复制动作是通过引用来实现的，而不会出现真正的数据复制。每当该属性被其他任何对象访问时，就会使用相同的属性，即loggingMixin对象的原始属性。

对于本例这种情况，我们希望一次就能看到所有的日志，因而是很有用的；然而，当你在自己的代码中使用此模式时，这可能不是你所需要的结果。如果你希望所复制的属性用于创建单独的副本，则应如代码清单6-11所示般对extendObj()函数进行更改。
代码清单6-11　　更改extendObj()函数以真正复制属性而不是通过引用实现复制

 

    function extendObj(obj1, obj2) {
                var obj2key,
                    value;
                for(obj2key in obj2) {
                    if(obj2.hasOwnProperty(obj2key)) {
                        value = obj2[obj2key];

                        //如果所复制的值是数组，则使用slice()方法来复制出该数组的副本
                        if(Object.prototype.toString.apply(value) === "[object Array]") {
                            obj1[obj2key] = value.slice();
                            //否则，如果所复制的值是对象，而不是数组，则使用本函数的递归调用来复制出该对象的副本
                        } else if(typeof obj2[obj2key] == "object") {
                            obj1[obj2key] = extendObj({}, value);
                            //否则，像之前那样复制该值
                        } else {
                            obj1[obj2key] = value;
                        }
                    }
                }
                return obj1;
            }

当希望能够快速地直接从一个对象把一组属性和方法应用至另一对象，或应用至一个“类”以供它所有对象实例使用，而不需要借助复杂的子类和继承来实现时，使用掺和模式最为合适。

 

6.7　　模块模式

模块（module）模式可能是专业JavaScript开发者使用最为普遍的一个模式。事实上，在之前的章节我已经两次介绍过这种模式的基础。第一次是在第1章讨论public、private和Protected变量时介绍的，而第二次是在第4章讨论提高JavaScript代码压缩程度的方法时介绍的。这都基于自执行函数闭包，它使得我们可以建立一个代码的安全沙箱区域，在其中可以访问全局变量和函数，但不会把在它里面声明的变量和函数暴露给它周围的作用域，触发是明确地使用return语句。

一个自执行函数的最简单例子如下所示：

 (function(){ //在此函数内声明的任何变量和函数都不能在它的外部进行访问 }()); 

我们可以使用此模式来把我们的代码库划分为若干更小的、相关联的代码块，我们称之为模块。模块模式因此得名。每一个这样的模块要明确列出对代码的其他部分的依赖（如果有的话）、此依赖要作为参数传入该函数，如下所示：

  (function($){ //我们非常明确地声明jQuery作为module的依赖，使得jQuery可以在内部通过$变量进行访问 }(jQuery)); 

提示：访问函数内的JavaScript参数要快于访问在该函数作用域之外的全局变量，因为语言解释器不需要实施额外的步骤来离开当前函数的作用域去搜寻变量。

模块模式的基本形式是通过在函数闭包内使用return语句来返回所声明的代码来最终完成的。这些代码可被其他模块使用，也可由主应用程序本身使用。代码清单6-12展示了模块模式的完整形式，它基于第5章中的代码清单5-10。

代码清单6-12　　模块模式

 

            //模块模式是很有特色的，它综合使用了自执行的匿名函数闭包、作为参数传入的依赖，以及一个可选的return语句，
            //此语句可使得在闭包中所编写的代码能够在外部进行访问
            
            //这里的唯一一项依赖是document对象，在它当中包含有浏览器的cookie数据。作为一项附加的安全措施，我们
            //可以使用一个明明为undefined的末位参数，但我们从不会向其中传入值。假如我们确实是不向该参数传入值的，
            //此做法可确保该命名为undefined的变量总会包含着值undefined（这个值就是undefined，而不是指未定义的值）。
            //不然无论是出于而已还是其他原因，其他代码都有可能会重写该值（因为undefined不是JavaScript语言的保留关键字），
            //从而引发各种方式来破坏代码的正常行为
            
            var cookie=(function(document,undefined){
                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将通过cookie变量
                //暴露出以下两个方法，完成单例的创建
                return {
                    get:function(name){
                        return cookies[name]||"";
                    },
                    set:function(name,value){
                        cookies[name]=value;
                        document.cookie=escape(name)+"="+escape(value);
                    }
                };
            //在函数执行的时刻传入所有依赖
            }(document));

在通过单例对象结构来实现命名空间的较大型代码库中，模块模式的使用方式与我们之前所见的稍有不同。在这种情况下,我们把依赖传入，然后在该函数闭包的最后返回经处理的依赖，使用模块来为单例增加新的属性和方法。代码清单6-13展示了如何应用模块模式来为命名空间增加内容，这是该模式的最常见用法之一。

代码清单6-13 使用模块模式增加命名空间

            //定义一个命名空间，我们将会把一些代码模块放入此命名空间
            var myData={};
            
            //这是Ajax模块，我们通过添加的方式将其加入到myData命名空间
            //命名空间是作为参数传入的。一旦该命名空间被加入了新的方法，最后就返回此命名空间，使用此新的、
            //增加了新的内容的命名空间重写原来的命名空间
            myData=(function(myNamespace,undefined){
                //往命名空间加入一个ajax对象属性，并使用相关方法充实该属性
                myNamespace.ajax={
                    get:function(url,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("GET",url);
                        xhr.send();
                    }
                };
                //返回该新的、增加了新内容的命名空间至myData变量
                return myNamespace;
            //我们可以使用以下保障机制，如果该myData命名空间对象尚不存在，则使用一个空对象。当你在一个大的命名
            //空间下使用分散在多个文件下的多个模块，而且你又不确定所传入的命名空间是否在之前的其他地方已经被
            //初始化过时，这种方法将很有帮助的
            }(myData||{}));
            
            
            //这是Cookie模块，我们通过添加的方式将其加入到myData命名空间和之前一样
            //把命名空间传进来，增加内容，然后返回，重写原来的命名空间对象，此时，
            //myData命名空间已包含了Ajax模块代码
            myData=(function(myNamespace,undefined){
                //往命名空间加入一个cookies对象属性，并使用相关方法充实该属性
                myNamespace.cookies={
                    get:function(name){
                        var output="",
                            escapedName=escape(name),
                            start=document.cookie.indexOf(escapedName+"="),
                            end=document.cookie.indexOf(";",start);
                        end=end===1?(document.cookie.length-1):end;
                        if(start>=0){
                            output=document.cookie.substring(start+escapedName.length+1,end);
                        }
                        return unescape(output);
                    },
                    set:function(name,value){
                        document.cookie=escape(name)+"="+escape(value);
                    }
                };
                return myNamespace;
            }(myData||{}));
            //直接通过myData命名空间对象来执行相关方法。现在，myData命名空间对象包含有Ajax和Cookies模块
            myData.ajax.get("/user/12345",function(response){
                alert("HTTP GET response received.User data:"+response);
            });
            myData.cookies.set("company","AKQA");
            myData.cookies.set("name","wing");
            
            myData.cookies.get("company");//AKQA
            myData.cookies.get("name");//wing

当希望把大型的代码库分解为更小的，更易管理的、自我包含的多个组成部分，而每部分有明确的依赖项，每部分有清晰定义的使用目的时，使用模块模式最为合适。因为它们的沙箱特性，它们的自我执行函数代码块同时也是通过混淆和缩编来生成更小的文件的主要代码（自执行函数代码块中的内容可以更大程度地被混淆、缩编），此话题我们是在第4章讨论的。在第9章，我们将学习一个代替的方法，即使用异步模块定义（Asynchronous Module Defintion，简称AMD）来为JavaScript代码定义和加载模块。

 更多内容：http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

6.8　　代理模式

代理（proxy）模式是通过定义一个代理（或替身）对象或方法来替换或增强一个已经存在的对象或方法，以提升其性能或增加额外的功能，但又不影响已经使用了该对象或方法的其余部分代码。我和许多专业JavaScript开发者使用该模式的最普遍方式是对一个已经存在的方法或函数进行包装，但不改变方法或函数的名称，如代码清单6-14所示。

代码清单6-14　　代理模式

 

//为了对代码清单6-13中的myData.cookies.get()方法实现代理，我们先把当前方法保存在一个变量中
            var proxiedGet = myData.cookies.get;
            //使用一个新函数来重写get()方法,对原来的方法实现代理并增加它的行为
            myData.cookies.get = function() {
                //调用被代理(原来的)方法来获取它可能产生的值
                var value = prefixes.apply(this.arguments);
                //对被代理的方法所返回的值实施某种操作
                value = value.toUpperCase();
                //对于实施了某种操作后的值，其类型要与被代理方法相同。使用该值作为返回值，则该新方法的使用就不会影响到原有的对该方法的调用
                return value;
            }
            //代理模式的一个变体被称为虚拟代理（virtual proxy），通过延迟对象的实例化时间（这样构造函数的执行就会推迟），直至对象实例中的某个方法被真正调用之时，如代码清单6-15所示。

代码清单6-15 虚拟代理模式

            //定义一个“类”，用于构建一个对象，来表示一个简单表单域
            function FormField(type, displayText) {
                this.type = type || "text";
                this.displayText = displayText || "";

                //创建并初始化一个表单域的DOM元素
                this.element = document.createElement("input");
                this.element.setAttribute("type", this.type);
                this.element.setAttribute("placeholder", this.displayText);
            }
            //定义2个方法以供对象实例来继承
            FormField.prototype = {
                getElement: function() {
                    return this.element;
                },
                isValid: function() {
                    return this.element.value !== "";
                }
            };
            //现在，使用实现了相同方法的代理来替换FormField“类”。它会延迟调用原来的构造函数，直至这些方法被真正调用。
            //这样，节省了内存资源并提升了性能
            //根据需要，可使用模块模式来使代理“类”的作用域实现局部化，传入原来的FormField“类”并返回它所经过的代理的版本
            FormField = (function(FormField) {
                //定义代理构造函数，类似于原来的FormField“类”
                function FormFieldProxy(type, displayText) {
                    this.type = type;
                    this.displayText = displayText;
                }
                FormFieldProxy.prototype = {
                    //定义一个属性，用于在原来的“类”被实例化之后，保存对该实例的引用
                    formField: null,
                    //定义一个新的initialize方法、用于在FormFiled的对象实例尚未存在时执行原来的“类”的构造函数，以创建出该对象实例
                    initialize: function() {
                        if(!this.formField) {
                            this.formField = new FormField(this.type, this.displayText);
                        }
                    },

                    //使用一些新方法对原来的各个方法进行代理、只有当这些新方法当中某一个被调用时，才会调用initialize()方法来实例化FormField“类”
                    getElement: function() {
                        this.initialize();
                        return this.formField.getElemengt();
                    },
                    isValid: function() {
                        this.initialize();
                        return this.formField.isValid();
                    }
                };
                //返回该代理“类”，替换原来的“类”
                return FormFieldProxy;
            }(FormField));
            //创建2个对象实例。它们实际调用的都是代理“类”而不是原来的“类”。这意味着，在此阶段，DOM元素并不会被创建，
            //这样便节省了内存占用并提升了性能
            var textField=new FormField("text","Enter the first line of your address"),
                emailField=new FormField("email","Enter your email address");
            //当页面完成加载时，把保存在这些对象中的元素添加至当前页面。getElement()方法在此时被调用。它首先调用initialize()，然后创建原来的“类”的实例并执行该“类”的构造函数。
            //此函数才是真正实施DOM元素创建过程的函数。此做法确保了用作保存DOM元素的内存只在需要使用该元素的确切时刻才被占用
//            window.addEventListener("load",function(){
//                document.body.appendChild(textField.getElemengt());
//                document.body.appendChild(emailField.getElemengt());
//            },false);
            //从代理中执行另一个方法。此时，原来的“类”的对象实例将不会被再次创建，而是会使用所保存的实例
            alert(emailField.isValid());

通过延迟调用或为那些可能会在同一时间发出多个调用（比如Ajax请求或其他网络相关的调用）的对象进行调用组合，我们可以扩展代理模式，进一步提升性能并减少内存占用。
当需要重写某对象或“类”上的特定方法的行为，或者重写方法以提升某个已有的“类”的性能，使得直至该“类”的方法被调用时才真正对该“类”进行实例化时，使用代理模式最为合适。