敲碎时间的人的个人专栏
上一篇

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();

 

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们