前端典型设计模式

• 模块模式:在立即执行函数表达式中定义的变量和方法在外界是访问不到的,只能通过其向外部提供的接口,"有限制"地访问.通过函数作用域解决了属性和方法的封装问题

案例：

var Person = (function(){
    var name = "xin";
    var age = 22;
    function getName(){
        return name;
    }
    function getAge(){
        return age;
    }
    return {
        getName: getName,
        getAge: getAge
    }
})();

console.log(age); // 报错:age未定义
console.log(name); // 报错:name未定义
console.log(Person.age); // undefined
console.log(Person.name); // undefined
只能通过Person提供的接口访问相应的变量
console.log(Person.getName()); // xin
console.log(Person.getAge()); // 22

• 构造函数模式

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    constructor: Person;
    printName: function(){
        console.log(this.name);
    },
    printAge: function(){
        console.log(this.age);
    }
}

var person = new Person('xin', 22);
person.printName(); // xin
person.printAge(); // 22

• 混合模式

function Person(name,age){
    this.name = name;
    this.age = age;
};
Person.prototype.printName = function(){
    console.log(this.name);
}
function Student(name,age){
    继承 Person 的属性
    Person.call(this,name,age);
}
function create(prototype){
    function F(){};
    F.prototype = prototype;
    return new F();
}

让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法
Student.prototype = create(Person.prototype);
Student.prototype.printAge = function(){
    console.log(this.age);
}
var student = new Student('xin',22);
student.printName(); // "xin"

•  工厂模式

    定义：将其成员对象的实例化推迟到子类来实现的类。

     需求：创建对象的流程赋值的时候，比如依赖于很多设置文件等 ；处理大量具有相同属性的小对象；注：不能滥用

     优点：不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中。     

     分类：简单工厂，工厂方法和抽象工厂。

     实现：

        《1》简单工厂

function Person(name, age){
    var person = new Object();
    person.name = name;
    person.age = age;
    person.printName = function(){
        console.log(this.name);
    };
    person.printAge = function(){
        console.log(this.age);
    }
    return person;
}

var person = Person('xin',22);

• 单例模式

      定义：是保证一个类只有一个实例，并且提供一个访问它的全局访问点。

       需求：一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。

       实现：用一个变量标识当前是否已经为某个类创建过对象，如果是，则在下一次获取这个类的实例时，直接返回之前创建的对象。

       优点：

• 可以用来划分命名空间，减少全局变量的数量

• 可以被实例化，且实例化一次，再次实例化生成的也是第一个实例

// 单例模式
var Singleton = function(name){
    this.name = name;
    this.instance = null;
};
Singleton.prototype.getName = function(){
    return this.name;
};
// 获取实例对象
Singleton.getInstance = function(name) {
    if(!this.instance) {
        this.instance = new Singleton(name);
    }
    return this.instance;
};
// 测试单例模式的实例
var a = Singleton.getInstance("aa");
var b = Singleton.getInstance("bb");

console.log(a===b)    // true

• 命令模式 

      定义：用来对方法调用进行参数化处理和传送，经过这样处理过的方法调用可以在任何需要的时候执行。

       需求：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

      实现：将函数的调用、请求和操作封装成一个单一的对象

 var setCommand = function(button,func) {
 2     button.onclick = function(){
 3         func();
 4     }
 5  }; 
 6  var MenuBar = {
 7     refersh: function(){
 8         alert("刷新菜单界面");
 9     }
10  };
11  var SubMenu = {
12     add: function(){
13         alert("增加菜单");
14     }
15  };
16  // 刷新菜单
17  var RefreshMenuBarCommand = function(receiver) {
18     return function(){
19         receiver.refersh();    
20     };
21  };
22  // 增加菜单
23  var AddSubMenuCommand = function(receiver) {
24     return function(){
25         receiver.add();    
26     };
27  };
28  var refershMenuBarCommand = RefreshMenuBarCommand(MenuBar);
29  // 增加菜单
30  var addSubMenuCommand = AddSubMenuCommand(SubMenu);
31  setCommand(b1,refershMenuBarCommand);
32 
33  setCommand(b2,addSubMenuCommand);