前端设计模式

写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。

工厂模式（factory）

function Person(name, age){
  var o = new Object();
  o.name = name;
  o.age = age;
  
  o.sayName = function(){
    console.log(o.name);
  } ;
  
  o.sayAge = function(){
    console.log(o.age);
  }
  
  return o;
}
var stu = Person('小明', 18);
stu.sayName();
stu.sayAge();

---

缺点：无法获知对象的类型，它们全部都是Object；每次调用都创建一个新的引用

构造函数模式（constructor）

function Person(name, age){
   this.name = name;
   this.age = age;
   this.sayInfo = function(){
     console.log("my name: " + this.name + ", my age: " + this.age);
   };
}
var stu = new Person("xiaoming", 18);
stu.sayInfo()

缺点：每创建一个对象，就要重新创建一个方法，而它们的方法是相同的，不同的是属性

混合模式（mixin）

function Person(name, age){
   this.name = name;
   this.age = age;
}
Person.prototype.sayInfo = function(){
     console.log("my name: " + this.name + ", my age: " + this.age);
   };
var stu = new Person("xiaoming", 18);
stu.sayInfo()

解决了构造函数模式中，每创建一个对象就创建一次方法的缺点，将它们的功能部分放到原型上，不同部分放在构造函数中

模块模式（module）

使用的是闭包方式，可以避免只对外暴露接口，内部的细节不对外提供

var Person = (function(){
  // 对外隐藏私有变量
  var _school = '希望小学';
  
  function getSchool(){
    console.log(_school);
  }
  // 只对外暴露接口
  return {
    school: getSchool
  }
})();
console.log(Person._school);  //undefined
Person.school();

---

单例模式（singleton）

var Person = (function(){
  var instance ; //这个实例是最终要返回的
  function init(name){
    // 在这里面定义需要做的事
    return {
      name: name
    };
  }
  
  return {
    createPerson: function(name){
      if (!instance) {
        instance = init(name);
      }
      // 返回该实例
      return instance;
    }
  };
})();
var hexon = Person.createPerson('hexon');
console.log(hexon.name);

其实就是字面量对象，在属性中添加方法
优点：节约内存
实例： 页面中弹出窗 一般使用单例模式，因为在一个页面下，一般只能允许一个对话框弹出

---

发布/订阅模式（publish/subscribe）

这是一种消息范式；
订阅者将需要订阅的事件注册到调度中心（可以理解为当事件到来时需要执行的代码），当事件触发时，发布者将事件发送到调度中心，由调度中心统一处理注册到调度中心的代码。

在web开发中主要用于处理异步事件

如下图：

image.png

代码示例

var events = (function(){
   var topics = {};
   var hOP = topics.hasOwnProperty;
   return {
       // 订阅者
       subscribe: function(topic, listener){
          // 判断topic属性是否在topics中
          // 理解为：判断该事件是否订阅，如果没有订阅，则进行订阅，否则退出
          let a = hOP.call(topics, topic);
          // 如果不在，说明没有注册，则进行注册；否则退出
          if (!a) topics[topic] = [];
          let index = topics[topic].push(listener) - 1;
          return {
              remove: function(){
                  delete topics[topic][index];
              }
          };
       },
       // 发布者
       publish: function(topic, info){
           // 当topic这个事件没有注册，说明没有人订阅，因此直接返回
           let b = hOP.call(topics, topic);
           if(!b) return;
           // 事件有人订阅了，执行订阅者的处理代码
           topics[topic].forEach(function(item){
               item(info != undefined ? info : {});
           });
       }
   };
})();
// 先注册，只有先注册了，发布者发布消息的时候才能获取
var subscription = events.subscribe('/page/load', function(obj){
   console.log('订阅的事件到了');
})
// 发布消息
events.publish('/page/load', {
   url: '/some/url/path'
});
// 删除事件
subscription.remove();

参考：
设计模式：发布/订阅模式解析
Pub/Sub JavaScript Object

使用发布订阅模式写一个事件管理器，可以实现如下方式调用

var Event = (function(){
  var topics = {};
  var hOP = topics.hasOwnProperty;
  
  return {
    on: function(topic, listener){
      topics[topic] = topics[topic] || [];
      topics[topic].push({
          handler: listener
      });
    },
    fire: function(topic, args){
      if (!hOP.call(topics, topic)){
        return ;
      }
      topics[topic].forEach(function(item){
          item.handler(args);        
      });
    },
    off: function(topic){
      delete topics[topic];
    }
  };
})();

Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('changer');

演示

注意：
着重实践：单例模式和发布/订阅者模式；其他几种模式中，在实际开发中都已经是司空见惯的