首页 > 代码库 > 【Javascript设计模式】第二课 神奇的魔术师——简单工厂模式

【Javascript设计模式】第二课 神奇的魔术师——简单工厂模式

所谓简单工厂模式就是由一个方法来决定到底要创建那个类的实例,而这些实例经常都拥有相同的接口。
简单工厂模式主要运用一下几种情况(添加个人理解)
    1、对象的构建有规律性,大部分相同只有个别不同,重复代码多
    2、需要依赖具体环境创建不同的实例
    3、处理大量具有相同属性的小对象
具体我们来看一个小例子:
    大家在开发过程中经常遇到登陆模块,首先看以下的的具体的需求:
    1、用户在输入框中输入的内容不符合规范,需要定义一个提示框提示:"您输入的内容不符合规范,请重新输入"
    2、用户登陆提示用户不存在,提示用户"账户不存在,请重新输入,如果没有账户,可以点击【注册】按钮进行注册",相当于一个conform提示框
    3、用户登陆成功之后,提示用户"登陆成功,请输入你今天的心情"。
    
对于上述的需求,第一个相当于提示框,第二个相当于conform框,与用户存在一个选择交互,第三个相当于输入conform框,对于三种需求,我们可以设计如下的类来实现功能
  1. //定义一个提示类
  2. var LoginTip = function (context) {
  3. this.context = context;
  4. }
  5. LoginTip.prototype.show = function(){
  6. //显示提示框
  7. }
  8. //定义一个conform类
  9. var LoginConform = function (context) {
  10. this.context = this.context;
  11. }
  12. LoginConform.prototype.show = function () {
  13. //显示确认框
  14. }
  15. //定义一个输入conform框
  16. var LoginInputConform = function(context){
  17. this.context = context;
  18. }
  19. LoginInputConform.prototype.show = function(){
  20. //显示输入确认框
  21. }
   这样我们只需要在用到什么框时只需要调用对应的类然后new一个对应的实例即可达到功能需求。但是在系统的团队开发中,别的地方如果有类似的功能需要调用对应的方法来实现相同的功能,这样的代码就无法达到复用的功能,而且别人还需要知道你方法的实现然后才好调用对应的方法来实现相应的功能,此时就可以通过简单工厂的模式来实现对应的功能。
   首先对于团队里面其他的开发人员需要实现对应的功能,他们只需要知道一个函数方法,然后通过这个函数方法就可以创建所需要的对象这样岂不是更好。这样我们新增一个功能方法来实现上面的需求:
  1. //定义一个方法 根据用户输入的需求来获得对应的对象
  2. var PopFactory = function(name,context){
  3. switch (name){
  4. case ‘tip‘:
  5. return new LoginTip(context);
  6. case ‘conform‘:
  7. return new LoginConform(context);

  8. case ‘inputConform‘:
  9. return new LoginInputConform();
  10. }
  11. }
这样我们就能实现只需要记住PopFactory这个方法,然后传入对应的参数就能实现创建需要返回的对象

但是查看上面的三个需求,发现三个类都有很多地方是相同的,所以我们可以抽象提取出来共用的,然后不相似的部分针对处理即可
  1. var createPop = function(type,txt){
  2. var o = new object();
  3. o.content = txt;
  4. o.show = function(){
  5. //显示方法
  6. }
  7. if(type == ‘tip‘){
  8. //提示框差异的部分
  9. }
  10. if(type == ‘conform‘){
  11. //conform差异的部分
  12. }
  13. if(type == ‘inputConform‘){
  14. // inputConform差异的部分
  15. }
  16. return o;
  17. }



来自为知笔记(Wiz)


【Javascript设计模式】第二课 神奇的魔术师——简单工厂模式