共计 3380 个字符，预计需要花费 9 分钟才能阅读完成。
JavaScript 设计模式阅读
更多文章查看本专栏
设计模式第一篇：创建型设计模式
1、简单工厂模式
简单工厂模式：又叫静态工厂方法，有一个工厂对象决定创建某一种产品对象类的实例。主要用于创建同一类对象。
根据现有的需求选择不同的东西。
// 简单的工厂模式
var redBall = function () {
console.log(‘redBall’)
};
var greenBall = function () {
console.log(‘greenBall’)
};
var blackBall = function () {
console.log(‘blackBall’)
};
var blueBall = function () {
console.log(‘blueBall’)
};
// 工厂函数
var ballFactory = function (type) {
switch (type) {
case ‘red’:
return new redBall();
break;
case ‘green’:
return new greenBall();
break;
case ‘black’:
return new blackBall();
break;
case ‘blue’:
return new blueBall();
break;
}
}
通过一个工厂产生多个同类的，或者有相同属性但是也存在差异的产品。
function createBook(name,time,type) {
var t = new Object();
t.name = name;
t.time = time;
t.type = type;
return t;
}
function createBall(type,text) {
var t = new Object();
t.content = text;
t.show = function () {
// do something
}
switch (type) {
case ‘red’:
// different Part
break;
case ‘green’:
// different Part
break;
case ‘black’:
// different Part
break;
case ‘blue’:
// different Part
break;
}
}
和类的区别：类是将初始的东西给你，然后你自己去对相应的需求进行添加实例方法。而工厂是根据你需要的方法直接生成好给你。好处，如果有大量相同的含有特殊功能的实例存在，可以通过简单工厂增加复用性。
核心：根据情况的不同选择不同的情况进行处理，像是一个封装型的 ’if else’。
2、工厂方法模式
工厂方法模式：又称为工厂模式，也叫虚拟构造器模式或者多态工厂模式。
它属于类创建型模式。通过对产品类的抽象使其创建业务，只要负责用于创建多类的实例。将实际创建对象的工作推迟到了子类当中。
// 类的安全模式
var Factory = function (type, content) {
if(this instanceof Factory){
return new this[type](content);
}else{
return new Factory(type, content);
}
};
// 创建不同类型基类的实现
Factory.prototype={
Java:function (content) {
this.content = content;
},
PHP:function (content) {
this.content = content;
},
Python:function (content) {
this.content = content;
},
JavaScript:function (content) {
this.content = content;
},
}
3、抽象工厂模式
通过对类的工厂抽象使其业务用于对产品类簇的创建，而不负责创建某一类产品的实例。
用于产生类簇。
创建一个类，类里面拥有许多抽象的类，抽象的类定义了同类的类的结构。在使用的时候将抽象的类进行继承。
/**
* 实现 subType 类对工厂类中的 superType 类型的抽象类的继承
* @param subType 要继承的类
* @param superType 工厂类中的抽象类 type
*/
const VehicleFactory = function(subType, superType) {
if (typeof VehicleFactory[superType] === ‘function’) {
function F() {
this.type = ‘ 车辆 ’
}
F.prototype = new VehicleFactory[superType]()
subType.constructor = subType
subType.prototype = new F() // 因为子类 subType 不仅需要继承 superType 对应的类的原型方法，还要继承其对象属性
} else throw new Error(‘ 不存在该抽象类 ’)
}
VehicleFactory.Car = function() {
this.type = ‘car’
}
VehicleFactory.Car.prototype = {
getPrice: function() {
return new Error(‘ 抽象方法不可使用 ’)
},
getSpeed: function() {
return new Error(‘ 抽象方法不可使用 ’)
}
}
const BMW = function(price, speed) {
this.price = price
this.speed = speed
}
VehicleFactory(BMW, ‘Car’) // 继承 Car 抽象类
BMW.prototype.getPrice = function() { // 覆写 getPrice 方法
console.log(`BWM price is ${this.price}`)
}
BMW.prototype.getSpeed = function() {
console.log(`BWM speed is ${this.speed}`)
}
const baomai5 = new BMW(30, 99)
// baomai5.getPrice() // BWM price is 30
// baomai5 instanceof VehicleFactory.Car // true
4、建造者模式
将一个复杂对象的构建层与其表示层相互分离，同样的构造过程可采用不同的表示。
关注产生过程，将对象的创建分为模块化创建，自定义度变高。
建造一个电脑：
// 构建基本主体
const basicComputer = function () {
}
basicComputer.prototype = {
// 自定义的一些原型方法
}
// 构建 CPU 模块
const cpu = function (type) {
this.type = type;
}
cpu.prototype = {
// 自定义的一些原型方法
}
// 构建显卡模块
const graphicsCard = function (type) {
this.type = type;
}
graphicsCard.prototype = {
// 自定义的一些原型方法
}
// 构建屏幕模块
const screen = function (type) {
this.type = type;
}
screen.prototype = {
// 自定义的一些原型方法
}
const computer = function () {
const t = new basicComputer();
t.cpu = new cpu();
t.graphicsCard = new graphicsCard();
t.screen = new screen();
return t;
}
5、原型模式
用原型实例指向创建对象的类，使用与创建新的对象的类共享原型对象的类型以及方法。
基于继承，将复杂的放置在函数中，简单的共同的放置到一个构造函数中。
在使用的时候可以对原型进行拓展。
代码与继承类似，但是核心就是将简单的共有的放置到构造函数中，与类的思想类似。
6、单例模式
只允许实例化一次的类。在使用的时候可以用于创建代码库，创建命名空间。
单例模式实现代码库，产生命名空间，一次只能实例化一个。
// 一个命名空间
const A = {
fun_1: {
fun_1_1:function () {
// do something
},
},
fun_2: {
// do something
},
fun_3:function () {
// do something
}
}
// 空间类可为一个代码块，也可以为更多一层次的代码库（命名空间）
