015 ※ 工厂方法模式 | 鱼C广告位

不二如是

关于为什么要学习JavaScript设计模式，请看：传送门

---

上一讲通过小缘前辈的帮助，不二顺利掌握简单工厂模式。

软件又开始闪烁了，新的工作需求又来了。

“不二，之前写的三个接口可以，又有一个新的需求，鱼C论坛那边，最近推出一门新课程《零基础入门学习Scratch》需要咱们给加工两个推广。”

“好的，玄武大佬，还有什么具体需求？”一听说是给自己人干活，不二内心有些小喜悦。

“Scratch那门课文字内容颜色用鱼兮的原谅绿（#2ebb96），背景用黑色。之前的Web推广继续进行，颜色用#eee的灰色，背景色默认的。”

“嗯，没问题。”

“对了，未来还会有一个《零基础入门学习JavaScript》的，先留出一个接口。”

“好的，目前就这些？”

“嗯，先这么设计，写完咱们再看看。”

“好的”

结束了和玄武大佬的对话，不二开始写代码。心想：‘正好用简单工厂模式，日后创建对象直接用工厂。’

不过考虑到，这里面每个类，订制都不一样，相似的太少，整合起来，内部还要细分，还是先独立创建3个类。

1. //    Scratch
   
2.     var Scratch = function(content){
   
3. //        备份content
   
4.         this.content = content;
   
5. //        通过闭包快速将内容插入页面
   
6.         (function () {
   
7.             var div = document.createElement('div');
   
8.             div.innerHTML = content;
   
9.             div.style.color = '#2ebb96';
   
10.             div.style.background = '#000';
    
11.             div.getElementById('container').appendChild(div);
    
12.         })(content)
    
13.     }
    
14. 
    
15. //    H5 C3
    
16.     var H5C3 = function(content){
    
17.         this.content = content;
    
18.         (function () {
    
19.             var div = document.createElement('div');
    
20.             div.innerHTML = content;
    
21.             div.style.color = '#eee';
    
22.             div.getElementById('container').appendChild(div);
    
23.         })(content)
    
24.     }
    
25. 
    
26. //    JS
    
27.     var JavaScript = function(content){
    
28.         this.content = content;
    
29.         (function () {
    
30.             
    
31.         })(content)
    
32.     }

复制代码

不二把玄武大佬的需求设计成了三个独立的类，准备通过工厂模式进行调用。

关于闭包的用法，请看：得“闭包”者得天下！ | 【精英版】

创建一个工厂：

1. //    通过工厂进行调用
   
2.     var ExpendFac = function(type,content){
   
3.         switch (type){
   
4.             case 'Scratch':
   
5.                 return new Scratch(content);
   
6.             case 'H5C3':
   
7.                 return new H5C3(content);
   
8.             case 'JavaScript':
   
9.                 return new JavaScript(content)
   
10.         }
    
11.     }

复制代码

这样调用的时候只需要指定type，和推广内容，然后就会由工厂进行需求分发。

测试：

1. ExpendFac('Scratch','鱼C幼教，让孩子爱上编程');

复制代码

写完了，不二给玄武汇报。

“大佬，我搞定了”

“嗯，论坛那边再加一个配套教材的推广，它们要有独立的背景框...”

“好的”，不二内心有点小波动（莫名的想骂娘）。

为啥呢？

因为上面的需求实现了，工厂方法重构也搞定了，现在这个需求需要修改工厂函数。

而且为了以后的不这么尴尬（需求变更很频繁），一定要可拓展的工厂。。。

问问小缘前辈吧。

看完不二的代码，小缘说到，"不二看来你掌握工厂模式了，用的没错，但是随着需求变更，你会发现有些地方比较‘傻’。"

“是的，像现在这样，新的需求一加，我至少要修改两处，类修改一次，工厂模式修改一次。”

“没错，所以你可以试试工厂方法模式（Factory Method）”

“是工厂模式的升级版吗？”

“可以这么说，通过工厂方法模式将实际创建对象工作推迟到子类中，这样核心类就成了抽象类。我们将创建对象的基类放在工厂方法类的原型中。”

不二稍微有点懂了。

“是不是通过这个模式，我以后每需要一个类，只要添加这个类就行，不用操心工厂了？”

“是的，可以这么修改～”

预知后事如何，请看下回分解

---

课后作业


1、不二一开始设计的满足3个需求的工厂有什么问题？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢JS-设计模式，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

TCY

i dont know

优时风

1

jack6666

1