JS设计模式

1、各模式概念与实现方式举例（针对js而言）

1.1单例模式

概念：单例是一个实例，不能再拿去生成实例。单例只被执行一次，最终就是一个{}。

示例：

a是一个单例,创建它的方式如：

var a={} var a=new Object(); var a=function(){return  {}}(); var a=(function(){return {}})();

最终，a只在创建过程中被执行了一次，不管是以对象字面的形式还是new还是renturn {}的形式创建，它都已经被实例化一次，即它就是一个实例，不能再被实例化。

 

1.2工厂模式

概念：返回实例，返回的这些实例具有一些共同的属性，但他们又有各自特定的一些属性。

示例：

先说一个不通过工厂造自行车而是自己造自行车的自行车商店主的例子。

 

他想开几个自行车商店，每种店都有几种型号的自行车出售，卖出不同的自行车给顾客。

用下面的代码来讲就是通过用构造函数BicycleShop去new出来的一系列实例，即开了几个互相独立的自行车商店。根据传入的自行车类型model不同，return 不同的bicycle实例，然后就可以使用bicycle的一系列方法。

var BicycleShop=function(){}; var speed=function(){};//速度型自行车 var low=function(){};//低速型自行车 var comfort=function(){};//舒适型自行车 speed.prototype={ shache:function(){/*刹车*/},     tiaodang:function(){/*调档位*/},     ride:function(){/*骑车*/}   }; //low,comfort的prototype里面和speed不一样的功能    BicycleShop.prototype={ sellBicycle:function(model){ //根据传如的model不同，最后调用sellBicycle时，返回不同的bicycle。         var bicycle;         switch (model){             case 'speed':                 bicycle=new speed();                 break;             case 'low':                 bicycle=new low();                 break;             case 'comfort':                 bicycle=new comfort();                 break;             default :                 bicycle=new comfort();         }         return bicycle;     } };    Var shop=new BicycleShop();//开一个商店——小白的焦点管理器，每个页面去new一个独立的实例。 Var bike=shop.sellBicycle(‘speed’);//传入想要的自行车类型——类似焦点管理器里传入页面的名称，有了页面单独对象 bike.ride();//拿到自行车，开始使用自行车的某种功能——每个页面开始使用焦点管理器的某种功能

但是当想要添加一款新型的车时，比如老人专用型的，就要在switch里面去添加，这使得BicycleShop的代码会不断的因为加入新车型而变得冗杂庞大，实际商店本身不是造车的，只是卖车的。应该把车型管理和生产交给一个专门工厂，商店只需要进货就行，而不是去生产。

建造一个自行车工厂，集中管理车的型号，要添加新类型时，在工厂里添加

var BicycleFactory={     createBicycle:function(model){         var bicycle;         switch (model){             case 'speed':                 bicycle=new speed();                 break;             case 'low':                 bicycle=new low();                 break;             case 'comfort':                 bicycle=new comfort();                 break;             default :                 bicycle=new comfort();         }        bicycle.logo=’aaa’;//车子由哪个厂生产，从这个厂造出去的车都有的属性         return bicycle;     } };

商店只是进货：

BicycleShop.prototype={     sellBicycle:function(model){         var bicycle;         bicycle=BicycleFactory.createBicycle(model);         return bicycle;     } };

1.3观察者模式

概念：观察者对被观察者进行观察，当被观察状态发生改变，被观察者告诉观察者它的状态改变了，观察者得到通知做出一定反应。

示例：

前提：观察者与被观察者这两个对象和它们的方法（传递消息或者处理消息）已经就位，如下图。

消息机制：在充值页面注册一个观察者观察充值结果状态，当充值成功，结果页的被观察者通知充值成功，触发观察者监听的这个事件，观察者根据被观察者传回的消息，知道充值成功了，然后在回调里面做一些事情：

user_recharge.add_event("recharge_success", function (data)         {             //处理接收到被观察者传来的消息         });

在充值结果页面注册一个被观察者：

pay_result_page.dis_event('recharge_success',data);

当充值成功，调用dis_event的时候就会触发已经在充值页面注册的add_event事件，然后把data传给回调函数，让观察者处理数据。

具体触发过程：

注册了这个事件的还有个人中心页面，在recharge_success的obj里有个人中心这个页面对象，也就是说，一个事件可以有多个监听者。

 

2、各模式优缺点与使用场景以及在项目中的使用

2.1单例模式

优点：省内存，公用性强，唯一。

缺点：定制化弱，线程安全问题（多线程时，多个同时用它）。

应用场景：

（1）可以用来划分命名空间，比如：

方法或者属性放在对象（单例）下，可以避免全局变量再次声明相同的名字而不小心重写了这个属性或者方法。

（2）特殊用途的js文件，只存在一个全局对象（单例），把有一定关联的方法或者属性挂在这个对象上方便分类管理你的代码。

 

2.2工厂模式

优点：复杂体系流程化，减少代码量，减少工作量。

缺点：找不到在哪个方法从哪里来的。

应用场景：在复杂的体系中提出公用的方法或者属性。

 

2.3观察者模式

优点：解耦。

缺点：不好维护，不安全，加载时间有额外的开销。

应用场景：自定义事件。

项目中的应用：如河北广电里的dis_event与add_event事件驱动机制。

 

3、观察者与事件机制关系：

3.1 事件监听器与事件处理器的区别

事件处理器：把事件传给与之关联的函数，一种事件只能指定一个回调方法。

事件监听器：一个事件可与多个监听器关联，每个监听器独立于其他监听器而改变。

 

3.2观察者与事件机制关系：

事件监听器是内置的观察者，1对多的关系，一个事件可与多个监听器关联。

 

4、工厂模式与构造函数：

没有关系

5、单例如何封装私有属性，方法：

闭包。

示例：

crop=(function() {要修改属性默认的特性，必须使用 ECMAScript 5 的 Object.defineProperty()方法 function s1(){return 1}, fucntion s2(){return 2}, return{ s3:function(){ var a=s1()+ts2();//s1,s2为单例的私有方法，仅供内部使用，也只有从内部才能访问到 } })()

 

6、单例如何做到纯常量属性（即不可更改）：

使用 ECMAScript 5 的 Object.defineProperty()方法。

示例：

var person = {}; Object.defineProperty(person, "name", { writable: false,//将person的name属性设置为不可写 value: "Nicholas"//值设置为Nicholas }); alert(person.name); //"Nicholas" person.name = "Greg"; alert(person.name); //"Nicholas"

 

 

7、观察者与异步编程：

异步编程中的定时器或者ajax用到了观察者思想。

8、工厂与实例：

实例由工厂生成。