javaScript设计模式系列（四） 工厂模式

最新推荐文章于 2024-10-14 16:35:14 发布
最新推荐文章于 2024-10-14 16:35:14 发布
阅读量89 收藏
点赞数
文章标签： 设计模式 javascript ViewUI
原文链接：https://my.oschina.net/u/3238663/blog/1204204
版权

前言

工厂这个名词我们可以先分析一下，一般工厂的特点都是大批量的造东西，要是只做一个的话，倒是可以在家搭个小作坊，半年产值一个也是可以的。再有呢，工厂普遍是单一生产，哪怕是产品功能改了，那我就把流水线改一改，换几个机组，大的流程还是不变的。那如果要是，工厂今天造船，明天想造飞机，基本是没戏，造飞机和造船是完全不同的两套流程和设备，这么大的变动，不是一个工厂想改就改的。

正文：

现在正好有一个店家在卖手机，他们自己做手机自己销售，这店家就叫DayDayPhone,买手机的时候呢你告诉他一个牌子，就能买到这个牌子的手机了：

var DayDayPhone = {
  sellPhone:function(brand){
    var Phone;
    switch (brand){
      case 'Apple':
      Phone = new ApplePhone();
      break;
      case 'Huawei':
      Phone = new HuaweiPhone();
      break;
      default 'Xiaomi':
      Phone = new XiaomiPhone();
      break;
    }
    return Phone;
  }
}
function ApplePhone(){};
function HuaweiPhone(){};
function XiaomiPhone(){};
var havePhone = DayDayPhone.sellPhone('Huawei');

这样的销售未免太单调了，所以厂家给了一次抽奖的机会，会帮你开机测试一下，只是区别是抽奖是店家的方法，开机测试呢是手机自带的功能。看起来就是这样：

var DayDayPhone = {
  lottery:function (){
    console.log('您已经使用了一次抽奖机会');
  },
  sellPhone:function(brand){
    var Phone;
    switch (brand){
      case 'Apple':
      Phone = new ApplePhone();
      break;
      case 'Huawei':
      Phone = new HuaweiPhone();
      break;
      default:
      Phone = new XiaomiPhone();
      break;
    }
    this.lottery();
    Phone.starting();
    return Phone;
  }
}
function ApplePhone(){
  this.starting = function(){};
  //其他方法
};
function HuaweiPhone(){
  this.starting = function(){};
  //其他方法
};
function XiaomiPhone(){
  this.starting = function(){};
  //其他方法
};
var havePhone = DayDayPhone.sellPhone('Huawei');

现在看起来一切还好啊，什么工厂什么的，提那些干什么。只是有一天店里可以卖Vivo手机了，于是店长发现了一个问题，我卖手机的流程一点没变，抽个奖，测试一下，手机就是你的了。但是一来新手机店里就要大改，主要就是生产手机的这块，能不能给它交给一个工厂，我拿到货就卖，你们工厂呢来了品牌，无非是改改流水线，很好管理。于是现在的模式就是这样了：

var DayDayPhone = {
  lottery:function (){
    console.log('您已经使用了一次抽奖机会');
  },
  sellPhone:function(){
    var Phone = PhoneFactory.madePhone('Vivo');
    this.lottery();
    Phone.starting();
    return Phone;
  }
}
var PhoneFactory = {
  madePhone:function(brand){
    var FactoryPhone;
    switch (brand){
      case 'Apple':
      FactoryPhone = new ApplePhone();
      break;
      case 'Huawei':
      FactoryPhone = new HuaweiPhone();
      break;
      case 'Vivo':
      FactoryPhone = new VivoPhone();
      break;
      default:
      FactoryPhone = new XiaomiPhone();
      break;
    }
    return FactoryPhone;
  }
}
function VivoPhone(){
  this.starting = function(){};
  this.notice = function(){
    console.log('我新买的Vivo手机');
  }
  //其他方法
};
function ApplePhone(){
  this.starting = function(){};
  //其他方法
};
function HuaweiPhone(){
  this.starting = function(){};
  //其他方法
};
function XiaomiPhone(){
  this.starting = function(){};
  //其他方法
};
var havePhone = DayDayPhone.sellPhone('Huawei');
havePhone.notice();//我新买的Vivo手机

现在我们稍稍改动一下，如果像现在这样，那这就是我一个人的店，要是能用一个方法，给不同的人开店该多好，我只要给我的点起个名字，用一下开店的方法，那我的店就建成了。实际上就是把上面的代码，改写成构造函数的形式：

function PhoneShop() {};
PhoneShop.prototype.lottery = function() {
  console.log('您已经使用了一次抽奖机会');
};
PhoneShop.prototype.sellPhone = function(brand) {
  var Phone = PhoneFactory.madePhone(brand);
  this.lottery();
  Phone.starting();
  return Phone;
}
//以下的代码都没变
var PhoneFactory = {
  madePhone: function(brand) {
    var FactoryPhone;
    switch(brand) {
      case 'Apple':
        FactoryPhone = new ApplePhone();
        break;
      case 'Huawei':
        FactoryPhone = new HuaweiPhone();
        break;
      case 'Vivo':
        FactoryPhone = new VivoPhone();
        break;
      default:
        FactoryPhone = new XiaomiPhone();
        break;
    }
    return FactoryPhone;
  }
}

function VivoPhone() {
  this.starting = function() {};
  this.notice = function() {
    console.log('我新买的Vivo手机');
  }
  //其他方法
};

function ApplePhone() {
  this.starting = function() {};
  //其他方法
};

function HuaweiPhone() {
  this.starting = function() {};
  //其他方法
};

function XiaomiPhone() {
  this.starting = function() {};
  //其他方法
};
var DayDayPhone = new PhoneShop();
var havePhone = DayDayPhone.sellPhone('Huawei');
havePhone.notice(); //我新买的Vivo手机

这样我们其实就完成了一个简单工厂。那工厂模式具体怎么表述呢，我们一会再说，首要目的是先感受一下什么是工厂模式。

上面的代码还是有点不完美，那真正的工厂模式应该是什么样的。我们继续说店长家的故事。虽然工厂被分出去了，看起来很不错很好管理。但是店长觉得这样不行，这工厂原来就是我的，现在分出去了好像跟我一点关系都没有了，而且如果以后要是开始卖平板电脑Ipad，那就是再开了一家工厂。如果像现在这样操作并不是很方便，卖东西的时候要判断顾客买的是平板还是手机：

function PhoneOrIpadShop() {};
PhoneOrIpadShop.prototype.lottery = function() {
  console.log('您已经使用了一次抽奖机会');
};
//传入两个参数第一个判断是手机还是平板电脑，第二个是品牌
PhoneOrIpadShop.prototype.sellPhoneOrIpad = function(kind,brand) {
  var product;
  if(kind === 'Phone'){
     product = PhoneFactory.madePhone(brand);
  }else if(kind === 'Ipad'){
     product = IpadFactory.madeIpad(brand);
  }
  this.lottery();
  product.starting();
  return product;
}
var PhoneFactory = {
  madePhone: function(brand) {
    var FactoryPhone;
    switch(brand) {
      case 'Apple':
        FactoryPhone = new ApplePhone();
        break;
      case 'Huawei':
        FactoryPhone = new HuaweiPhone();
        break;
      case 'Vivo':
        FactoryPhone = new VivoPhone();
        break;
      default:
        FactoryPhone = new XiaomiPhone();
        break;
    }
    return FactoryPhone;
  }
}
var IpadFactory = {
  madeIpad: function(brand) {
    var FactoryIpad;
    switch(brand) {
      case 'Apple':
        FactoryIpad = new AppleIpad();
        break;
      case 'Huawei':
        FactoryIpad = new HuaweiIpad();
        break;
      default:
        FactoryIpad = new XiaomiIpad();
        break;
    }
    return FactoryIpad;
  }
}
//手机
function VivoPhone() {
  this.starting = function() {};
  this.notice = function() {
    console.log('我新买的Vivo手机');
  }
};
function ApplePhone() {this.starting = function() {};};
function HuaweiPhone() {this.starting = function() {};};
function XiaomiPhone() {this.starting = function() {};};
//平板电脑
function AppleIpad() {
  this.starting = function() {};
  this.notice = function() {console.log('新买的苹果平板')};
};
function HuaweiIpad() {this.starting = function() {};};
function XiaomiIpad() {};

var DayDayPhone = new PhoneOrIpadShop();
var havePhone = DayDayPhone.sellPhoneOrIpad("Ipad",'Apple');
havePhone.notice(); //新买的苹果平板

店长愁的一夜白了头，这是一夜回到解放前的节奏啊，本来管理的好好的，结果又像刚开始开店的时候了，要是开始卖自行车了又要大改了，开店的方法（构造函数），要添加种类的判断。我们可不可以通过工厂建造店铺（实例化），这样就可已卖单一商品了，原来的判断就不需要了。也就是把现在的工厂的对象改为构造函数。

那原来的那些活动怎么办，我们就一起拿过来，这就用到了继承。从店长家的店里继承过来，这时候店长家的店就好多了，不需要做哪些判断了，也不用用来作为开店的构造函数来用了，这部分的代码是这样的

继承的方法请看 《javaScript设计模式系列（五） 继承》。。。。 但是我还没有写，先记住一个关键字extend，用法是extend（子类，父类），这样就从继承来了父类原型的方法。

var PhoneFactory = function() {};
//继承父级的方法
extend(PhoneFactory, BaseShop);
PhoneFactory.prototype.madeProduct = function(brand) {
  var Phone;
  switch(brand) {
    case 'Apple':
      Phone = new ApplePhone();
      break;
    case 'Huawei':
      Phone = new HuaweiPhone();
      break;
    case 'Vivo':
      Phone = new VivoPhone();
      break;
    default:
      Phone = new XiaomiPhone();
      break;
  }
  return FactoryPhone;
}
var IpadFactory = function() {};
//继承父级的方法
extend(IpadFactory, BaseShop);
IpadFactory.prototype.madeProduct = function(brand) {
  var Ipad;
  switch(brand) {
    case 'Apple':
      Ipad = new AppleIpad();
      break;
    case 'Huawei':
      Ipad = new HuaweiIpad();
      break;
    default:
      Ipad = new XiaomiIpad();
      break;
  }
  return Ipad;
}

那原来的店已经不需要用来实例化新店了，以前造电子啊产品的方法已经不能用了，怎么告诉别人呢？如果要调用店里制造商品的方法就报一个错误，告诉别人这个方法不能用，应为现在开店是用工厂开了。

function BaseShop() {};
BaseShop.prototype.lottery = function() {
  console.log('您已经使用了一次抽奖机会');
};
BaseShop.prototype.gift = function() {
  console.log('你获得了一些赠品');
};
BaseShop.prototype.sellProduct = function(brand) {
  this.lottery();
  this.gift();
  var Product = this.madeProduct(brand);
  Product.starting();
  return Product;
};
BaseShop.prototype.madeProduct = function() {
  console.log('madeProduct方法不能被使用，因为BaseShop是一个抽象类，不能实例化，只能派生子类');
}

sellProduct 方法不能被使用，它又会被继承到工厂里面怎么办，其实我们已经解决了，在工厂中的代码我们重写了sellProduct方法，覆盖了父级的方法。工厂是挂载基础店下的感觉，又有了基础店的方法。全部的代码就像下面：

function BaseShop() {};
BaseShop.prototype.lottery = function() {
  console.log('您已经使用了一次抽奖机会');
};
BaseShop.prototype.gift = function() {
  console.log('你获得了一些赠品');
};
BaseShop.prototype.sellProduct = function(brand) {
  this.lottery();
  this.gift();
  var Product = this.madeProduct(brand);
  Product.starting();
  return Product;
};
BaseShop.prototype.madeProduct = function() {
  console.log('madeProduct方法不能被使用，因为BaseShop是一个抽象类，不能实例化，只能派生子类');
}

var PhoneFactory = function() {};
//继承父级的方法
extend(PhoneFactory, BaseShop);
PhoneFactory.prototype.madeProduct = function(brand) {
  var Phone;
  switch(brand) {
    case 'Apple':
  Phone = new ApplePhone();
  break;
case 'Huawei':
  Phone = new HuaweiPhone();
  break;
case 'Vivo':
      Phone = new VivoPhone();
      break;
    default:
      Phone = new XiaomiPhone();
      break;
  }
  Interface.ensureImplements(Phone,PhoneInterface);
  return Phone;
}
var IpadFactory = function() {};
//继承父级的方法
extend(IpadFactory, BaseShop);
IpadFactory.prototype.madeProduct = function(brand) {
  var Ipad;
  switch(brand) {
    case 'Apple':
  Ipad = new AppleIpad();
  break;
case 'Huawei':
      Ipad = new HuaweiIpad();
      break;
    default:
      Ipad = new XiaomiIpad();
      break;
  }
  Interface.ensureImplements(Ipad,IpadInterface);
  return Ipad;
}
//手机
var PhoneInterface = new Interface('PhoneInterface',['starting','notice']);
function VivoPhone() {
  this.starting = function() {};
  this.notice = function() {
    console.log('我新买的Vivo手机');
  }
};

function ApplePhone() {
  this.starting = function() {};
};

function HuaweiPhone() {
  this.starting = function() {};
};

function XiaomiPhone() {
  this.starting = function() {};
};
//平板电脑
var IpadInterface = new Interface('IpadInterface',['starting','notice']);
function AppleIpad() {
  this.starting = function() {};
  this.notice = function() {
    console.log('新买的苹果平板')
  };
};

function HuaweiIpad() {
  this.starting = function() {};
};

function XiaomiIpad() {
  this.starting = function() {};
};

var DayDayPhone = new IpadFactory();
var havePhone = DayDayPhone.sellProduct('Apple');
havePhone.notice(); //新买的苹果平板

总结一下，工厂模式可一实现松耦合，把公用的代码集中在一个地方，个体的代码写在子类中，这样如果需要较多的子类去组成一个较大的对象是很好管理的。

转载于:https://my.oschina.net/u/3238663/blog/1204204

chu23623
关注
JavaScript设计模式之工厂方法模式介绍
10-24
工厂方法模式是一种创建型设计模式，它的核心思想是定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法模式将对象的创建和使用分离，这样可以降低系统的耦合度，提高灵活性。在JavaScript中，这种模式...
javascript设计模式 – 抽象工厂模式原理与应用实例分析
10-15
抽象工厂模式是设计模式中的一种，它属于对象创建型模式，尤其在JavaScript中，当我们面临多个相关产品的创建时，抽象工厂模式能提供一种更为灵活的解决方案。这种模式的主要目标是提供一个接口，用于创建一系列相关...
JavaScript中的设计模式
l12345666777的博客
11-21 1195
JavaScript中有四种常见的设计模式 ，目的是为了批量创建对象 为了实现继承。
javascript设计模式之工厂模式
热门推荐
object not found的博客
08-12 1万+
函数creatPerson（）接受了三个参数，根据这几个参数创建了一个包含person信息的对象，可以用不同的参数去多次调用这个对象，而它就回每次都返回3个属性和一个方法的对象，虽然这种工厂模式可以解决创建多个相似对象的问题，但是他没有解决对象标识的问题，到这里可能有小伙伴不知道对象标识是什么，解释一下对象标识就是我们创建的对象是什么类型。工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。.........
JavaScript设计模式
木木木森林
11-16 969
设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖
JavaScript设计模式：四、发布订阅模式
SpringWaterLikeMe
05-03 2548
JavaScript设计模式：四、发布订阅模式 文章目录JavaScript设计模式：四、发布订阅模式一、概述1. 观察者模式2. 发布订阅模式3. 观察者模式是不是发布订阅模式 一、概述 观察者模式： 观察者（Observer）直接订阅（Subscribe）主题（Subject），而当主题被激活的时候，会触发（Fire Event）观察者里的事件。 发布订阅模式： 订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Topic），当发布者（Publisher）发布该事件（
JavaScript的设计模式
qq_29579625的博客
10-05 786
JavaScript设计模式是指在面向对象编程中，通过对类和对象进行抽象和泛化，提取出一些通用的设计思路和解决方案，以解决常见的软件设计问题。
JavaScript设计模式（二）——简单工厂模式、抽象工厂模式、建造者模式
HuoZhiyan 的博客
08-29 1436
本篇文章介绍了简单工厂模式和抽象工厂模式的用途及区别...
JavaScript设计模式：六、工厂模式
SpringWaterLikeMe
05-03 904
JavaScript设计模式：六、工厂模式 文章目录JavaScript设计模式：六、工厂模式一、概述1. 简单工厂模式一、ES6 Class实现二、原型实现2. 复杂工厂模式1) ES5原型实现2) es6-new.target属性的正确用法new.target属性实例3)ES6实现 一、概述 1. 简单工厂模式 一、ES6 Class实现 大白话：通过不同的参数由工厂的构造函数返回不同对象。 工厂模式，通过传入不同短参数达到实例化不同的对象这一目的。比如: 有一天你去餐厅想吃宫保鸡丁，然后餐厅给你实
JavaScript设计模式学习笔记（一）
qq_36013952的博客
06-01 284
JavaScript设计模式学习笔记（一）一、学习设计模式的目的二、模式分类创建型模式结构型模式行为型模式 本系列博客主要是面向自己创作，实属自己的读书笔记，注重记录一些重点，并摘录引用一些大佬对于部分知识点的解释，帮助自己翻阅和理解，一定要配合原著食用。
JavaScript设计模式——工厂模式
HanpengChen的博客
04-17 385
作者：Hanpeng_Chen 公众号：前端极客技术 文章首发个人博客：JavaScript设计模式——工厂模式 | 代码视界 在瞬息万变的前端领域，技术更新迭代非常快，我们经常能在网络上看到诸如“学不动了”之类的言论。但是作为一名前端开发工程师，除了各种新技术，还有许多“一次学习，终身受益”的知识值得我们花时间去学习，设计模式就是其中之一。 设计模式 在学习设计模式之前，我们先要知道什么是设计模式。 我们先来看下维基百科上关于设计模式的定义： 在软件工程中，设计模式（design pattern）是.
JavaScript设计模式与开发实战
qq_60236552的博客
02-12 1339
设计模式：单例模式、策略模式、代理模式；JavaScript基础：原型、原型链，this指向，继承等详细教程
JavaScript设计模式.pdf
10-02
JavaScript设计模式.pdf JavaScript设计模式是指在软件开发中使用JavaScript语言编写的设计模式。这些设计模式旨在提高代码的重用性、可读性、维护性和扩展性。以下是JavaScript设计模式的知识点总结： 1. 单体...
JavaScript设计模式经典之工厂模式
10-22
JavaScript中的工厂模式是一种设计模式，它提供了一种创建对象的方式，使得对象的创建过程与使用对象的代码分离，从而增加了代码的灵活性和可扩展性。工厂模式的核心思想是定义一个工厂接口，具体创建哪些对象则由...
代理设计模式
最新发布
2301_80220193的博客
10-14 1108
二十三种设计模式中的一种，属于结构型模式。它的作用就是通过提供一个代理类，让我们在调用目标方法的时候，不再是直接对目标方法进行调用，而是通过代理类间接调用。调用目标方法时先调用代理对象的方法，减少对目标方法的调用和打扰，同时让附加功能能够集中在一起也有利于统一维护。就拿日志功能来说，将来其他地方也需要附加日志，那还得再声明更多个静态代理类，那就产生了大量重复的代码，日志功能还是分散的，没有统一管理。它是一种设计模式，用于在不修改原始对象的情况下，通过代理对象来间接访问原始对象，并在访问前后执行额外的操作。
装饰模式（Decorator Pattern）在 Go 语言中的应用
tatasix的博客
10-09 959
本文详细介绍了装饰模式（Decorator Pattern）在Go语言中的应用，并通过实例展示了如何动态地给对象添加职责而不改变其结构。文章首先解释了装饰模式的核心概念，即通过创建包装类（装饰器）来在运行时添加新功能。接着，通过实现一个权限校验接口RightsChecker的示例，展示了如何创建装饰器RightsCheckerDecorator来添加日志记录和权限检查等额外行为。文章还比较了装饰模式与中间件的不同，强调了装饰模式适用于动态添加职责的场景，而中间件适用于处理Web请求和响应的通用任务。最后，文
设计模式之---工厂模式
Arguan_的博客
10-10 988
抽象工厂模式主要用于创建相关对象的家族。当一个产品族中需要被设计在一起工作时，通过抽象工厂模式，能够保证客户端始终只使用同一个产品族中的对象；并且通过隔离具体类的生成，使得客户端不需要明确指定具体生成类；所有的具体工厂都实现了抽象工厂中定义的公共接口，因此只需要改变具体工厂的实例，就可以在某种程度上改变整个软件系统的行为。但该模式的缺点在于添加新的行为时比较麻烦，如果需要添加一个新产品族对象时，需要更改接口及其下所有子类，这必然会带来很大的麻烦。System.out.println("生产狗粮");
Java设计模式10 - 观察者模式
Java_fenxiang的博客
10-14 467
观察者模式观察者模式也叫作发布-订阅模式，也就是事件监听机制。观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，这个主题对象在状态上发生变化时，会通知所有观察者对象，使他们能够自动更新自己。观察者模式的结构一个软件系统常常要求在某一个对象状态发生变化时，某些其他的对象作出相应的改变。能做到这一点...
SpringBoot框架下购物推荐网站的设计模式与实现
2401_85743969的博客
10-12 977
创建动态页面比较方便。同时也大大提高了手的能力，使其难以充分体会探索的乐趣和成功的创作过程，设计过程中汲取的东西，是一笔宝贵的财富。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值