设计模式
前言：
面向对象的语言有一个标志，那就是它们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScript中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。
ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数”。这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样，可以把ECMAScript的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。
每个对象都是基于一个引用类型创建的，这个引用类型可以是原生类型，也可以是开发人员定义的类型。
创建对象
1、 原始方法
创建自定义对象最简单的方式就是创建一个Object的实例，然后再为它添加属性和方法，如下所示：
var person = new Object();
person.name = "xuguojun";
person.age = 24;
person.job = "前端工程师";
person.sayName = function(){
alert(this.name);
}上面的例子创建了一个名为person的对象，并为它添加了三个属性(name、age和job)和一个方法(sayName())。早期的时候经常使用这个模式创建新对象。几年后，对象字面量成为创建这种对象的首选。前面的例子用对象字面量语法可以写成这样：
var person = {
name: "xuguojun",
age: 24,
job: "前端工程师",
sayName: function(){
alert(this.name);
}
};这个例子中的person对象与前面例子中的person对象是一样的，都有相同的属性和方法。这些属性在创建时都带有一些特征值，JavaScript通过这些特征值来定义它们的行为。
虽然Object构造函数或对象字面量都可以用来创建代码，但这些方式有一个明显的缺点：使用同一个接口创建很多对象，因为初始化的值都是一致的会，所以会创建很多相似的对象，每个实例对象没有自己的特性，会产生大量的重复代码。
2、 工厂模式
工厂模式抽象了创建具体对象的过程，考虑到ECMAScript中无法创建类，开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节。其实现方法非常简单，也就是在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可，如下所示：
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Andy",29,"前端工程师");
var person2 = createPerson("xuguojun",24,"后端工程师");函数createPerson()能够根据接受的参数来构建一个包含所有必要信息的person对象。可以无数次地调用这个函数，而每次它都会返回一个包含三个属性一个方法的对象。
工厂模式解决了创建多个相似对象的问题，但是工厂模式却无从识别对象的类型，因为全部都是Object，不像Date、Array等，因此出现了构造函数模式。
3、 构造函数模式
ECMAScript中的构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中。此外，也可以创建自定义的构造函数，从而定义自定义对象类型的属性和方法。例如，可以使用构造函数模式将前面的例子重写如下：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Andy",29,"前端工程师");
var person2 = new Person("xuguojun",24,"后端工程师");
console.log(person1 instanceof Person); // true， 判断person1是否是Person的实例，即解决了工厂模式中不能识别对象的类型的问题这个例子与工厂模式中除了函数名不同以外，还有以下不同之处：
- 函数名首写字母为大写（虽然标准没有严格规定首写字母为大写，但按照惯例，构造函数的首写字母用大写）
- 没有显示的创建对象，直接将属性和方法赋值给了this对象
- 没有return语句
- 使用new创建对象
- 能够识别对象（这正是构造函数模式胜于工厂模式的地方）
函数名Person之所以使用的是大写字母P，是因为按照惯例构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。主要是为了区别于ECMAScript中的其他函数，因为构造函数本身也是函数，只不过可以用来创建对象而已。
构造函数与其他函数的唯一区别，就在于调用它们的方式不同。任何函数只要通过new操作符调用，那它就可以作为构造函数；而任何函数，如果不通过new操作符来调用，那它跟普通函数一样。
当使用new操作符调用构造函数时，会经历以下四个步骤：
- 创建一个新对象;
- 将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
- 执行构造函数中的代码(新对象初始化，为这个新对象添加属性)
- 返回新对象
构造函数虽然好用，但也并非没有缺点，使用构造函数的最大的问题在于每次创建实例的时候都要重新创建一次方法（理论上每次创建对象的时候对象的属性均不同，而对象的方法是相同的），然而创建两次完全相同的方法是没有必要的，因此，我们可以将函数移到对象外面。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
alert(this.name);
}
var person1 = new Person("Andy",29,"前端工程师");
var person2 = new Person("xuguojun",24,"后端工程师");我们将sayName设置成全局函数，这样一来person1与person2访问的都是同一个函数，可是问题又来了，在全局作用域中定义了一个实际只想让Person 使用的函数，显示让全局作用域有些名副其实，更让人无法接受的是如果对象需要定义很多方法，那么就要定义很多个全局函数 ，那么这个自定义的引用类型就毫无封装性可言，因此可以通过原型来解决此问题。
4、 原型模式
我们创建的每个函数都有prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以把这些信息直接添加到原型对象中。
function Person(){
}
Person.prototype.name = "xuguojun";
Person.prototype.age = 24;
Person.prototype.job = "前端工程师";
Person.prototype.sayName = function() {
alert(this.name);
}
var person1 = new Person();
person1.sayName(); //"xuguojun"
var person2 = new Person();
person2.sayName(); //"xuguojun"
alert(person1.sayName == person2.sayName); //true原型模式也不是没有缺点，首先，它省略了构造函数传递初始化参数这一环节，结果所有实例在默认情况下都取得了相同的属性值，这样非常不方便。但这还是不是原型的最大问题，原型模式的最大问题在于共享的本性所导致的。
由于共享的本性，对于那些包含基本类型值的属性倒还好，毕竟通过在实例上添加一个同名属性，可以隐藏原型中的对应属性；可如果属性值是引用类型的话，问题就比较突出了，因为如果一个实例修改了引用，则修改会在另一个实例中反映出来，如下所示：
function Person(){
}
Person.prototype.name = "xuguojun";
Person.prototype.age = 24;
Person.prototype.job = "前端工程师";
Person.prototype.friends = ['Andy','Alen']
Person.prototype.sayName = function() {
alert(this.name);
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push('Tom');
alert(person1.friends); //Andy, Alen, Tom
alert(person2.friends); //Andy, Alen, Tom
alert(person1.friends == person2.friends); //true因此我们通常不单独使用原型，而是结合原型模式与构造函数模式。
5、 混合模式(原型模式 + 构造函数模式)
创建自定义对象类型的最常见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享者着对方法的引用，最大限度的节省了内存。另外，这种模式还支持向构造函数传递参数。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ['Andy','Alen'];
}
Person.prototype = {
constructor : Person,
sayName : function() {
alert(this.name);
}
}
var person1 = new Person("xuguojun",24,"前端工程师");
var person2 = new Person("Grry",25,"后端工程师");
person1.friends.push('vivian');
alert(person1.friends); //Andy,Alen,vivian
alert(person2.friends); //Andy,Alen
alert(person1.friends == person2.friends); //false
alert(person1.sayName == person2.sayName); //true这种构造函数与原型混成的模式，是目前在ECMAScript中是使用最广泛、认同度最高的一种创建自定义对象的方法。可以说，这是用来定义引用类型的一种默认模式。
6、 单例模式
在传统开发工程师眼里，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。
var People = (function(){
var instance;
function init(name) {
return {
name:name
};
}
return {
createPeople: function(name) {
if (!instance) {
instance = init(name);
}
return instance;
}
};
}());
People.createPeople('xuguojun'); //{name:'xuguojun'}
People.createPeople('Andy'); //{name:'xuguojun'}单例模式实例：
实现功能：每次点击按钮1和按钮2，都会加1，值在对应按钮下面的result is显示；当点击完按钮1在点击按钮2时，会在按钮1值的基础上加1，值在按钮2下面的result is显示，反过来亦是如此。
7、 模块模式
现在web工程中，javascript所占的比重越来越多。越来越重要。相应的，前台所写的代码也越来越多。代码约多，就越不好管理，一个项目中多人开发，如果出现同名的变量怎么办?这就需要我们的模块模式。
模块是任何强大应用程序架构中不可或缺的一部分，它通常能够帮我们清晰的分离和组织项目中的代码单元。模块模式的思路是为对象添加私有变量和私有方法，同时又要减少全局变量的使用。
var Person = (function() {
// 创建私有变量
var name = "xuguojun";
// 创建私有函数
function sayName() {
console.log(name);
};
// 返回一个对象包含公有方法和属性
return {
name: name,
sayName: sayName
}
})()模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部，先定义了私有变量和函数，供内部函数使用，然后将一个对象字面量作为函数的值返回，返回的对象字面量中只包含可以公开的属性和方法。这样的话，可以提供外部使用该方法；由于该返回对象中的公有方法是在匿名函数内部定义的，因此它可以访问内部的私有变量和函数。
什么时候使用模块模式？
如果我们必须创建一个对象并以某些数据进行初始化，同时还要公开一些能够访问这些私有数据的方法，那么我们这个时候就可以使用模块模式了。
增强的模块模式：
增强的模块模式的使用场合是：适合那些单列必须是某种类型的实例，同时还必须添加某些属性或方法对其加以增强的情况。比如如下代码：
function CustomType() {
this.name = "tugenhua";
};
CustomType.prototype.getName = function(){
return this.name;
}
var application = (function(){
// 定义私有变量
var privateA = "aa";
// 定义私有函数
function A(){};
// 实例化一个对象后，返回该实例，然后为该实例增加一些公有属性和方法
var object = new CustomType();
// 添加公有属性
object.A = "aa";
// 添加公有方法
object.B = function(){
return privateA;
}
// 返回该对象
return object;
})();打印下application对象：
image.png
继续打印该公有属性和方法如下：
console.log(application.A);// aa
console.log(application.B()); // aa
console.log(application.name); // tugenhua
console.log(application.getName());// tugenhua8、 发布订阅模式
发布订阅模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式，只要我们曾经在 DOM 节点上面绑定过事件函数，那我们就曾经使用过发布订阅模式。
发布订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。比如,我们可以订阅 ajax 请求的 error 、 succ 等事件。 或者如果想在动画的每一帧完成之后做一些事情,那我们可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式,我们就无需过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点。
发布订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要任何修改;同样发布者需要改变时,也不会影响到之前的订阅者。只要之前约定的事件名没有变化,就可以自由地改变它们。
var EventCenter = (function(){
var events = {};
function on(evt, handler){
events[evt] = events[evt] || [];
events[evt].push({
handler: handler
});
}
function fire(evt, args){
if(!events[evt]){
return;
}
for(var i=0; i<events[evt].length; i++){
events[evt][i].handler(args);
}
}
function off(name) {
delete events[name];
}
return {
on: on, // 订阅
fire: fire, // 发布
off: off //取消订阅
}
})();
EventCenter.on('my_event', function(data){
console.log('my_event received...');
});
EventCenter.fire('my_event'); // my_event received...
EventCenter.off('my_event');
EventCenter.fire('my_event'); //undefined使用场景：
- 应用于异步编程,替代传统回调。 用它的好处是可以切换我们的关注点,关注点集中在订阅事件,而在异步回调中我们需要关注内部运行状态。
- 取代对象之间的硬编码机制,对象之间不必再显式调用。 优点是对象间达到松耦合,缺点是当有多个发布者和订阅者嵌套时,极难debug。
发布订阅模式实例：
实现功能：对点击次数累加求和，并记录当前点击次数。如果点击了5次，则会计算result is=1+2+3+4+5。