JavaScript设计模式深入分析(1)(2)

继承：继承本身就是一个抽象的话题，在JavaScript中继承更是一个复杂的话题，因为JavaScript想要实现继承有两种实现方式，分别是类式继承和原型式继承，每种实现的方式都需要采取不少措施，下面本人通过分析例子的方式讲解JavaScript中这个很重要的话题。

　/* -- 类式继承 -- */ 
 //先声明一个超类  
 function Person(name){  
 this.name = name;  
 }  
 //给这个超类的原型对象上添加方法 getName   
 Person.prototype.getName = function(){  
    return this.name;  
 }  
 //实例化这个超类  
 var a = new Person('Darren1')  
 alert(a.getName());  
 //再声明类  
 function Programmer(name,sex){  
    //这个类中要调用超类Person的构造函数，并将参数name传给它  
    Person.call(this,name);  
    this.sex = sex;  
 }  
 //这个子类的原型对象等于超类的实例  
 Programmer.prototype = new Person();  
 //因为子类的原型对象等于超类的实例，所以prototype.constructor这个方法也等于超类构造函数，你可以自己测试一下，如果没这一步，alert(Programmer.prototype.constructor)，这个是Person超类的引用，所以要从新赋值为自己本身  
 Programmer.prototype.constructor = Programmer;  
 //子类本身添加了getSex 方法  
 Programmer.prototype.getSex = function(){  
    return this.sex;  
 }  
 //实例化这个子类  
 var _m = new Programmer('Darren2','male');  
 //自身的方法  
 alert(_m.getSex());  
 //继承超类的方法  
alert(_m.getName()); 

代码都不难，只要对 原型链 有基础就能理解。类式继承模式是JavaScript继承主要的模式，几乎所有用面向对象方式编写的JavaScript代码中都用到了这种继承，又因为在各种流行语言中只有JavaScript使用原型式继承，因此最好还是使用类式继承。可是要熟悉JavaScript语言，原型继承也是我们必须所了解的，至于在项目中是否使用就得看个人编码风格了。

　/* -- 原型式继承 -- */ 
 //clone()函数用来创建新的类Person对象  
 var clone = function(obj){  
    var _f = function(){};  
    //这句是原型式继承最核心的地方，函数的原型对象为对象字面量  
    _f.prototype = obj;   
    return new _f;  
 }  
 //先声明一个对象字面量  
 var Person = {  
    name:'Darren',  
    getName:function(){  
       return this.name;  
    }  
 }  
 //不需要定义一个Person的子类，只要执行一次克隆即可  
 var Programmer = clone(Person);  
 //可以直接获得Person提供的默认值，也可以添加或者修改属性和方法  
 alert(Programmer.getName())  
 Programmer.name = 'Darren2' 
 alert(Programmer.getName())  
   
 //声明子类,执行一次克隆即可  
 var Someone = clone(Programmer); 

JavaScript设计模式的作用 - 提高代码的重用性，可读性，使代码更容易的维护和扩展。

1.单体模式，工厂模式，桥梁模式个人认为这个一个优秀前端必须掌握的模式，对抽象编程和接口编程都非常有好处。

2.装饰者模式和组合模式有很多相似的地方，它们都与所包装的对象实现同样的接口并且会把任何方法的调用传递给这些对象。装饰者模式和组合模式是本人描述的较吃力的两个模式，我个人其实也没用过，所以查了很多相关资料和文档，请大家海涵。

3.门面模式是个非常有意思的模式，几乎所有的JavaScript库都会用到这个模式，假如你有逆向思维或者逆向编程的经验，你会更容易理解这个模式(听起来有挑战，其实一接触你就知道这是个很简单的模式);还有配置器模式得和门面模式一块拿来说，这个模式对现有接口进行包装，合理运用可以很多程度上提高开发效率。这两个模式有相似的地方，所以一块理解的话相信都会很快上手的。

4.享元模式是一种以优化为目的的模式。

5.代理模式主要用于控制对象的访问，包括推迟对其创建需要耗用大量计算资源的类得实例化。

6.观察者模式用于对对象的状态进行观察，并且当它发生变化时能得到通知的方法。用于让对象对事件进行监听以便对其作出响应。观察者模式也被称为“订阅者模式”。

7.命令模式是对方法调用进行封装的方式，用命名模式可以对方法调用进行参数化和传递，然后在需要的时候再加以执行。

8.职责链模式用来消除请求的发送者和接收者之间的耦合。

JavaScript设计模式都有哪些?

单体(Singleton)模式： 绝对是JavaScript中最基本最有用的模式。

单体在JavaScript的有多种用途，它用来划分命名空间。可以减少网页中全局变量的数量(在网页中使用全局变量有风险);可以在多人开发时避免代码的冲突(使用合理的命名空间)等等。

在中小型项目或者功能中，单体可以用作命名空间把自己的代码组织在一个全局变量名下;在稍大或者复杂的功能中，单体可以用来把相关代码组织在一起以便日后好维护。

使用单体的方法就是用一个命名空间包含自己的所有代码的全局对象，示例：

var functionGroup = {  
 name:'Darren',  
 method1:function(){  
 //code  
 },  
 init:function(){  
 //code  
 }  
 } 

或者

var functionGroup  = new function myGroup(){  
 this.name = 'Darren';  
 this.getName = function(){  
 return this.name  
 }  
 this.method1 = function(){}  
 ...  
 } 

工厂(Factory)模式：提供一个创建一系列相关或相互依赖对象的接口，而无需指定他们具体的类。

工厂就是把成员对象的创建工作转交给一个外部对象，好处在于消除对象之间的耦合(何为耦合?就是相互影响)。通过使用工厂方法而不是new关键字及具体类，可以把所有实例化的代码都集中在一个位置，有助于创建模块化的代码，这才是工厂模式的目的和优势。

举个例子：你有一个大的功能要做，其中有一部分是要考虑扩展性的，那么这部分代码就可以考虑抽象出来，当做一个全新的对象做处理。好处就是将来扩展的时候容易维护 - 只需要操作这个对象内部方法和属性，达到了动态实现的目的。非常有名的一个示例 - XHR工厂：

var XMLHttpFactory = function(){};//这是一个简单工厂模式  
 XMLHttpFactory.createXMLHttp = function(){  
 var XMLHttp = null;  
 if (window.XMLHttpRequest){  
 XMLHttp = new XMLHttpRequest()  
 }else if (window.ActiveXObject){  
 XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")  
 }  
 return XMLHttp;  
 }  
 //XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。  
 var AjaxHander = function(){  
 var XMLHttp = XMLHttpFactory.createXMLHttp();  
 ...  
 } 

工厂模式又区分简单工厂模式和抽象工厂模式，上面介绍的是简单工厂模式，这种模式用的更多也更简单易用。抽象工厂模式的使用方法就是 - 先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的扩展实现工厂方法。 示例：

var XMLHttpFactory = function(){};　     //这是一个抽象工厂模式  
 XMLHttpFactory.prototype = {  
    //如果真的要调用这个方法会抛出一个错误，它不能被实例化，只能用来派生子类  
    createFactory:function(){  
       throw new Error('This is an abstract class');  
    }  
 }  
//派生子类，文章开始处有基础介绍那有讲解继承的模式，不明白可以去参考原理  
 var XHRHandler = function(){  
    XMLHttpFactory.call(this);  
 };  
XHRHandler.prototype = new XMLHttpFactory();  
 XHRHandler.prototype.constructor = XHRHandler;  
 //重新定义createFactory 方法  
 XHRHandler.prototype.createFactory = function(){  
    var XMLHttp = null;  
    if (window.XMLHttpRequest){  
       XMLHttp = new XMLHttpRequest()  
    }else if (window.ActiveXObject){  
       XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")  
    }  
    return XMLHttp;  
 }