小议JavaScript设计模式

前言

JavaScript是一种弱类型、动态类型的解释性脚本语言，开发人员可以在编写代码的同时运行程序，这使得JavaScript成为了Web开发过程的重要组成部分。借助JavaScript设计模式，开发人员能够更加规范、优化自己的代码，提高代码的可维护性和可拓展性，使得自己称为一个优秀的程序员。

常见设计模式

Javascript设计模式分为不同的类别，有创建型、结构型和行为型，常见的设计模式包括：

创建型

工厂模式（Factory Pattern）
单例模式（Singleton Pattern）
原型模式（Prototype Pattern）
抽象工厂模式（Abstract Factory Pattern）
建造者模式（Builder Pattern）

结构型

适配器模式（Adapter Pattern）
桥接模式（Bridge Pattern）
过滤器模式（Filter Pattern）
组合模式（Composite Pattern）
装饰器模式（Decorator Pattern）
外观模式（Facade Pattern）
享元模式（Flyweight Pattern）
代理模式（Proxy Pattern）

行为型

责任链模式（Chain of Responsibility Pattern）
命令模式（Command Pattern）
解释器模式（Interpreter Pattern）
迭代器模式（Iterator Pattern）
中介者模式（Mediator Pattern）
备忘录模式（Memento Pattern）
观察者模式（Observer Pattern）
状态模式（State Pattern）
策略模式（Strategy Pattern）
模板模式（Template Pattern）
访问者模式（Visitor Pattern）

推荐学习的设计模式

单例模式

单例模式是一种创建型模式，它的目的是保证一个类只有一个实例，并提供一个全局访问点。在JavaScript中，单例模式常用来管理全局变量或创建只需要实例化一次的对象。

示例：

let Singleton = (function(){
  let instance;

  function createInstance(){
    let obj = new Object("I am the instance");
    return obj;
  }

  return {
    getInstance: function(){
      if(!instance){
        instance = createInstance();
      }
      return instance;
    }
  }
})();

let instance1 = Singleton.getInstance();
let instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

观察者模式

观察者模式是一种行为型模式，它定义对象之间的一种一对多的依赖关系，当某个对象的状态发生改变时，所有依赖它的对象都得到通知并自动更新状态。

示例：

function ObserverList(){
  this.observerList = [];
}
ObserverList.prototype.add = function(obj){
  return this.observerList.push(obj);
};
ObserverList.prototype.get = function(index){
  if(index>-1 && index<this.observerList.length){
    return this.observerList[index];
  }
};
ObserverList.prototype.count = function(){
  return this.observerList.length;
};
ObserverList.prototype.indexOf = function(obj,startIndex){
  let i = startIndex;

  while(i < this.observerList.length){
    if(this.observerList[i] === obj){
      return i;
    }
    i++;
  }
  return -1;
};
ObserverList.prototype.removeAt = function(index){
  this.observerList.splice(index,1);
};

function Subject(){
  this.observers = new ObserverList();
}
Subject.prototype.addObserver = function(observer){
  this.observers.add(observer);
};
Subject.prototype.removeObserver = function(observer){
  this.observers.removeAt(this.observers.indexOf(observer, 0));
};
Subject.prototype.notify = function(context){
  let observerCount = this.observers.count();
  for(let i=0; i < observerCount; i++){
    this.observers.get(i).update(context);
  }
};

function Observer(){
  this.update = function(){
    // ...
  };
}