JavaScript设计模式-工厂模式

最新推荐文章于 2023-04-26 21:39:52 发布
最新推荐文章于 2023-04-26 21:39:52 发布
阅读量130 收藏
点赞数
分类专栏： 设计模式 文章标签： 设计模式 javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lightning_fawn/article/details/107476702
版权

JavaScript设计模式-工厂模式

概念

什么是工厂模式?
工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。

简单工厂

let UserFactory = function (role) {
  function SuperAdmin() {
    this.name = "超级管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理']
  }
  function Admin() {
    this.name = "管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据']
  }
  function NormalUser() {
    this.name = '普通用户',
    this.viewPage = ['首页', '通讯录', '发现页']
  }

  switch (role) {
    case 'superAdmin':
      return new SuperAdmin();
      break;
    case 'admin':
      return new Admin();
      break;
    case 'user':
      return new NormalUser();
      break;
    default:
      throw new Error('参数错误, 可选参数:superAdmin、admin、user');
  }
}

//调用
let superAdmin = UserFactory('superAdmin');
let admin = UserFactory('admin') 
let normalUser = UserFactory('user')
UserFactory就是一个简单工厂，在该函数中有3个构造函数分别对应不同的权限的用户。当我们调用工厂函数时，只需要传递superAdmin, admin, user这三个可选参数中的一个获取对应的实例对象。你也许发现，我们的这三类用户的构造函数内部很相识，我们还可以对其进行优化。

let UserFactory = function (role) {
  function User(opt) {
    this.name = opt.name;
    this.viewPage = opt.viewPage;
  }

  switch (role) {
    case 'superAdmin':
      return new User({ name: '超级管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据', '权限管理'] });
      break;
    case 'admin':
      return new User({ name: '管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据'] });
      break;
    case 'user':
      return new User({ name: '普通用户', viewPage: ['首页', '通讯录', '发现页'] });
      break;
    default:
      throw new Error('参数错误, 可选参数:superAdmin、admin、user')
  }
}

//调用
let superAdmin = UserFactory('superAdmin');
let admin = UserFactory('admin') 
let normalUser = UserFactory('user')

简单工厂的优点在于，你只需要一个正确的参数，就可以获取到你所需要的对象，而无需知道其创建的具体细节。但是在函数内包含了所有对象的创建逻辑（构造函数）和判断逻辑的代码，每增加新的构造函数还需要修改判断逻辑代码。当我们的对象不是上面的3个而是30个或更多时，这个函数会成为一个庞大的超级函数，便得难以维护。所以，简单工厂只能作用于创建的对象数量较少，对象的创建逻辑不复杂时使用。

工厂方法:

  • 工厂方法模式的本意是将实际创建对象的工作推迟到子类中，这样核心类就变成了抽象类。但是在JavaScript中很难像传统面向对象那样去实现创建抽象类。所以在JavaScript中我们只需要参考它的核心思想即可。我们可以将工厂方法看作是一个实例化对象的工厂类**。**

  • 在简单工厂模式中，我们每添加一个构造函数需要修改两处代码。现在我们使用工厂方法模式改造上面的代码，刚才提到，工厂方法我们只把它看作是一个实例化对象的工厂，它只做实例化对象这一件事！我们采用安全模式创建对象。

//安全模式创建的工厂方法函数
let UserFactory = function(role) {
  if(this instanceof UserFactory) {
    var s = new this[role]();
    return s;
  } else {
    return new UserFactory(role);
  }
}

//工厂方法函数的原型中设置所有对象的构造函数
UserFactory.prototype = {
  SuperAdmin: function() {
    this.name = "超级管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理']
  },
  Admin: function() {
    this.name = "管理员",
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据']
  },
  NormalUser: function() {
    this.name = '普通用户',
    this.viewPage = ['首页', '通讯录', '发现页']
  }
}

//调用
let superAdmin = UserFactory('SuperAdmin');
let admin = UserFactory('Admin') 
let normalUser = UserFactory('NormalUser')

说明一下安全模式

    var Person = function (name) {
        this.name = name
    }

    var jack = Person('Jack')
    //这样子是拿不到实例的
    console.log(jack)  // undefined
    //需要这样：
    var jack = new Person('Jack')
    console.log(jack)

利用安全模式改造，这样改造之后不用new也能拿到实例了，安全模式的好处

 var Person = function (name) {
      if(this instanceof Person) {
          this.name = name
      } else {
         return new Person(name)
      }           
  }
  var jack = Person('Jack')
  console.log(jack.name) // Jack

抽象工厂

  • 上面介绍了简单工厂模式和工厂方法模式都是直接生成实例，但是抽象工厂模式不同，抽象工厂模式并不直接生成实例， 而是用于对产品类簇的创建。
  • 上面例子中的superAdmin，admin，user三种用户角色，其中user可能是使用不同的社交媒体账户进行注册的，例如：wechat，qq，weibo。那么这三类社交媒体账户就是对应的类簇。在抽象工厂中，类簇一般用父类定义，并在父类中定义一些抽象方法，再通过抽象工厂让子类继承父类。所以，抽象工厂其实是实现子类继承父类的方法。
 let AccountAbstractFactory = function (subType, superType) {
            //判断抽象工厂中是否有该抽象类
            if (typeof AccountAbstractFactory[superType] === 'function') {
                //缓存类
                // eslint-disable-next-line no-inner-declarations
                function F () {
                }

                //继承父类属性和方法
                F.prototype = new AccountAbstractFactory[superType]()
                //将子类的constructor指向子类
                subType.constructor = subType
                //子类原型继承父类
                subType.prototype = new F()

            } else {
                throw new Error('抽象类不存在!')
            }
        }
        //微信用户抽象类
        AccountAbstractFactory.WechatUser = function () {
            this.type = 'wechat'
        }
        AccountAbstractFactory.WechatUser.prototype = {
            getName: function () {
                return new Error('抽象方法不能调用')
            }
        }

        //qq用户抽象类
        AccountAbstractFactory.QqUser = function () {
            this.type = 'qq'
        }
        AccountAbstractFactory.QqUser.prototype = {
            getName: function () {
                return new Error('抽象方法不能调用')
            }
        }

        //新浪微博用户抽象类
        AccountAbstractFactory.WeiboUser = function () {
            this.type = 'weibo'
        }
        AccountAbstractFactory.WeiboUser.prototype = {
            getName: function () {
                return new Error('抽象方法不能调用')
            }
        }

        //普通微信用户子类
        function UserOfWechat (name) {
            this.name = name
            this.viewPage = ['首页', '通讯录', '发现页']
        }

        //抽象工厂实现WechatUser类的继承
        AccountAbstractFactory(UserOfWechat, 'WechatUser')
        //子类中重写抽象方法
        UserOfWechat.prototype.getName = function () {
            return this.name
        }

        //普通qq用户子类
        function UserOfQq (name) {
            this.name = name
            this.viewPage = ['首页', '通讯录', '发现页']
        }

        //抽象工厂实现QqUser类的继承
        AccountAbstractFactory(UserOfQq, 'QqUser')
        //子类中重写抽象方法
        UserOfQq.prototype.getName = function () {
            return this.name
        }

        //普通微博用户子类
        function UserOfWeibo (name) {
            this.name = name
            this.viewPage = ['首页', '通讯录', '发现页']
        }

        //抽象工厂实现WeiboUser类的继承
        AccountAbstractFactory(UserOfWeibo, 'WeiboUser')
        //子类中重写抽象方法
        UserOfWeibo.prototype.getName = function () {
            return this.name
        }

        //实例化微信用户
        let wechatUserA = new UserOfWechat('微信小李');
        console.log(wechatUserA.getName(), wechatUserA.type); //微信小李 wechat
        let wechatUserB = new UserOfWechat('微信小王');
        console.log(wechatUserB.getName(), wechatUserB.type); //微信小王 wechat

        //实例化qq用户
        let qqUserA = new UserOfQq('QQ小李');
        console.log(qqUserA.getName(), qqUserA.type); //QQ小李 qq
        let qqUserB = new UserOfQq('QQ小王');
        console.log(qqUserB.getName(), qqUserB.type); //QQ小王 qq

        //实例化微博用户
        let weiboUserA =new UserOfWeibo('微博小李');
        console.log(weiboUserA.getName(), weiboUserA.type); //微博小李 weibo
        let weiboUserB =new UserOfWeibo('微博小王');
        console.log(weiboUserB.getName(), weiboUserB.type); //微博小王 weibo

ES6重写 简单工厂模式:

//User类
class User {
  //构造器
  constructor(opt) {
    this.name = opt.name;
    this.viewPage = opt.viewPage;
  }

  //静态方法
  static getInstance(role) {
    switch (role) {
      case 'superAdmin':
        return new User({ name: '超级管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据', '权限管理'] });
        break;
      case 'admin':
        return new User({ name: '管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据'] });
        break;
      case 'user':
        return new User({ name: '普通用户', viewPage: ['首页', '通讯录', '发现页'] });
        break;
      default:
        throw new Error('参数错误, 可选参数:superAdmin、admin、user')
    }
  }
}

//调用
let superAdmin = User.getInstance('superAdmin');
let admin = User.getInstance('admin');
let normalUser = User.getInstance('user');
工厂方法模式:

class User {
  constructor(name = '', viewPage = []) {
    if(new.target === User) {
      throw new Error('抽象类不能实例化!');
    }
    this.name = name;
    this.viewPage = viewPage;
  }
}

class UserFactory extends User {
  constructor(name, viewPage) {
    super(name, viewPage)
  }
  create(role) {
    switch (role) {
      case 'superAdmin': 
        return new UserFactory( '超级管理员', ['首页', '通讯录', '发现页', '应用数据', '权限管理'] );
        break;
      case 'admin':
        return new UserFactory( '普通用户', ['首页', '通讯录', '发现页'] );
        break;
      case 'user':
        return new UserFactory( '普通用户', ['首页', '通讯录', '发现页'] );
        break;
      default:
        throw new Error('参数错误, 可选参数:superAdmin、admin、user')
    }
  }
}

let userFactory = new UserFactory();
let superAdmin = userFactory.create('superAdmin');
let admin = userFactory.create('admin');
let user = userFactory.create('user');

ES6重写抽象工厂模式:

class User {
  constructor(type) {
    if (new.target === User) {
      throw new Error('抽象类不能实例化!')
    }
    this.type = type;
  }
}

class UserOfWechat extends User {
  constructor(name) {
    super('wechat');
    this.name = name;
    this.viewPage = ['首页', '通讯录', '发现页']
  }
}

class UserOfQq extends User {
  constructor(name) {
    super('qq');
    this.name = name;
    this.viewPage = ['首页', '通讯录', '发现页']
  }
}

class UserOfWeibo extends User {
  constructor(name) {
    super('weibo');
    this.name = name;
    this.viewPage = ['首页', '通讯录', '发现页']
  }
}

function getAbstractUserFactory(type) {
  switch (type) {
    case 'wechat':
      return UserOfWechat;
      break;
    case 'qq':
      return UserOfQq;
      break;
    case 'weibo':
      return UserOfWeibo;
      break;
    default:
      throw new Error('参数错误, 可选参数:superAdmin、admin、user')
  }
}

let WechatUserClass = getAbstractUserFactory('wechat');
let QqUserClass = getAbstractUserFactory('qq');
let WeiboUserClass = getAbstractUserFactory('weibo');

let wechatUser = new WechatUserClass('微信小李');
let qqUser = new QqUserClass('QQ小李');
let weiboUser = new WeiboUserClass('微博小李');

总结：

  • 简单工厂模式又叫静态工厂方法，用来创建某一种产品对象的实例，用来创建单一对象；工厂方法模式是将创建实例推迟到子类中进行；抽象工厂模式是对类的工厂抽象用来创建产品类簇，不负责创建某一类产品的实例。

  • 何时使用工厂模式：

  1. 当我们的对象或者组件设置涉及到高程度级别的复杂度时。
  2. 当我们需要根据我们所在的环境方便的生成不同对象的实体时。
  3. 当我们在许多共享同一个属性的许多小型对象或组件上工作时。
  4. 当带有其它仅仅需要满足一种API约定(又名鸭式类型)的对象的组合对象工作时.这对于解耦来说是有用的。
  • 何时不要去使用工厂模式：
  1. 当被应用到错误的问题类型上时,这一模式会给应用程序引入大量不必要的复杂性.除非为创建对象提供一个接口是我们编写的库或者框架的一个设计上目标,否则我会建议使用明确的构造器,以避免不必要的开销。

github仓库地址：点击 设计模式例子 查看

闪电小鹿
关注
专栏目录
Javascript设计模式：工厂模式
qq_31760285的博客
04-22 377
之前对设计模式了解的不是很多，现在以前端为切入点来学习设计模式，在学习的过程中会借鉴其他人的博客和代码，会在文章末尾标注来源出处 1. 简单工厂 根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。 //汽车类 class Car { constructor({ doors, state, color }) { ...
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
10-15
简单工厂模式是一种创建型设计模式，它提供了一个创建对象的接口，但允许子类决定实例化哪一个类。这种模式主要用于当系统需要根据条件创建不同类型的对象，而客户端代码不关心具体对象的创建逻辑时。 在JavaScript...
从ES6重新认识JavaScript设计模式(二): 工厂模式
weixin_34209406的博客
04-05 454
1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。 如果只接触过JavaScript这门语言的的人可能会对抽象这个词的概念有点模糊，因为JavaScript一直将...
JavaScript之工厂模式
linhongyong的博客
11-06 480
JavaScript之工厂模式/***************外js*********************/ //接口类，用来创建接口 var Interface = function (name) { if (arguments.length != 2) { throw new Error("创建的接口不符合标准，必须有两个参数，第二个参数是接
JavaScript中的工厂模式
最新发布
m0_75198698的博客
04-26 618
在上面的代码中，我们定义了三种汽车类型：轿车、货车和客车，它们都是 `Car` 类的子类，并重写了其 `getName()` 方法。我们接着定义了三个工厂类：`SedanCarFactory`、`TruckCarFactory` 和 `BusCarFactory`，这些工厂类都是 `CarFactory` 接口的子类，并实现了其 `createCar()` 方法。工厂方法模式是工厂模式中一种更加抽象的形式，它将工厂方法定义在一个抽象的基类中，每个具体的工厂类继承该基类并实现工厂方法来创建对象。
JavaScript 工厂模式
qq_24518001的博客
09-02 166
JavaScript 工厂模式
javascript-978-1-7858-8216-6:掌握 JavaScript 设计模式 - 第二版
05-30
**JavaScript设计模式——第二版** 在编程领域，设计模式是一种被广泛接受的解决方案，它针对特定问题或场景提供了经过时间考验的最佳实践。JavaScript，作为互联网上最常用的语言之一，其设计模式同样至关重要，有...
javascript设计模式 – 抽象工厂模式原理与应用实例分析
10-15
抽象工厂模式是设计模式中的一种，它属于对象创建型模式，尤其在JavaScript中，当我们面临多个相关产品的创建时，抽象工厂模式能提供一种更为灵活的解决方案。这种模式的主要目标是提供一个接口，用于创建一系列相关...
javascript工厂模式
sysuzhyupeng的博客
02-04 380
简单工厂单纯使用new会导致两个类之间的依赖性，当有多个类构造时，使用一个方法来实例化哪个具体的类，如下面的Fruit水果商店类，通过一个简单的switch层来判断。 var FruitShop = function(){}; FruitShop.prototype = { showFruit: function(model){ var fruit;
JavaScript工厂模式
weixin_33943347的博客
05-06 257
解释： 　　以下代码是一个人物的function,类似于Java中的类，Person就相当于类名，括号里的id,name,age相当于入参，函数体类的三条语句相当于Java方法体。此时的this代表当前对象，即谁new我，this我就代表谁。将它理解成一个工厂，是因为，每new一次，会产生具体需要的对象。 function Person(id,name,age){ this...
深入理解对象 工厂模式
m0_64749865的博客
08-19 640
工厂模式
JavaScript设计模式：工厂模式
RJYBLXB的博客
10-28 476
1.工厂模式 工厂模式是用来创建对象的一种最常用的设计模式。在不暴露创建对象的具体逻辑下，将逻辑封装在一个函数中，这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。 在JS中一直把abstract作为保留字并没有被实现，如果只了解JS的人也许不能很好学的理解抽象这个词，那么就很难理解工厂模式中的三种方法的异同。所以，我们先举一个简单的例子讲述一下抽象和工厂的概念。（修改） 比如说体育商品店卖有很多的体育器材，里面有各种各样的体育用品，及其相关介绍等等
javascript设计模式之工厂模式
热门推荐
object not found的博客
08-12 1万+
函数creatPerson（）接受了三个参数，根据这几个参数创建了一个包含person信息的对象，可以用不同的参数去多次调用这个对象，而它就回每次都返回3个属性和一个方法的对象，虽然这种工厂模式可以解决创建多个相似对象的问题，但是他没有解决对象标识的问题，到这里可能有小伙伴不知道对象标识是什么，解释一下对象标识就是我们创建的对象是什么类型。工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。.........
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值