js设计模式 前端学习，很全

### JavaScript设计模式详解 在前端开发领域，设计模式是一种被广泛使用的编程思想，它能够帮助开发者更好地组织代码、提高代码的可维护性和可扩展性。接下来，我们将详细探讨两种重要的JavaScript设计模式——单例模式与工厂模式。 #### 单例模式 单例模式的核心理念是确保一个类只有一个实例，并提供一个全局访问点。这种模式非常适用于那些需要频繁创建和销毁对象的情况，例如全局配置管理等场景。单例模式通常有三种实现方式：使用JSON对象、构造函数以及闭包。 ##### 使用JSON对象 ```javascript var single = { word: 'hello world', say: function() { console.log(this.word); } }; var s1 = single; var s2 = single; console.log(s1 === s2); // true ``` 在这个例子中，我们定义了一个名为`single`的JSON对象，并且通过引用的方式创建了`s1`和`s2`两个变量。由于它们都指向同一个对象，因此`s1`和`s2`实际上是同一个对象的两个不同引用，所以它们的比较结果为`true`。 ##### 使用构造函数 ```javascript function Single() { if (typeof Single.instance === 'object') { return Single.instance; } this.name = 'hello world'; this.say = function() { console.log(this.name); }; Single.instance = this; return this; } var s1 = new Single(); var s2 = new Single(); console.log(s1 === s2); // true ``` 这段代码展示了如何通过构造函数实现单例模式。首先检查`Single.instance`是否已经存在，如果存在则直接返回这个实例；如果不存在，则创建一个新的实例并将其赋值给`Single.instance`，然后返回这个新创建的实例。这种方式确保了无论调用多少次`new Single()`，最终都只会有一个实例。 ##### 使用闭包 ```javascript function Single() { var instance = this; Single = function() { // 同名全局函数起到覆盖的作用，第二次 new 的时候，直接执行的是这个 return instance; } this.name = ''; this.setName = function(name) { this.name = name; } this.getName = function() { console.log(this.name); } } var s1 = new Single(); var s2 = new Single(); console.log(s1 === s2); // true s1.setName('tom'); s2.getName(); // tom ``` 这里利用闭包来保持实例的唯一性。第一次调用`new Single()`时会创建一个实例，并将构造函数`Single`重新定义为一个总是返回这个实例的函数，这样再次调用`new Single()`时就会返回之前创建的那个实例。 #### 工厂模式 工厂模式主要用于封装对象创建的过程。它的核心思想是定义一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。下面介绍两种工厂模式的实现方式：策略实现和闭包实现。 ##### 策略实现 ```javascript function Factory() { this.createEmployee = function(type) { var employee; switch (type) { case 'fulltime': employee = new FullTime(); break; case 'parttime': employee = new PartTime(); break; default: employee = new Temporary(); } employee.type = type; employee.say = function() { var word = this.type + "：" + this.money + '/小时'; console.log(word); } return employee; } } // 定义不同的员工类型 function FullTime() { this.money = '30 元'; } function PartTime() { this.money = '15 元'; } function Temporary() { this.money = '20 元'; } // 创建员工数组 var employeeArr = []; var factory = new Factory(); employeeArr.push(factory.createEmployee('fulltime')); employeeArr.push(factory.createEmployee('parttime')); employeeArr.push(factory.createEmployee('temporary')); employeeArr.forEach(function(employee) { employee.say(); }); ``` 上面的例子展示了如何使用策略模式来创建不同类型的员工对象。`Factory`类包含了一个`createEmployee`方法，根据传入的不同类型参数创建不同类型的员工对象。这种方法的优点在于易于扩展新的员工类型。 ##### 闭包实现 ```javascript var Car = (function () { var CarClass = function (model, year, miles) { this.model = model; this.year = year; this.miles = miles; this.state = function() { console.log(this.model, this.year, this.miles); } }; return function (model, year, miles) { return new CarClass(model, year, miles); }; })(); var tom = new Car("Tom", 2009, 50000); tom.state(); // 输出: Tom 2009 50000 ``` 这个示例使用闭包来实现工厂模式。闭包内部定义了一个`CarClass`构造函数，外部返回一个函数作为工厂函数，该函数接受参数并返回一个新的`CarClass`实例。这种方式的好处在于可以隐藏内部实现细节，只暴露必要的接口。 单例模式和工厂模式是JavaScript中非常实用的设计模式。它们不仅有助于提高代码的质量，还能够使得程序结构更加清晰、易于维护。在实际项目中灵活运用这些模式，可以使代码更加健壮、高效。