javascript设计模式 - 总结

Peipei Wong 9月 05, 2020

反模式(anti pattern)

针对一个问题的不良解决方案可能会导致糟糕的情况。在react blog中有一篇使用中的反模式，可以看一下You Probably Don’t Need Derived State

Constructor pattern

在oop中，Constructor一种在内存已经分配该对象的情况下，用于初始化对象的特殊方法。但是js中，几乎所有东西都是对象，我们通常最感兴趣的是object constructors。

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

// We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

Singleton pattern

它限制了类的实例化次数。Singleton模式，在实例不存在的情况下，可以通过一个方法创建；如果试过实例存在，它就会返回该对象的引用。

最近遇到的场景是，项目有一套自定义的配置模板，你需要使用js去读取它。但是在umi创建的项目中，发现这个文件会反复执行好几遍，于是可以使用单例，在config存在的情况下直接返回，不需要再进行读取文件的等等的操作

const FOO_KEY = Symbol("foo")

global[FOO_KEY] = {
  foo: "bar"
}

// define the singleton API
// ------------------------

var singleton = {}

Object.defineProperty(singleton, "instance", {
  get: function(){
    return global[FOO_KEY]
  }
})

// ensure the API is never changed
// -------------------------------

Object.freeze(singleton)

// export the singleton API only
// -----------------------------

module.exports = singleton