首页 > 编程开发 > JavaScript

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

来自：互联网
时间：2020-05-23
阅读：
免费资源网 - https://freexyz.cn/

本文实例讲述了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.便于扩展，如果新增了一种业务，只需要增加相关的业务对象类和工厂类中的生产业务对象的方法，不需要修改其他的地方。

免费资源网 - https://freexyz.cn/
最新文章 相关文章

在 React 项目中 Editable Table 的实现

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：佳岚可编辑表格在数栈产品中是一种

2024-08-08 21:54:40

神奇的JavaScript弱等价类型转换

JavaScript语言特性 - 类型转换JavaScript这门语言的类型系统从来没有它表面看起来的那样和善，虽然比起Java、C#等一众强类型语言，它的弱类型使用起来似乎是如此便利，但正因为

2024-06-12 11:51:29

vue+element-ui表格自定义列模版的实现

目录前言一、为什么要自定义表列模版？二、实现步骤1.封装表格组件2.父组件引用总结前言日前vue3项目中用element-ui表格封装一个组件，有自定义表列格式的需求，做完后顺手总结一

2024-06-10 00:14:50

webpack打包后index.html引用文件地址问题小结

在前端开发中，src 属性指定的相对路径是相对于当前 HTML 文件的路径，而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。当浏览器解析 HTML 文件中的 <script

2024-06-10 00:14:48

vue跳转时根据url锚点(#xxx)实现页面内容定位的方法

目录介绍一、实现原理二、代码(vue3 setup)三、演示：四、结束介绍本前端仔在做页面跳转的时候，被要求跳转到页面时候，把对应部分的内容自动滚动到顶部~我一开始想到的就是根据

2024-06-10 00:14:46

基于vue3+TypeScript实现一个简易的Calendar组件

目录功能分析功能实现初始化组件分析具体操作Calendar / CalendarCom.vueCalendar / CalendarMonth.vueCalendar / HeaderCom.vue小结总结功能分析目前学到功能有以下几点日

2024-06-10 00:14:43

vue3项目打包成apk(android)详细图文教程

目录一、打包vue3项目1、打包2、解决打包后的文件的白屏问题。二、打包成apk1、创建“5+App”项目2、打包文件移动3、生成apk文件三、生成apk附：vue项目打包时报错

2024-06-10 00:14:40

vue路由懒加载工作原理

Vue路由懒加载是一种优化技术，旨在减少应用程序的初始加载时间并提高性能。具体来说，它允许我们在用户实际需要访问某个路由时，才加载对应的组件代码，而不是在应用程序启动时一

2024-06-10 00:14:37

vue2项目使用exceljs多表头导出功能详解

目录前言一、插件安装二、数据准备三、插件引入四、导出前数据处理1、按exceljs格式创建导出函数2、表头及列宽数据预处理2.1 处理逻辑3、单元格样式处理函数4、表头数据填

2024-06-10 00:14:35

使用JavaScript截取视频特定帧的实现方法

目录背景1. 监听文件选择2. 捕获视频帧3. 绘制视频帧4. 实现效果结论背景在网页开发中，我们经常需要对媒体文件进行处理，其中包括视频文件。有时候，我们可能需要从视频中提取特

2024-06-10 00:14:33

Node+Express连接MySQL实现增删改查功能

一、在项目中安装mysql 和 expresscnpm install mysql express --save二、示例代码const express = require("express"); const app = express(); const mysql = require("m

2024-06-10 00:14:31

前端报错npm ERR! cb() never called!问题解决办法

目录1.问题描述1.1使用npm install后报错2.解决问题过程2.1看网上大部分的解决方式是：2.2网上还有部分的解决方式是：2.2.1如果你不幸的按照网上使用npm uninstall -g npm升级

2024-06-10 00:14:29

js跨域的几种解决方案

目录一、什么是跨域？二、跨域解决方案方案一：jsonp （json with padding）方案二：CORS (CROSS-Origin Resource Sharing 跨域资源共享)和跨域CORS有关的几个请求头和响应头请求头

2024-06-10 00:14:25

Vue图片懒加载之Vue-Lazyload的使用

目录一、什么叫懒加载二、懒加载的优点三、为什么使用懒加载懒加载原理是什么四、vue中如何实现懒加载五、js---懒加载的实现步骤？懒加载代码实现方式一：原生js方式二： getB

2024-06-10 00:14:22

解决JavaScript精度问题的常见方法

目录引言解决方案一、使用整数进行计算二、使用库函数三、四舍五入优缺点分析1、整数计算方法2、使用库函数方法3、四舍五入方法结论引言在 JavaScript 中，处理浮点数时经常

2024-06-10 00:14:18

使用JS代码实现页面添加水印的方法详解

目录一、水印概括1. 添加水印的好处2. 添加水印的坏处二、技术方案1. watermark 第三方库2. JS 简单实现水印功能三、水印功能实现1. 水印功能需求2. 功能实现3. 步骤解析3.

2024-06-10 00:14:16

微信小程序中实现自定义Navbar方法详解

目录前言StatusBar高度TitleBar高度编写Navbar组件使用最终效果前言自定义 navbar 应该是很常见的需求。要自定义一个 navbar 并不难，只需要了解其组成部分即可。从上面的图

2024-06-10 00:14:13

axios对外出口API的设计方法

目录axios 的 2 种使用方式请求方法别名Axios 类Axios.prototype.request()axios.defaults/interceptors请求方法别名导出 axios如果直接导出 Axios总结本文我们将讨论 axio

2024-06-10 00:14:11

js实现WebSocket 连接的示例代码

目录一.WebSocket 简单介绍1.HTTP和WebSocket的区别2.WebSocket应用场景二.js使用WebSocket1.创建WebSocket实例2.属性3.方法4.事件5.使用示例一.WebSocket 简单介绍1.HTTP

2024-06-10 00:14:10

保姆级Decimal.js使用教程(解决js精度问题)

目录精度问题控制台图样01.引入Decimal.js02.使用加减乘除全上附：Vue项目完整例子总结 精度问题控制台图样如果银行的业务你这样做，不知道要损失多少钱，这样是不行的，计算的不准

2024-06-10 00:14:07

使用Vue3实现在浏览器端进行zip文件压缩

在前端开发中，我们时常需要处理文件上传和下载的功能。有时，用户可能希望将多个文件打包成一个zip文件以便于下载。我这里分享一个使用Vue3和JSZip库在浏览器端实现zip文件压

2024-06-10 00:14:04

axios拦截器机制的实现原理详解

目录axios 拦截器简介Axios 实例拦截器类拦截器实现原理收集拦截器拼接请求链由请求链结构看错误处理第一个请求拦截器出错最后一个请求拦截器出错axios 请求出错响应拦截器

2024-06-10 00:14:02

Python实现图片二值化的详细代码

目录1. 什么是二值化2. 二值化的作用3. 二值化的实现4.代码实现1. 什么是二值化图像二值化就是将图像上的像素点的“灰度值”设置为[0, 0, 0]或[255, 255, 255]，即

2024-06-10 00:14:00

printJS打印问题汇总以及解决办法

目录一、打印预览表格列不全（Element的el-table组件）1、打印设置“打印缩放”2、修改el——table的底层代码（如果页面上有多个表格慎用） 二、如何解决vue p

2024-06-10 00:13:57

vue前端实现login页登陆验证码代码示例

实现效果// template<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container"> <span

2024-06-10 00:13:55

vue3中element Plus插槽示例详解

vue3中element Plus插槽，实现代码如下所示： <el-table-column property="" label="操作" width="200" show-overflow-tooltip> <template

2024-06-10 00:13:52

如何在JavaScript实现Blob文件流下载

目录一、下载二、请求三、示例总结一、下载在 JavaScript 中，可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。下面是一个示例代码，可以帮助

2024-06-10 00:13:50

详解Javascript如何通过async/await优雅地使用FileReader

目录封装成方法Javascript封装成一个classTypeScript封装成一个classTypeScript基于泛型FileReader的使用机会很多，但是它是异步的，因此很容易出现回调地狱。我们可以使用asyn

2024-06-10 00:13:48

使用Webstorm调试Vue代码详细图文教程

在我们前端开发过程中相信很多人都是通过console.log来调试我们的代码的，但是当代码复杂度比较高的时候这个方法就比较鸡肋了。这里我来教大家在Webstorm中如何来调试自己的

2024-06-10 00:13:47

浅析Vue3中Excel下载模板并导入数据功能的实现

目录上传功能介绍一下 POI OOXML 的使用下载模板功能实现上传导入上传功能代码一<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>

2024-06-10 00:13:43

热点内容

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