JS设计模式之工厂模式与抽象工厂模式

工厂模式：定义一个用于创建对象（产品）的接口，由子类决定实例化那个类的对象（产品）

通俗点理解：定义一个工厂（函数），传入不同的原料（例如权限信息），返回不同的对象

以后台管理系统的权限按钮来举例：

在我们开发后台管理系统的时候，当用户登录成功时，后端就会返回给我们用户的权限编码，一般就是role，里面呢会告诉我们这个用户的权限编码，我们应该要针对不同用户的权限，去返回不同的按钮和展示不同的页面，可以看一下我图片里的注释，正常去写的话，就是定义一个函数接收到role之后去判定用户的权限接着获取动态路由的时候就能拿到此用户的权限所对应的路由。

就像这样，看起来其实可读性就比较差，为了改善这个问题，我们就可以使用工厂模式去做一个封装，这样的话，就可以很清晰的看到我们要做的，后续调用的时候只需要使用UserFactory就可以获取到请求路由的对象了，简单工厂的优点在于，你只需要一个正确的参数，就可以获取到你所需要的对象，而无需知道其创建的具体细节。但是在函数内包含了所有对象的创建逻辑和判断逻辑的代码，每增加新的构造函数还需要修改判断逻辑代码。当我们的对象不是上面的3个而是10个或更多时，这个函数会成为一个庞大的超级函数，便得难以维护。所以，简单工厂只能作用于**创建的对象数量较少，对象的创建逻辑不复杂时使用**。

如果我们要面对的是创建一组或者一系列相关的相互依赖的接口的时候，此时我们就可以使用抽象工厂模式，但是js毕竟是弱语言类型，所以没有abstract，此时我们就需要设置一个手动抛出错误的方式去表明一个方法是抽象方法，由子类去继承并实现，代码如下图

定义一个抽象的父类，根据之前我们的权限信息去定义对应的子类，让子类去继承父类，并且在子类中必须要去实现父类的方法，定义好了后，我们只要调用getAbstractUserFactory方法传入用户的权限，UserClass传入用户的姓名，此时就可以获得

一个对象信息，姓名还有他所对应的权限，此时再根据对应的权限去渲染按钮和组件，就可以实现动态路由和权限按钮了。以上也是工厂模式与抽象工厂模式在前端开发中的应用与实现。