js设计模式(抽象工厂和建造器)

什么是设计模式

首先，需要了解设计模式的真正定义。作为软件开发人员，您可以“以任何方式”编写代码。但是，设计模式将是最佳实践，这将对您维护代码的方式产生重大影响。以最大的技巧编写的代码将比业余代码持续更长时间。这意味着当您选择正确的编码风格时，您无需担心可扩展性或维护。

• 设计模式的作用是帮助您构建不会使整体问题复杂化的解决方案。
• 模式将帮助您构建交互式对象和高度可重用的设计。
• 设计模式是面向对象编程中不可或缺的概念。

创建型设计模式

1. 抽象工厂
2. 构建器
3. 工厂
4. 原型
5. 单例

抽象工厂

什么是工厂？如果你问一个孩子，他会如何形容工厂？工厂不过是我们制造东西的地方。例如，在玩具厂，你会看到玩具的生产。就像这个定义一样，JavaScript 中的工厂是一个创建其他对象的地方。不是所有的玩具工厂都生产泰迪熊和变形金刚，对吧？独立的玩具工厂，生产不同类型的玩具。玩具厂总是有一个主题。类似地，抽象工厂与主题一起工作。来自抽象工厂的对象将共享一个共同的主题。

让我们通过一个例子来理解 JavaScript 中的抽象工厂。

我要为玩具工厂构建软件。

我有一个部门，生产以变形金刚电影为主题的玩具。而星球大战主题玩具则是另一个部门进行生产。

这两个部门都有一些共同的特点和独特的主题。

function StarWarsFactory(){
	this.create = function(name){
	return new StarWarsToy(name)
}}

function TransformersFactory(){
	this.create = function(name){
	return new TransformersToy(name)
}}

function StarWarsToy(name){
	this.nameOfToy = name;
	this.displayName = function(){
		console.log("My Name is "+this.nameOfToy);
	}
}

function TransformersToy(name){
	this.nameOfToy = name;
	this.displayName = function(){
		console.log("My Name is "+this.nameOfToy);
	}
}

function buildToys(){
	var toys = [];


	var factory_star_wars = new StarWarsFactory();
	var factory_transformers = new TransformersFactory();


	toys.push(factory_star_wars.create("Darth Vader"));
	toys.push(factory_transformers.create("Megatron"));

	for(let toy of toys)
	console.log(toy.displayName());
}
buildToys();

建造器

建造器的作用是建造复杂的对象。客户端将收到一个最终对象，而不必担心实际完成的工作。大多数时候，构建器模式是对复合对象的封装。主要是因为整个过程复杂且重复。

让我们看看如何使用构建器模式来实现我们的玩具工厂。

1. 我有一家玩具厂
2. 我有一个部门负责建造星球大战玩具。
3. 在星球大战部门，我想制造许多达斯维达玩具。
4. 制作达斯维达玩具分为两步。我需要制作玩具，然后提及颜色。

function StarWarsFactory(){
  this.build = function(builder){
  	builder.step1();
  	builder.step2();
  	return builder.getToy();
  }
}

function DarthVader_Builder(){
  this.darth = null;
  this.step1 = function () {
    this.darth = new DarthVader(); 
  }

  this.step2 = function () {
    this.darth.addColor();
  }

  this.getToy = function () {
    return this.darth;
  }
}

function DarthVader () {
  this.color = '';
  this.addColor = function(){
    this.color = 'black';
  }
  this.say = function () {
    console.log("I am Darth, and my color is "+this.color);
  }
}

function build(){
  let star_wars = new StarWarsFactory();
  let darthVader = new DarthVader_Builder();
  let darthVader_Toy = star_wars.build(darthVader);
  darthVader_Toy.say();
}
build();