js设计模式 --- 工厂模式

简单工厂

由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象。简单来讲，就是根据原料生成不同的产品

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

缺点：函数内包含了所有对象的创建逻辑和判断逻辑的代码，对象数量过多时难以维护

适用于：创建的对象数量较少，对象的创建逻辑不复杂

案例：后台的权限管理系统

javascript 复制代码

    function User(role, pages) {
        this.role = role;
        this.pages = pages;
    }
    var a = new User("superAdmin",["home","user-manage","right-manage","news-manage"])
    var b = new User("admin",["home","user-manage","news-manage"])
    var c = new User("editor",["home","news-manage"])
    //a.role === current.role

改进：

添加生成User对象的函数

javascript 复制代码

    function UserFactory(role) {
        function User(role, pages) {
            this.role = role;
            this.pages = pages;
        }
        switch (role) {
            case "superAdmin":
                return new User("superAdmin", ["home", "user-manage", "right-manage", "news-manage"])
            case "admin":
                return new User("admin", ["home", "user-manage", "news-manage"])
            case "editor":
                return new User("editor", ["home", "news-manage"])
            default:
                return new User("guest", ["home"])
        }
    }
    var user = UserFactory("editor")

    // es6写法
    class User {
        constructor(role, pages) {
            this.role = role;
            this.pages = pages;
        }
        // 生成User对象的函数。简单工厂：根据原料生成不同的产品。
        static UserFactory(role) {
            switch (role) {
                case "superAdmin":
                    return new User("superAdmin", ["home", "user-manage", "right-manage", "news-manage"])
                case "admin":
                    return new User("admin", ["home", "user-manage", "news-manage"])
                case "editor":
                    return new User("editor", ["home", "news-manage"])
                default:
                    return new User("guest", ["home"])
            }
        }
    }

    var user = User.UserFactory("editor")

抽象工厂

抽象工厂模式并不直接生成实例，而是用于对产品类簇的创建。在简单工厂基础上进一步解耦，对扩展开放，对修改关闭。

通俗一点：抽象工厂不生产水，只是大自然的搬运工。

适用于：大型应用，对象逻辑复杂

上述案例扩展：不同的角色有不同的页面渲染逻辑

图示：

代码：

javascript 复制代码

//抽象产品类
class User{
    constructor(name,role,pages){
        this.name = name
        this.role = role
        this.pages = pages
    }
    welcome(){
        console.log("欢迎回来",this.name)
    }
    dataShow(){
        //abstract
        throw new Error("抽象方法需要被实现")
    }
}
class SuperAdmin extends User{
    constructor(name){
        super(name,"superAdmin",["home","user-manage","right-manage","news-manage"])
    }
    //重写dataShow
    dataShow(){
        console.log("superAdmin-dataShow")
    }
    // 特有方法
    addRight(){

    }
    addUser(){

    }
}
class Admin extends User{
    constructor(name){
        super(name,"admin",["home","user-manage","news-manage"])
    }
    //重写dataShow
    dataShow(){
        console.log("admin-dataShow")
    }
    // 特有方法
    addUser(){
        
    }
}
    class Editor extends User{
    constructor(name){
        super(name,"editor",["home","news-manage"])
    }
    //重写dataShow
    dataShow(){
        console.log("editor-dataShow")
    }
}

// 抽象工厂的简化形式，这里直接返回类
function getAbstractUserFactory(role){
    switch(role){
        case "superAdmin":
            return SuperAdmin
        case "admin":
            return Admin
        case "editor":
            return Editor
        default:
            throw new Error("参数错误")
    }
}

let UserClass = getAbstractUserFactory("superAdmin")
console.log(UserClass)
let user = new UserClass("mill")
console.log(user)

抽象工厂的核心目标 是封装产品创建，返回实例是标准做法，返回类是前端常见的简化形式；

无论返回类还是实例，核心都是让客户端不直接依赖具体产品类，符合抽象工厂 "解耦创建逻辑" 的核心思想。