Js设计模式之创建型设计模式(二)、简单工厂模式
goJhou 发布于2018-02 浏览:3033 回复:2
4
收藏
最后编辑于2022-04
上回我们讲到了单例模式,他可以直接解决全局污染问题。
 
本次呢,我们来说说  简单工厂模式  与   工厂模式 吧。
 
 
说到Js,写过的人都知道,他的代码是非常膨胀的。
 
在后期维护过程中,难免会有用搜索来查找想要的代码段的情况。
 
有时候又难以在几万行的代码里找到自己原来写的位置
 
心里想着:哎呀,怎么写的这么乱,之前我记得就在这呀。
 
经过了数小时的翻找总算找到了。归根究底就是对象申明东一块西一块的,并且可能采用了模块化的js文件,使得寻找难上加难。
 
 
为了有效的解决这种找不到代码的问题呢,有一种经典的 设计模式——简单工厂模式
 
 
我们先来假设一个不使用设计模式的场景。
 
我们有一家店,而店内呢有卖四种食物,分别是荒墨牛排,卡农炒饭,小帅面条和笔墨可乐
 
我们在每次售卖一个物品前需要创建一个对象,使之成为可用的对象数据。来看代码
 
 

 

好,我们假设在代码间穿插了几千行无关代码,那后期的搜索其实已经添加了一定的难度。

现在有了新的需求,我要增加一个叫电动车火锅的物品,需要穿插到代码当中去。

你是不是就头疼了呀?随着日积月累,代码的膨胀度不断增加,后期的维护变得越来越艰难。

 

为了解决这种情况,简单工厂模式诞生啦!

我们来看看简单工厂模式的代码是什么样的呀?

 

就像这样,对象的创建交由一个方法去管理,类似工厂一样的操作方式,简单而又效果显著。这就是简单工厂模式啦,能将所有的物品进行归类申明

 

然而 归根究底,还是逃不出对象的方法设计。如何更加的整洁呢? 于是乎 工厂模式 就诞生了。

 

 

工厂模式利用了Js原型链及构造函数的特性,是简单工厂模式的升级版

好处是维护比简单工厂模式更加的方便,因为他的函数体都在原型链中

主要是为了将功能相同、相似的方法放在一起

 

我们来看下工厂模式的经典样子

function Shop2(name){
		return new this[name]
	}
	Shop2.prototype = {
			huangMoSteak: function (){
		    this.price = 30;
		    this.time = 20;
		},
			kaNongFriedRice: function (){
			this.price = 10;
		    this.time = 5;
		},
			xiaoShuaiNoodles: function (){
			this.price = 15;
		    this.time = 10;
		},
			biMoCoke: function (){
			this.price = 3;
		    this.time = 0;
		},
			dianPingCheHotPot: function (){
			this.price = 150;
			this.time = 60;
		}
	}
	var e = Shop2("huangMoSteak");
	console.log(e.price);

这就是工厂模式啦。他的申明部分可以与函数体保持一定的距离喔,甚至可以单独分割给他一个模块。这样子下次要修改的时候,是不是马上就能定位了呢?

 

 

今天的设计模式,是针对代码整洁和易用性哒,我学会啦,你呢?

 

收藏
点赞
4
个赞
共2条回复 最后由用户已被禁言回复于2022-04
#3goJhou回复于2018-02
#2 卡农LLLL回复
可以马上开始TS的学习了.

这个设计模式系列会很长,估计要做一个月

0
#2卡农LLLL回复于2018-02

可以马上开始TS的学习了.

0
TOP
切换版块