目录

工厂模式定义

简单工厂【重点掌握】

演示范例——简单工厂

项目实战范例——简单工厂

工厂方法

抽象工厂

工厂模式定义

用途： 创建对象

核心思想：不暴露创建对象的具体逻辑，将逻辑封装在一个函数中，这个函数就可以被视为一个工厂。

分类（根据抽象程度的不同）：简单工厂（又叫静态工厂模式），工厂方法和抽象工厂

简单工厂【重点掌握】

使用场景：创建的对象数量较少，对象的创建逻辑不复杂时使用。（在实际的前端业务中，最常用的简单工厂模式。如果不是超大型的项目，是很难有机会使用到工厂方法模式和抽象工厂方法模式的。）

优点：只需要一个正确的参数，就可以获取到你所需要的对象，而无需知道其创建的具体细节。

缺点：每增加新的构造函数还需要修改判断逻辑代码。

演示范例——简单工厂

范例功能：根据用户的权限来渲染不同的页面

实现思路：使用关键字class定义类User，此时的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');

项目实战范例——简单工厂

 范例功能：在登录的时候根据权限使用vue-router提供的addRoutes方法给予用户相对应的路由权限。

router/index.js文件

//index.jsimport 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.jsimport 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.vueimport {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方法添加的路由刷新后不能保存，所以会导致路由无法访问。通常的做法是本地加密保存用户信息，在刷新后获取本地权限并解密，根据权限重新添加路由。

工厂方法

核心要点：将创建实例推迟到子类中进行；

实现原理：使用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');

抽象工厂

抽象工厂模式是对类的工厂抽象用来创建产品类簇，不负责创建某一类产品的实例。

同样使用new.target语法来模拟抽象类，并通过继承的方式创建出UserOfWechat, UserOfQq, UserOfWeibo这一系列子类类簇。使用getAbstractUserFactor来返回指定的类簇。

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

更多设计模式详见——js设计模式【详解】总目录
https://blog.csdn.net/weixin_41192489/article/details/116154815