小议javascript 设计模式 推荐

小议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(){
    // ...
  };
}

结论

以上只是JavaScript设计模式的冰山一角，如果想要成为一名优秀的JavaScript程序员，需要不断深入学习、掌握不同分类的设计模式，并在实际开发中不断进行实践、摸索。