JavaScript设计模式与实践--工厂模式

1 什么是工厂模式

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

如果只接触过javascript这门语言的的人可能会对抽象这个词的概念有点模糊，因为javascript一直将abstract作为保留字而没有去实现它。如果不能很好的理解抽象的概念，那么就很难理解工厂模式中的三种方法的异同。所以，我们先以一个场景去简单的讲述一下抽象和工厂的概念。

想象一下你的女朋友生日要到了，你想知道她想要什么，于是你问她：“亲爱的，生日要到了你想要什么生日礼物啊?” 正巧你女朋友是个猫奴，最经迷上了抖音上的一只超级可爱的苏格兰折耳猫，她也很想要一只网红同款猫。

于是她回答你说：“亲爱的，我想要一只动物。”

你心平气和的问她：“想要什么动物啊?”

你女友说：“我想要猫科动物。”

这时你内心就纳闷了，猫科动物有老虎，狮子，豹子，猞猁，还有各种小猫，我哪里知道你要什么?

于是你问女友：“你要哪种猫科动物啊?”

“笨死了，还要哪种，肯定是小猫咪啊，难道我们家还能像迪拜土豪那样养老虎啊!”你女朋友答道。

“好好， 那你想要哪个品种的猫呢?”你问道

“我想要外国的品种, 不要中国的土猫” 你女友傲娇的回答到。

这时你已经快奔溃了，作为程序员的你再也受不了这种挤牙膏式的提问，于是你哀求到：“亲爱的，你就直接告诉我你到底想要哪个品种，哪个颜色，多大的猫?”

你女友想了想抖音的那只猫，回答道：“我想要一只灰色的，不超过1岁的苏格兰短耳猫!”

于是，你在女友生日当天到全国最大的宠物批发市场里面去，挑了一只“灰色的，不超过1岁的苏格兰短耳猫”回家送给了你女友, 圆了你女友拥有网红同款猫的梦想!

上面中你最终买到并送给女友那只猫可以被看作是一个实例对象，宠物批发市场可以看作是一个工厂，我们可以认为它是一个函数，这个工厂函数里面有着各种各样的动物，那么你是如何获取到实例的呢?因为你给宠物批发市场传递了正确的参数: “color: 灰色”，“age: 不超过1岁”，"breed:苏格兰短耳"，“category： 猫"。前面的对话中, 你女朋友回答“动物”，“猫科动物”，“国外的品种”让你不明白她到底想要什么，就是因为她说得太抽象了。

她回答的是一大类动物的共有特征而不是具体动物，这种将复杂事物的一个或多个共有特征抽取出来的思维过程就是抽象。

既然已经明白了抽象的概念，下面我们来看一下之前提到的工厂模式的三种实现方法： 简单工厂模式、工厂方法模式、抽象工厂模式。

1.1 简单工厂模式

简单工厂模式又叫静态工厂模式，由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。

在实际的项目中，我们常常需要根据用户的权限来渲染不同的页面，高级权限的用户所拥有的页面有些是无法被低级权限的用户所查看。所以我们可以在不同权限等级用户的构造函数中，保存该用户能够看到的页面。在根据权限实例化用户。使用es6重写简单工厂模式时，我们不再使用构造函数创建对象，而是使用class的新语法，并使用static关键字将简单工厂封装到user类的静态方法中.代码如下：

//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');

复制代码

user就是一个简单工厂，在该函数中有3个实例中分别对应不同的权限的用户。当我们调用工厂函数时，只需要传递superadmin, admin, user这三个可选参数中的一个获取对应的实例对象。

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

1.2 工厂方法模式

工厂方法模式的本意是将实际创建对象的工作推迟到子类中，这样核心类就变成了抽象类。但是在javascript中很难像传统面向对象那样去实现创建抽象类。所以在javascript中我们只需要参考它的核心思想即可。我们可以将工厂方法看作是一个实例化对象的工厂类。虽然es6也没有实现abstract，但是我们可以使用new.target来模拟出抽象类。new.target指向直接被new执行的构造函数，我们对new.target进行判断，如果指向了该类则抛出错误来使得该类成为抽象类。

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

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');

复制代码

1.3 抽象工厂模式

上面介绍了简单工厂模式和工厂方法模式都是直接生成实例，但是抽象工厂模式不同，抽象工厂模式并不直接生成实例， 而是用于对产品类簇的创建。

上面例子中的superadmin，admin，user三种用户角色，其中user可能是使用不同的社交媒体账户进行注册的，例如：wechat，qq，weibo。那么这三类社交媒体账户就是对应的类簇。在抽象工厂中，类簇一般用父类定义，并在父类中定义一些抽象方法，再通过抽象工厂让子类继承父类。所以，抽象工厂其实是实现子类继承父类的方法。

上面提到的抽象方法是指声明但不能使用的方法。在其他传统面向对象的语言中常用abstract进行声明，但是在javascript中，abstract是属于保留字，但是我们可以通过在类的方法中抛出错误来模拟抽象类。

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('微博小李');

复制代码

2 工厂模式的项目实战应用

在实际的前端业务中，最常用的简单工厂模式。如果不是超大型的项目，是很难有机会使用到工厂方法模式和抽象工厂方法模式的。下面我介绍在vue项目中实际使用到的简单工厂模式的应用。

在普通的vue + vue-router的项目中，我们通常将所有的路由写入到router/index.js这个文件中。下面的代码我相信vue的开发者会非常熟悉，总共有5个页面的路由：

// index.js

import vue from 'vue'

import router from 'vue-router'

import login from '../components/login.vue'

import superadmin from '../components/superadmin.vue'

import normaladmin from '../components/admin.vue'

import user from '../components/user.vue'

import notfound404 from '../components/404.vue'

vue.use(router)

export default new router({

routes: [

//重定向到登录页

{

path: '/',

redirect: '/login'

},

//登陆页

{

path: '/login',

name: 'login',

component: login

},

//超级管理员页面

{

path: '/super-admin',

name: 'superadmin',

component: superadmin

},

//普通管理员页面

{

path: '/normal-admin',

name: 'normaladmin',

component: normaladmin

},

//普通用户页面

{

path: '/user',

name: 'user',

component: user

},

//404页面

{

path: '*',

name: 'notfound404',

component: notfound404

}

]

})

复制代码

当涉及权限管理页面的时候，通常需要在用户登陆根据权限开放固定的访问页面并进行相应权限的页面跳转。但是如果我们还是按照老办法将所有的路由写入到router/index.js这个文件中，那么低权限的用户如果知道高权限路由时，可以通过在上输入url跳转到高权限的页面。所以我们必须在登陆的时候根据权限使用vue-router提供的addroutes方法给予用户相对应的路由权限。这个时候就可以使用简单工厂方法来改造上面的代码。

在router/index.js文件中，我们只提供/login这一个路由页面。

//index.js

import vue from 'vue'

import router from 'vue-router'

import login from '../components/login.vue'

vue.use(router)

export default new router({

routes: [

//重定向到登录页

{

path: '/',

redirect: '/login'

},

//登陆页

{

path: '/login',

name: 'login',

component: login

}

]

})

复制代码

我们在router/文件夹下新建一个routerfactory.js文件，导出routerfactory简单工厂函数，用于根据用户权限提供路由权限，代码如下

//routerfactory.js

import superadmin from '../components/superadmin.vue'

import normaladmin from '../components/admin.vue'

import user from '../components/user.vue'

import notfound404 from '../components/404.vue'

let allroute = [

//超级管理员页面

{

path: '/super-admin',

name: 'superadmin',

component: superadmin

},

//普通管理员页面

{

path: '/normal-admin',

name: 'normaladmin',

component: normaladmin

},

//普通用户页面

{

path: '/user',

name: 'user',

component: user

},

//404页面

{

path: '*',

name: 'notfound404',

component: notfound404

}

]

let routerfactory = (role) => {

switch (role) {

case 'superadmin':

return {

name: 'superadmin',

route: allroute

};

break;

case 'normaladmin':

return {

name: 'normaladmin',

route: allroute.splice(1)

}

break;

case 'user':

return {

name: 'user',

route: allroute.splice(2)

}

break;

default:

throw new error('参数错误! 可选参数: superadmin, normaladmin, user')

}

}

export { routerfactory }

复制代码

在登陆页导入该方法，请求登陆接口后根据权限添加路由:

//login.vue

import {routerfactory} from '../router/routerfactory.js'

export default {

//...

methods: {

userlogin() {

//请求登陆接口, 获取用户权限, 根据权限调用this.getroute方法

//..

},

getroute(role) {

//根据权限调用routerfactory方法

let routerobj = routerfactory(role);

//给vue-router添加该权限所拥有的路由页面

this.$router.addroutes(routerobj.route);

//跳转到相应页面

this.$router.push({name: routerobj.name})

}

}

};

复制代码

在实际项目中，因为使用this.$router.addroutes方法添加的路由刷新后不能保存，所以会导致路由无法访问。通常的做法是本地保存用户信息，在刷新后获取本地权限并解密，根据权限重新添加路由。这里因为和工厂模式没有太大的关系就不再赘述。

3 总结

上面说到的三种工厂模式和单例模式一样，都是属于创建型的设计模式。简单工厂模式又叫静态工厂方法，用来创建某一种产品对象的实例，用来创建单一对象;工厂方法模式是将创建实例推迟到子类中进行;抽象工厂模式是对类的工厂抽象用来创建产品类簇，不负责创建某一类产品的实例。在实际的业务中，需要根据实际的业务复杂度来选择合适的模式。对于非大型的前端应用来说，灵活使用简单工厂其实就能解决大部分问题。

3.1. 什么时候会用工厂模式?

将new操作简单封装，遇到new的时候就应该考虑是否用工厂模式;

3.2. 工厂模式的好处?

举个例子：

你去购买汉堡，直接点餐、取餐、不会自己亲自做;(买者不关注汉堡是怎么做的)

商店要封装做汉堡的工作，做好直接给买者;(商家也不会告诉你是怎么做的，也不会傻到给你一片面包，一些奶油，一些生菜让你自己做)

外部不许关心内部构造器是怎么生成的，只需调用一个工厂方法生成一个实例即可;

构造函数和创建者分离，符合开放封闭原则

3.3 实际的一些例子

jquery的$(selector) jquery中$('p')和new $('p')哪个好用，很显然直接$()最方便 ,这是因为$()已经是一个工厂方法了;

class jquery {

constructor(selector) {

super(selector)

}

// ....

}

window.$ = function(selector) {

return new jquery(selector)

}

复制代码

react的createelement()

react.createelement()方法就是一个工厂方法

vue的异步

通过promise的方式resolve出来一个组件