转载

JavaScript设计模式（一）

什么是模式

前阵子准备期末考试，劳神又伤身的，实在闲不得空来更新文章，今天和大家说说 javascript 中的设计模式。

首先呢，我们需要知道的是： 模式 是一种可复用的解决方案，而 反模式 呢就是针对某个问题的不良解决方案。

js反模式常见例子

向 setTimeout 和 setInterval 传递字符串，而不是函数，这会触发 eval() 的内部使用。
在全局上下文中定义大量的变量污染全局命名空间
修改 Object 类的原型
以内联形式使用 js ，嵌入在HTML文件中的 js 代码是无法包含在外部单元测试工具中的。
滥用 document.write ，如果在页面加载完成后执行 docume.write ，它会重写我们所在的页面，可以使用 document.creatElement 代替的话就尽量不用 docume.write 。

设计模式的类别

1. 创建型设计模式

创建型设计模式专注于处理对象创建机制，以适合给定情况的方式来创建对象。属于这个类别的属性包括：

Constructor构造器、Factory工厂、Abstract抽象、Prototype原型、Singleton单例和Builder生成器

结构型设计模式

结构型模式与对象组合有关，通常可以用于找出在不同对象之间建立关系的简单方法。属于这个类别的模式包括：

Decorator装饰者、Facade外观、Flyweight享元、Adapter适配器和Proxy代理

行为设计模式

行为模式专注于改善或简化系统中不同对象之间的通信。

行为模式包括：

Iterator迭代器、Mediator中介者、Observer观察者和Visitor访问者

Factory(工厂)模式

为了解决多个类似对象声明的问题，我们可以使用一种叫做 工厂模式 的方法，这种方法就是为了解决 实例化对象 产生大量重复的问题。

<script type="text/javascript">  function createObject(name,age,profession){//集中实例化的函数   var obj = new Object();   obj.name = name;   obj.age = age;   obj.profession = profession;   obj.move = function () {    return this.name + ' at ' + this.age + ' engaged in ' + this.profession;   };  }  var test1 = createObject('trigkit4',22,'programmer');//第一个实例  var test2 = createObject('mike',25,'engineer');//第二个实例  alert(test1.move());  alert(test2.move()); </script>

工厂模式解决了重复实例化的问题 ,但还有一个问题,那就是识别问题,因为根本无法搞清楚他们到底是哪个对象的实例。

alert(typeof test1); //Object  alert(test1 instanceof Object); //true

何时使用工厂模式？

Factory 模式主要在以下场景使用：

当对象或组件涉及高复杂性时
当需要根据所在的不同环境轻松生成对象的不同实例时
当处理很多共享相同属性的小型对象或组件时

Constructor(构造器)模式

ECMAScript 中可以采用构造函数(构造方法)可用来创建特定的对象。该模式正好可以解决以上的工厂模式无法识别对象实例的问题。

<script type="text/javascript">  function Car(model,year,miles){//构造函数模式   this.model = model;   this.year = year;   this.miles = miles;   this.run = function () {    return this.model + " has done " + this.miles + "miles";   }  }  var Benz = new Car('Benz',2014,20000);  var BMW = new Car("BMW",2013,12000);  alert(Benz instanceof Car); //很清晰的识别他从属于 Car,true  console.log(Benz.run());  console.log(BMW.run()); </script>

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：

1.构造函数方法没有显示的创建对象 (new Object());  2.直接将属性和方法赋值给 this 对象; 3.没有 renturn 语句。

构造函数的方法有一些规范:

1.函数名和实例化构造名相同且大写, (PS:非强制,但这么写有助于区分构造函数和 普通函数); 2.通过构造函数创建对象,必须使用 new 运算符。

既然通过构造函数可以创建对象，那么这个对象是哪里来的， new Object() 在什么地方执行了？执行的过程如下:

1.当使用了构造函数,并且 new 构造函数(),那么就后台执行了 new Object(); 2.将构造函数的作用域给新对象 ，(即 new Object()创建出的对象)，而函数体内的 this 就 代表 new Object()出来的对象。 3.执行构造函数内的代码；  4.返回新对象(后台直接返回)。

带原型的Constructor(构造器)

js 中有一个名为 prototype 的属性。调用 js 构造器创建一个对象后，新对象就会具有构造器原型的所有属性。通过这种方式，可以创建多个 Car 对象，并访问相同的原型。

   <script type="text/javascript">  function Car(model,year,miles) {      this.model = model;      this.year = year;      this.miles = miles;  }  Car.prototype.run = function () {      return this.model + " has done " + this.miles + " miles ";  };  var Benz = new Car('S350',2010,20000);  var Ford = new Car('Ford',2012,12000);  console.log(Benz.run());//"S350 has done 20000 miles "  console.log(Ford.run());     </script>

现在 run() 的单一实例就能够在所有Car对象之间共享。

正文到此结束