首页 > 编程开发 > JavaScript

JavaScript设计模式--简单工厂模式定义与应用案例详解

来自：互联网
时间：2020-05-23
阅读：

本文实例讲述了JavaScript设计模式--简单工厂模式定义与应用。分享给大家供大家参考，具体如下：

一，介绍

工厂模式创建对象（视为工厂里的产品）时无需指定创建对象的具体类。

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

在这里将工厂简单分为三种：

（1）简单工厂：通过第三方的类完成松耦合的任务。
（2）复杂工厂：通过把实例化的任务交给子类来完成的，用以到达松耦合的目的。
（3）超级工厂：通过eval()来完成智能工厂。

工厂的目的：在于判断接口最终用哪个类实例化（故与接口密不可分）。
使用工厂最终达到的效果是：多态，和类与类之间的松耦合。

二，正文部分

工厂模式与接口是密不可分的所以我们需要先引入接口文件和继承类文件

（1）接口文件：

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//(1)定义一个接口类
var Interface=function (name,methods) {//name：接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函数名必须是字符串类型");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
Interface.ensureImplement=function (object) {
  if(arguments.length<2){
    throw new Error("参数必须不少于2个")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是Interface类型
    if(inter.constructor!=Interface){
      throw new Error("如果是接口类的话，就必须是Interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

      //object[method]传入的函数
      //最终是判断传入的函数是否与接口中所用函数匹配
      if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
        throw new Error("实现类中没有完全实现接口中的所有方法")
      }
    }
  }
}

（2）继承文件

/*创建extend函数为了程序中所有的继承操作*/
//subClass:子类 superClass：超类
function extend(subClass,superClass) {
  //1，使子类原型属性等于父类的原型属性

  //初始化一个中间空对象，目的是为了转换主父关系
  var F = function () {};
  F.prototype = superClass.prototype;
  //2， 让子类继承F
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
  //3，为子类增加属性 superClass ==》原型链的引用
  subClass.superClass = superClass.prototype;
  //4，增加一个保险，就算你的原型类是超类（Object）那么也要把你的构造函数级别降下来
  if (superClass.prototype.constructor == Object.prototype.constructor) {
    superClass.prototype.constructor = superClass;
  }
}

通过下面的例子，逐步引进工厂模式及改进工厂模式

1，工厂模式的引入，

（1）创建接口对象

 var Pet=new Interface("Pet",["eat","run","sing","register"]);

（2）定义一个宠物店类并在prototype上进行扩展

 var PetShop=function () {}
  PetShop.prototype={
    //出售宠物的方法
    sellPet:function (kind) {
      //宠物对象
      var pet;
      //宠物种类
      Switch (kind){
        case 'dog':
          pet=new Dog();
        break;
        case 'cat':
          pet=new Cat();
          break;
        case 'pig':
          pet=new Pig();
          break;
        default:
          pet=new Bird();
      }
      //验证接口 
     Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实现接口Pet里面全部的方法  （对象，接口）
     pet.eat();
     pet.register();
     return pet;

    }
  }

（3）分析宠物的一些特点可以将一些公共的部分提取出来（这里只是简单的提取）

  //基类 有共同的提出来
  function basePet() {
    this.register=function () {
      document.write("宠物登记...<br>");
    }
    this.eat=function () {
      document.write("宠物吃饭...<br>");
    }
  }

（4）各个实现类 ---这里是各种动物

  function Dog() {
    Dog.superClass.constructor.call(this);//继承父类
    //实现接口部分
    this.run=function () {
      document.write("小狗跑......<br>")
    }
    this.sing=function () {
      document.write("小狗唱歌......<br>")
    }
  }

  function Cat() {
    Cat.superClass.constructor.call(this);//继承父类
    //实现接口部分
    this.run=function () {
      document.write("小猫跑......<br>")
    }
    this.sing=function () {
      document.write("小猫唱歌......<br>")
    }
  }
  function Pig() {
    Pig.superClass.constructor.call(this);//继承父类
    //实现接口部分
    this.run=function () {
      document.write("小猪跑......<br>")
    }
    this.sing=function () {
      document.write("小猪唱歌......<br>")
    }
  }
  function Bird() {
    Bird.superClass.constructor.call(this);//继承父类
    //实现接口部分
    this.run=function () {
      document.write("小鸟跑......<br>")
    }
    this.sing=function () {
      document.write("小鸟唱歌......<br>")
    }
  }

（5）各个实现类继承基类

//继承
extend(Dog,basePet);
extend(Cat,basePet);
extend(Pig,basePet);
extend(Bird,basePet);

（6）创建宠物的开始卖宠物

var newPetShop=new PetShop();
  var flowerPig=newPetShop.sellPet("pig");
  flowerPig.run();

结果为：

JavaScript设计模式--简单工厂模式定义与应用案例详解

总结一下，上述好像没怎么体现有关工厂之类的，我们应该注意到这么一个问题就是：当需要增加一个新品种宠物时，我们需要修改 '宠物店类'，耦合度较高。

为了解决这个问题我们使用简单工厂模式来解决。

2，简单工厂模式（针对上述的改进）

（1）接口文件与继承文件的的引入  同上面

（2）静态工厂

//使用工厂方式创建宠物对象 
// 静态工厂
  var factoryPet={
    //出售宠物的方法
    getPet:function (kind) {
      //宠物对象
      var pet;
      //宠物种类
      switch (kind){
        case 'dog':
          pet=new Dog();
          break;
        case 'cat':
          pet=new Cat();
          break;
        case 'pig':
          pet=new Pig();
          break;
        default:
          pet=new Bird();
      }
      //验证接口
      Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
      return pet;
    }
  }

（3）利用工厂创建宠物店对象

 var factoryPetShop=function () {}
  factoryPetShop.prototype={
    getPet:function (kind) {
      var pet=factoryPet.getPet(kind);
      pet.eat();
      pet.register();
      return pet;
    }
  }

（4）从宠物店购买宠物实现

 var newPetShop=new factoryPetShop();
  var flowerCat=newPetShop.getPet("cat");
  flowerCat.sing();

（5）使用简单工厂实现的全部代码（数字标号表示其思考的先后顺序）

(function () {
  //(2)接口调用
  var Pet=new Interface("Pet",["eat","run","sing","register"]);

  //（3）基类 分析后有共同的提出来作为基类
  function basePet() {
    this.register=function () {
      document.write("宠物登记。。。。<br>");
    }
    this.eat=function () {
      document.write("宠物吃饭。。。。<br>");
    }
  }
  //（4）实现类 继承基类+接口实现
  function Dog() {
    Dog.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小狗跑......<br>")
    }
    this.sing=function () {
      document.write("小狗唱歌......<br>")
    }
  }
  function Cat() {
    Cat.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猫跑......<br>")
    }
    this.sing=function () {
      document.write("小猫唱歌......<br>")
    }
  }
  function Pig() {
    Pig.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猪跑......<br>")
    }
    this.sing=function () {
      document.write("小猪唱歌......<br>")
    }
  }
  function Bird() {
    Bird.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小鸟跑......<br>")
    }
    this.sing=function () {
      document.write("小鸟唱歌......<br>")
    }
  }
  //继承
  extend(Dog,basePet);
  extend(Cat,basePet);
  extend(Pig,basePet);
  extend(Bird,basePet);


  //（1）使用工厂方式创建宠物对象
  // 静态工厂
  var factoryPet={
    //出售宠物的方法
    getPet:function (kind) {
      //宠物对象
      var pet;
      //宠物种类
      switch (kind){
        case 'dog':
          pet=new Dog();
          break;
        case 'cat':
          pet=new Cat();
          break;
        case 'pig':
          pet=new Pig();
          break;
        default:
          pet=new Bird();
      }
      //验证接口
      Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
      return pet;
    }
  }
  //（5）利用工厂的宠物店对象（宠物店买宠物）
  var factoryPetShop=function () {}
  factoryPetShop.prototype={
    getPet:function (kind) {
      var pet=factoryPet.getPet(kind);
      pet.eat();
      pet.register();
      return pet;
    }
  }
//（6）从宠物店购买宠物
  var newPetShop=new factoryPetShop();//宠物工厂
  var flowerCat=newPetShop.getPet("cat");//从宠物工厂中得到宠物
  flowerCat.sing();

})()

总结一下，上述看似完美，但是任有问题存在：比如说：张三的宠物店想卖哈士奇，李四的宠物店想卖鸟时，这样的话，宠物都是通过一个工厂生产的，并不一定满足各个卖家的需求。

所以我们需要根据各个厂家的需求，有不同的工厂，各个卖家可以根据自己需求使用不同的工厂（其实是利用不同子类实现各自合适的工厂），用于满足每个宠物店的不同。

于是我们有了复杂的工厂用来解决该问题。

3，复杂工厂：通过把实例化的任务交给子类来完成的，用以到达松耦合的目的。

此处同样是根据上述进行改进的，还是简单的说明一下实现过程

（1）在html中将接口文件的引进，代码为

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name：接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函数名必须是字符串类型");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
Interface.ensureImplement=function (object) {
  if(arguments.length<2){
    throw new Error("参数必须不少于2个")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是Interface类型
    if(inter.constructor!=Interface){
      throw new Error("如果是接口类的话，就必须是Interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

      //object[method]传入的函数
      //最终是判断传入的函数是否与接口中所用函数匹配
      if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
        throw new Error("实现类中没有完全实现接口中的所有方法")
      }
    }
  }
}

（2）在html中将继承文件引入，代码如下，

/*创建extend函数为了程序中所有的继承操作*/
//subClass:子类 superClass：超类
function extend(subClass,superClass) {
  //1，使子类原型属性等于父类的原型属性

  //初始化一个中间空对象，目的是为了转换主父关系
  var F = function () {};
  F.prototype = superClass.prototype;
  //2， 让子类继承F
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
  //3，为子类增加属性 superClass ==》原型链的引用
  subClass.superClass = superClass.prototype;
  //4，增加一个保险，就算你的原型类是超类（Object）那么也要把你的构造函数级别降下来
  if (superClass.prototype.constructor == Object.prototype.constructor) {
    superClass.prototype.constructor = superClass;
  }
}

（3）分析各个类提出相同的部分作为基类，基类代码如下

//基类 分析后有共同的提出来作为基类
  function basePet() {
    this.register=function () {
      document.write("宠物登记。。。。<br>");
    };
    this.eat=function () {
      document.write("宠物吃饭。。。。<br>");
    }
  }

（4）各个具体的实现类：继承基类+接口实现

//各个宠物类（实现类） 继承基类+接口实现
  function Dog() {
    Dog.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小狗跑......<br>")
    }
    this.sing=function () {
      document.write("小狗唱歌......<br>")
    }
  }
  function Cat() {
    Cat.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猫跑......<br>")
    }
    this.sing=function () {
      document.write("小猫唱歌......<br>")
    }
  }
  function Pig() {
    Pig.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猪跑......<br>")
    }
    this.sing=function () {
      document.write("小猪唱歌......<br>")
    }
  }
  function Bird() {
    Bird.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小鸟跑......<br>")
    };
    this.sing=function () {
      document.write("小鸟唱歌......<br>")
    }
  }

（5）实现类与基类的继承实现，代码如下（调用extend（））

extend(Dog,basePet);//动物狗继承基类
  extend(Cat,basePet);
  extend(Pig,basePet);
  extend(Bird,basePet);

（6）将商店抽取出来，做成抽象类，代码如下

//把核心商店抽取出来
  var petShop=function () {};
    petShop.prototype={//模拟抽象类 需要被子类覆盖
      getPet:function (kind){
        var pet=this.getpet(kind);
        pet.eat();
        pet.register();
        return pet;
      },
      getpet:function (model){
       throw new Error("该类是抽象类，不能实例化")

      }
    };

（7）利用子类来满足各个商家的不同类型宠物店的实现 ，代码如下

//利用子类来满足之前的需求（多态）
  var oneShop=function () { }
    extend(oneShop,petShop);//继承
    //覆写方法
   oneShop.prototype.getpet=function (model) {
     //宠物对象
     var pet;
     //宠物种类
     switch (model){
       case 'dog':
         pet=new Dog();
         break;
       default:
         pet=new Bird();
     }
     //验证接口
     Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
     pet.eat();
     pet.register();
     return pet;
   };

同上，这个也是一个不同的子类

 twoShop=function () {};
  extend(twoShop,petShop);//商店的继承
  //覆写方法
   twoShop.prototype.getPet=function (model) {
     //宠物对象
     var pet;
     //宠物种类
     switch (kind){
       case 'pig':
         pet=new Pig();
         break;
       default:
         pet=new Bird();
     }
     //验证接口
     Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
     pet.eat();
     pet.register();
     return pet;
   };

（8） 使用，实质是子类对父类的实例化

这里实现其中一个宠物店，另外一个同理。

//子类对父类的实例化
  var jim=new oneShop();
   var pig= jim.getpet("dog");
    pig.run();
    pig.sing()

（9）上述代码综合在一起为，代码如下

(function () {
  //(2)接口调用
  var Pet=new Interface("Pet",["eat","run","sing","register"]);

  //（1）基类 分析后有共同的提出来作为基类
  function basePet() {
    this.register=function () {
      document.write("宠物登记。。。。<br>");
    };
    this.eat=function () {
      document.write("宠物吃饭。。。。<br>");
    }
  }
  //（3）实现类 继承基类+接口实现
  function Dog() {
    Dog.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小狗跑......<br>")
    }
    this.sing=function () {
      document.write("小狗唱歌......<br>")
    }
  }
  function Cat() {
    Cat.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猫跑......<br>")
    }
    this.sing=function () {
      document.write("小猫唱歌......<br>")
    }
  }
  function Pig() {
    Pig.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猪跑......<br>")
    }
    this.sing=function () {
      document.write("小猪唱歌......<br>")
    }
  }
  function Bird() {
    Bird.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小鸟跑......<br>")
    };
    this.sing=function () {
      document.write("小鸟唱歌......<br>")
    }
  }
   //继承
  extend(Dog,basePet);//宠物的继承
  extend(Cat,basePet);
  extend(Pig,basePet);
  extend(Bird,basePet);

  //（4）把核心商店抽取出来
  var petShop=function () {};
    petShop.prototype={//模拟抽象类 需要被子类覆盖
      getPet:function (kind){
        var pet=this.getpet(kind);
        pet.eat();
        pet.register();
        return pet;
      },
      getpet:function (model){
       throw new Error("该类是抽象类，不能实例化")

      }
    };
     //（5）商店1 利用子类来满足之前的需求（多态）
  var oneShop=function () { }
    extend(oneShop,petShop);//继承
    //覆写方法
   oneShop.prototype.getpet=function (model) {
     //宠物对象
     var pet;
     //宠物种类
     switch (model){
       case 'dog':
         pet=new Dog();
         break;
       default:
         pet=new Bird();
     }
     //验证接口
     Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
     pet.eat();
     pet.register();
     return pet;
   };

    //（5）商店2
  twoShop=function () {};
  extend(twoShop,petShop);//商店的继承
  //覆写方法
   twoShop.prototype.getPet=function (model) {
     //宠物对象
     var pet;
     //宠物种类
     switch (kind){
       case 'pig':
         pet=new Pig();
         break;
       default:
         pet=new Bird();
     }
     //验证接口
     Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
     pet.eat();
     pet.register();
     return pet;
   };
   //（6）使用 子类对父类的实例化
  var jim=new oneShop();//开宠物店
   var pig= jim.getpet("dog");//从宠物店得到宠物
    pig.run();//宠物功能
    pig.sing()

})();

注：代码中的注释编号表示其大概思考过程及实现顺序。

总结一下，在该个模式中主要体现在多态多一点。现在我们将前面的各种综合在一起使用JavaScript的eval()做一个智能化的工厂。

4，通过eval()实现智能化工厂

（1）接口文件和继承文件的引入，如上述的一模一样，这里将不再重复贴代码了，直接开始我们的新东西吧。

（2）接口调用

 var Pet=new Interface("Pet",["eat","run","sing","register"]);

（3）将相同部分提取出来（简单的提取）

//基类 分析后有共同的提出来作为基类
  function basePet() {
    this.register=function () {
      document.write("宠物登记。。。。<br>");
    };
    this.eat=function () {
      document.write("宠物吃饭。。。。<br>");
    }
  }

（4）各动物类

//实现类 继承基类+接口实现
  function Dog() {
    Dog.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小狗跑......<br>")
    }
    this.sing=function () {
      document.write("小狗唱歌......<br>")
    }
  }
  function Cat() {
    Cat.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猫跑......<br>")
    }
    this.sing=function () {
      document.write("小猫唱歌......<br>")
    }
  }
  function Pig() {
    Pig.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猪跑......<br>")
    }
    this.sing=function () {
      document.write("小猪唱歌......<br>")
    }
  }
  function Bird() {
    Bird.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小鸟跑......<br>")
    };
    this.sing=function () {
      document.write("小鸟唱歌......<br>")
    }
  }

（5）实现各动物类继承基类

//继承
  extend(Dog,basePet);
  extend(Cat,basePet);
  extend(Pig,basePet);
  extend(Bird,basePet);

（6）将商店核心抽取出来，做成一个抽象类，代码如下，

var petShop=function () {};
  petShop.prototype={//模拟抽象类 需要被子类覆盖
    getPet:function (kind){
      var pet=this.getpet(kind);
      pet.eat();
      pet.register();
      return pet;
    },
    getpet:function (model){
      throw new Error("该类是抽象类，不能实例化")

    }
  };
//这里是做成抽象类其中的getpet方法是通过子类实现的。

（7）做一个智能工厂

  //(5)智能工厂 只负责生成宠物
  var PetFactory={
    sellPet:function (kind) {
      var pet;
      pet=eval("new "+kind+"()");
      Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
      return pet;
    }
  }

 （8）利用子类来满足各个商家的不同类型宠物店的实现 ，代码如下

其中一个子类

//利用子类来满足各个商家的不同类型宠物店的实现 （多态）
  var oneShop=function () { };
  extend(oneShop,petShop);//继承
  //覆写方法
  oneShop.prototype.getpet=function (model) {
    //宠物对象
    var pet=null;
    //宠物种类
    var pets=["Dog","Cat","Bird"];//商店自己拥有的宠物 宠物货架
    for(v in pets){//循环出索引
      if(pets[v]==model){//model是我们自己传递过来需要创建的宠物
      pet=PetFactory.sellPet(model);
        //验证接口
    Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
        pet.eat();
        pet.register();
        break;
      }
    }
    return pet;

 另一个子类

//（商店2）利用子类来满足各个商家的不同类型宠物店的实现 （多态）
  twoShop=function () {};
  extend(twoShop,petShop);//商店的继承
  //覆写方法
  twoShop.prototype.getPet=function (model) {
    //宠物对象
    var pet=null;
    //宠物种类
    var pets=["Pig"];//商店自己拥有的宠物
    for(v in pets){//循环出索引
      if(pets[v]==model){
        pet=PetFactory.sellPet(model);
        //验证接口
        Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
        pet.eat();
        pet.register();
        break;
      }
    }
    return pet;
  };

（9）实现开宠物店卖宠物

这里我们来开第二个商店，卖Pig

 var shop=new twoShop();//创建商店
 var pet=shop.getPet("Pig");//从商店中得到宠物
   pet.run();//宠物的功能

（10）智能化工厂的代码

(function () {
  //(1)接口调用
  var Pet=new Interface("Pet",["eat","run","sing","register"]);
  //（2）基类 分析后有共同的提出来作为基类
  function basePet() {
    this.register=function () {
      document.write("宠物登记。。。。<br>");
    };
    this.eat=function () {
      document.write("宠物吃饭。。。。<br>");
    }
  }
  //（3）各个动物类（实现类） 继承基类+接口实现
  function Dog() {
    Dog.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小狗跑......<br>")
    }
    this.sing=function () {
      document.write("小狗唱歌......<br>")
    }
  }
  function Cat() {
    Cat.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猫跑......<br>")
    }
    this.sing=function () {
      document.write("小猫唱歌......<br>")
    }
  }
  function Pig() {
    Pig.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小猪跑......<br>")
    }
    this.sing=function () {
      document.write("小猪唱歌......<br>")
    }
  }
  function Bird() {
    Bird.superClass.constructor.call(this);//继承父类
    //实现接口
    this.run=function () {
      document.write("小鸟跑......<br>")
    };
    this.sing=function () {
      document.write("小鸟唱歌......<br>")
    }
  }
  //继承
  extend(Dog,basePet);
  extend(Cat,basePet);
  extend(Pig,basePet);
  extend(Bird,basePet);
  //(4)把核心商店抽取出来
  var petShop=function () {};
  petShop.prototype={//模拟抽象类 需要被子类覆盖
    getPet:function (kind){
      var pet=this.getpet(kind);
      pet.eat();
      pet.register();
      return pet;
    },
    getpet:function (model){
      throw new Error("该类是抽象类，不能实例化")

    }
  };

  //(5)智能工厂 只负责生成宠物
  var PetFactory={
    sellPet:function (kind) {
      var pet;
      pet=eval("new "+kind+"()");
      Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
      return pet;
    }
  }

  //(6)（商店1）利用子类来满足各个商家的不同类型宠物店的实现 （多态）
  var oneShop=function () { };
  extend(oneShop,petShop);//继承
  //覆写方法
  oneShop.prototype.getpet=function (model) {
    //宠物对象
    var pet=null;
    //宠物种类
    var pets=["Dog","Cat","Bird"];//商店自己拥有的宠物 宠物货架
    for(v in pets){//循环出索引
      if(pets[v]==model){//model是我们自己传递过来需要创建的宠物
      pet=PetFactory.sellPet(model);
        //验证接口
    Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
        pet.eat();
        pet.register();
        break;
      }
    }
    return pet;
  };

  //（商店2）利用子类来满足各个商家的不同类型宠物店的实现 （多态）
  twoShop=function () {};
  extend(twoShop,petShop);//商店的继承
  //覆写方法
  twoShop.prototype.getPet=function (model) {
    //宠物对象
    var pet=null;
    //宠物种类
    var pets=["Pig"];//商店自己拥有的宠物
    for(v in pets){//循环出索引
      if(pets[v]==model){
        pet=PetFactory.sellPet(model);
        //验证接口
        Interface.ensureImplement(pet,Pet);//判断pet对象是否全部实行接口Pet里面全部的方法
        pet.eat();
        pet.register();
        break;
      }
    }
    return pet;
  };
//（7）开宠物店卖宠物
  var shop=new twoShop();
 var pet=shop.getPet("Pig");
   pet.run();

})();

总结一下，该种智能化工厂的特点体现在我们需要什么宠物店时，我们可以直接通过智能化工厂创建。很完美。

 3，工厂模式的使用场景

1.需要根据不同参数产生不同实例，这些实例有一些共性的场景

2.使用者只需要使用产品，不需要知道产品的创建细节

注意：除非是适用场景，否则不可滥用工厂模式，会造成代码的复杂度。

4.简单工厂模式优点

1.工厂类集中了所有对象的创建，便于对象创建的统一管理

2.对象的使用者仅仅是使用产品，实现了单一职责

3.便于扩展，如果新增了一种业务，只需要增加相关的业务对象类和工厂类中的生产业务对象的方法，不需要修改其他的地方。

最新文章 相关文章

Vue3中的Ref与Reactive：深入理解响应式编程

前言Vue 3是一个功能强大的前端框架，它引入了一些令人兴奋的新特性，其中最引人注目的是ref和reactive。这两个API是Vue 3中响应式编程的核心，本文将深入探讨它们的用法和差异。

2024-03-08 18:26:40

玩转Vue3之Composables

前言Composables 称之为可组合项，熟悉 react 的同学喜欢称之为 hooks ，由于可组合项的存在，Vue3 中的组件之间共享状态比以往任何时候都更容易。这种新范例引入了一种更有组织

2024-03-08 18:26:16

初识JavaScript逆向——以网易云音乐和招标网站为例

前言：需要掌握一定的JavaScript基础，能看懂基础的JavaScript代码。我们平常在浏览网站的时候会看到许多加密的参数，如果需要知道它的原始数据，就需要知道整个加密过程，所以本篇文

2024-03-01 22:24:26

答应我，在vue中不要滥用watch好吗？

前言上周五晚上8点，开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求，并且维护这一块业务的同事已经下班走了，所以只有我来做。虽然内心一万头草泥

2024-02-29 23:58:27

Vue 3 的 setup语法糖到底是什么东西？

前言我们每天写vue3项目的时候都会使用setup语法糖，但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以

2024-02-26 22:34:42

使用jQuery实现复选框选中状态的实时更新

在Web开发中，常常会遇到需要对复选框选中状态进行实时更新的情况。通过使用jQuery，我们可以很方便地实现实时更新复选框选中状态的功能。下面将介绍如何使用jQuery来完成这个

2024-02-23 15:50:34

简明指南：使用 jQuery 改变表格行属性值的方法

标题：简明指南：使用 jQuery 改变表格行属性值的方法在网页开发过程中，经常会遇到需要动态改变表格行属性值的情况。jQuery作为一个流行的JavaScript库，可以很方便地实现这一功能

2024-02-23 15:50:11

jQuery技巧：掌握在div中添加标签的方法

标题：jQuery技巧：掌握在div中添加标签的方法在网页开发中，经常会遇到需要动态添加标签到页面中的情况。使用jQuery可以方便地操作DOM元素，实现快速的标签添加功能。本文将介绍如

2024-02-23 15:49:47

jQuery中get和post方法的区别解析

jQuery中get和post方法的区别解析在使用jQuery来进行Ajax请求时，我们经常会用到get和post方法来获取或提交数据。虽然它们都是用来发送Ajax请求的方法，但在实际应用中有着一些

2024-02-23 15:49:23

jQuery中如何实现select元素的改变事件绑定

jQuery是一个流行的JavaScript库，可以用来简化DOM操作、事件处理、动画效果等。在web开发中，经常会遇到需要对select元素进行改变事件绑定的情况。本文将介绍如何使用jQuery实

2024-02-23 15:48:42

let、var和const的区别与特点：它们分别代表什么含义？

在JavaScript中，let、var和const是用于声明变量的关键字。它们各自具有不同的区别和特点。 let：
let关键字是ES6引入的，它允许我们声明一个块级作用域的变量。块级作用域是指变

2024-02-23 15:48:20

JavaScript 的新数组分组方法

对数组中的项目进行分组，你可能已经做过很多次了。每次都会手动编写一个分组函数，或者使用 lodash 的 groupBy 函数。好消息是，JavaScript 现在有了分组方法，所以你再也不必这样

2024-02-22 22:35:00

零基础入门Vue之画龙点睛——再探监测数据

追忆上一节：零基础入门Vue之影分身之术——列表渲染&渲染原理浅析虽然我深知，大佬告诉我”先学应用层在了解底层，以应用层去理解底层“，但Vue的数据如何检

2024-02-07 16:58:20

从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架

项目代码以上传至码云，项目地址：https://gitee.com/breezefaith/vue-ts-scaffold 目录 前言 脚手架技术栈简介 vue3 TypeScript Pinia Tailwind CSS Element Plus vite

2024-02-02 10:44:14

uni-app+vue3会遇到哪些问题

已经用 uni-app+vue3+ts 开发了一段时间，记录一下日常遇见的问题和解决办法uni-app 中的单端代码uni-app 是支持多端，如果你想让你的代码，只在部分平台使用，那么就需要用的它的

2024-02-02 10:42:59

VUE3子表格嵌套分页查询互相干扰的问题解决

VUE3在表格中嵌套子表格
子表格的分页查询互相干扰的问题解决简单嵌套如果不需要做子表格的分页查询，那么可以直接在主表格中嵌套子表格，有两种方式；一种是主表格加载的同时加

2024-01-30 11:46:58

NextJs 与 Tailwind 入门开发笔记

前言距离上次更新已经过去好久了，之前我在 StarBlog 博客2023年底更新一览的文章里说要使用 Next.js 来重构博客前端，最近也确实用 next.js 做了两个小项目，一个是单点认证项目

2024-01-28 14:51:12

JS的垃圾回收机制

垃圾回收是计算机编程中的一个术语，用来描述查找和删除那些不再被其他对象引用的对象的处理过程。换句话说，垃圾回收是删除任何其他对象未使用的对象的过程。如果没有垃圾回收

2024-01-28 14:46:14

Gin 框架之jwt 介绍与基本使用

目录 一.JWT 介绍 二.JWT认证与session认证的区别 2.1 基于session认证流程图 2.2 基于jwt认证流程图 三. JWT 的构成 3.1 header : 头部 3.2 payload : 负载 3.

2024-01-28 14:36:05

详细介绍 TypeScript 函数的各种特性、用法和最佳实践

TypeScript 是一种在 JavaScript 基础上构建的编程语言，它为 JavaScript 提供了静态类型检查和更强大的面向对象编程能力。函数作为编程语言中的基本构建块，在 TypeScript 中

2024-01-24 23:21:17

根据select的data-*属性更改图片img的src链接JQ实例

直接上实例代码：<img id="brandIcon" src="" /> <script language="JavaScript" type="text/javascript" > function setBeerIcon() { var classimg = $("#beer").fi

2024-01-24 23:20:54

lottie 动画在 vue 中的使用

前言最近我所负责的项目中，我采用了动画效果，并开始使用 gif 来实现。然而，在实践过程中，我发现 gif 格式的动画在 git 中出现了明显的锯齿感，这让我非常困扰。为了追求更完美的

2024-01-24 23:20:28

vue3+ts打开echarts的正确方式

准备工作1. 注册为百度地图开发者官网地址，然后在 应用管理 -> 我的应用 里，创建应用，创建好后复制 AK
2. 在根目录的 index.html 里引入百度地图<head> <meta charset="UTF-8

2024-01-24 23:20:06

React 类组件转换为函数式

函数式的 React 组件更加现代，并支持有用的 hooks，现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。通用替换定义从class (\w+) extends

2024-01-24 23:19:44

vue 2实战系列 —— 复习Vue

复习Vue近期需要接手 vue 2的项目，许久未写，语法有些陌生。本篇将较全面复习 vue 2。Tip: 项目是基于 ant-design-vue-proant-design-vue-pro由于 cms 是基于这个项目开发的，所

2024-01-24 23:18:35

node node-sass sass-loader版本兼容问题

相关概念sassSass是一种预处理器脚本语言，可以解释或编译成层叠样式表（CSS）。Sass包含两种语法：较旧的语法使用缩进将代码块和换行符分隔为单独的规则；较新的语法SCSS使用像CSS这

2024-01-24 23:18:15

Next.js 开发指南 初始篇 | Next.js CLI

前言欢迎学习 Next.js！在学习具体的知识点之前，我们先来创建一个 Next.js 项目。创建了可运行的项目，才能在学习的时候边调试边理解，从而达到事半功倍的效果。幸运的是，Next.js

2024-01-24 23:17:34

扩展 jQurey.i18n.properties 的能力来向 vue-i18n 靠齐

jQuery.i18n.properties 是 jQuery 老项目的国际化框架，其实国际化方案本质上都大同小异，都是需要用翻译函数包裹词条，然后根据词条文件来进行翻译就是使用上与其他框架不太一

2024-01-24 23:17:11

vue模板的首次渲染，和重新渲染，有哪些区别？

搞明白这个，能帮助我们理解开发中出现的很多问题。一、我们先来回顾一下vue模板的渲染过程：（1）执行render函数，生成虚拟DOM。render函数是根据render、templete、el这三个选项得

2024-01-24 23:16:53

直接在*.vue文件（SFC）中使用JSX/TSX渲染函数，真香!

前言在日常开发中vue的模版语法在大多数情况都能够满足我们的需求，但是在一些复杂的业务场景中使用模版语法就有些麻烦了。这个时候灵活的JSX/TSX渲染函数就能派上用场了，大多

2024-01-24 23:16:31

热点内容

微信百度网盘小程序文件分享链接提取
2019-07-09
uni-app微信小程序登录授权的实现
2020-05-22
Vue 实现可视化拖拽页面编辑器
2021-02-01
vant组件中 dialog的确认按钮的回调事件操作
2020-11-04
Vue中ref和$refs的介绍以及使用方法示例
2021-01-11
vue element-ui实现input输入框金额数字添加千分位
2020-05-27
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020-05-27
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020-05-27
微信小程序实现二维码签到考勤系统
2020-05-27
如何获取监听iframe src属性的改变事件
2020-02-20
返回顶部
顶部