015 ※ 工厂方法模式 | 鱼C广告位
本帖最后由 不二如是 于 2018-8-15 14:27 编辑关于为什么要学习JavaScript设计模式，请看：传送门
上一讲通过小缘前辈的帮助，不二顺利掌握简单工厂模式。
软件又开始闪烁了，新的工作需求又来了。
“不二，之前写的三个接口可以，又有一个新的需求，鱼C论坛那边，最近推出一门新课程《零基础入门学习Scratch》需要咱们给加工两个推广。”
“好的，玄武大佬，还有什么具体需求？”一听说是给自己人干活，不二内心有些小喜悦。
“Scratch那门课文字内容颜色用鱼兮的原谅绿（#2ebb96），背景用黑色。之前的Web推广继续进行，颜色用#eee的灰色，背景色默认的。”
“嗯，没问题。”
“对了，未来还会有一个《零基础入门学习JavaScript》的，先留出一个接口。”
“好的，目前就这些？”
“嗯，先这么设计，写完咱们再看看。”
“好的”
结束了和玄武大佬的对话，不二开始写代码。心想：‘正好用简单工厂模式，日后创建对象直接用工厂。’
不过考虑到，这里面每个类，订制都不一样，相似的太少，整合起来，内部还要细分，还是先独立创建3个类。
// Scratch
var Scratch = function(content){
// 备份content
this.content = content;
// 通过闭包快速将内容插入页面
(function () {
var div = document.createElement('div');
div.innerHTML = content;
div.style.color = '#2ebb96';
div.style.background = '#000';
div.getElementById('container').appendChild(div);
})(content)
}
// H5 C3
var H5C3 = function(content){
this.content = content;
(function () {
var div = document.createElement('div');
div.innerHTML = content;
div.style.color = '#eee';
div.getElementById('container').appendChild(div);
})(content)
}
// JS
var JavaScript = function(content){
this.content = content;
(function () {
})(content)
}
不二把玄武大佬的需求设计成了三个独立的类，准备通过工厂模式进行调用。
关于闭包的用法，请看：得“闭包”者得天下！ | 【精英版】
创建一个工厂：
// 通过工厂进行调用
var ExpendFac = function(type,content){
switch (type){
case 'Scratch':
return new Scratch(content);
case 'H5C3':
return new H5C3(content);
case 'JavaScript':
return new JavaScript(content)
}
}
这样调用的时候只需要指定type，和推广内容，然后就会由工厂进行需求分发。
测试：
ExpendFac('Scratch','鱼C幼教，让孩子爱上编程');
写完了，不二给玄武汇报。
“大佬，我搞定了”
“嗯，论坛那边再加一个配套教材的推广，它们要有独立的背景框...”
“好的”，不二内心有点小波动（莫名的想骂娘）。
为啥呢？
因为上面的需求实现了，工厂方法重构也搞定了，现在这个需求需要修改工厂函数。
而且为了以后的不这么尴尬（需求变更很频繁），一定要可拓展的工厂。。。
问问小缘前辈吧。
看完不二的代码，小缘说到，"不二看来你掌握工厂模式了，用的没错，但是随着需求变更，你会发现有些地方比较‘傻’。"
“是的，像现在这样，新的需求一加，我至少要修改两处，类修改一次，工厂模式修改一次。”
“没错，所以你可以试试工厂方法模式（Factory Method）”
“是工厂模式的升级版吗？”
“可以这么说，通过工厂方法模式将实际创建对象工作推迟到子类中，这样核心类就成了抽象类。我们将创建对象的基类放在工厂方法类的原型中。”
不二稍微有点懂了。
“是不是通过这个模式，我以后每需要一个类，只要添加这个类就行，不用操心工厂了？”
“是的，可以这么修改～”
预知后事如何，请看下回分解{:10_303:}
课后作业
1、不二一开始设计的满足3个需求的工厂有什么问题？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢JS-设计模式，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif i dont know 1 1
页:
[1]