最后编辑于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);
这就是工厂模式啦。他的申明部分可以与函数体保持一定的距离喔,甚至可以单独分割给他一个模块。这样子下次要修改的时候,是不是马上就能定位了呢?
今天的设计模式,是针对代码整洁和易用性哒,我学会啦,你呢?
请登录后评论
TOP
切换版块
这个设计模式系列会很长,估计要做一个月
可以马上开始TS的学习了.