【设计模式】工厂模式和抽象工厂模式

工厂模式

js 复制代码
function User(role, pages) {
    this.role = role;
    this.pages = pages;
}

// new User('admin', ['home', 'user', 'setting']);
// new User('user', ['home', 'user']);
// new User('guest', ['home']);

function UserFactory(role) {
    switch (role) {
        case 'admin':
            return new User(role, ['home', 'user', 'setting']);
            break;
        case 'user':
            return new User(role, ['home', 'user']);
            break;
        case 'guest':
            return new User(role, ['home']);
            break;
        default:
            throw new Error('未知角色')
    }
}

es6 的写法:

js 复制代码
class User {
    constructor(role, pages) {
        this.role = role;
        this.pages = pages;
    }
    static getInstance(role) {
        switch (role) {
            case 'admin':
                return new User(role, ['home', 'user', 'setting']);
                break;
            case 'user':
                return new User(role, ['home', 'user']);
                break;
            case 'guest':
                return new User(role, ['home']);
                break;
            default:
                throw new Error('未知角色')
        }
    }
}

User.getInstance('admin'); // {role: 'admin', pages: ['home', 'user', 'setting']}

简单工厂的优点在于,你只需要一个正确的参数,就可以获取到你所需要的对象,而无需知道其创建的具体细节。

但是在函数内包含了所有对象的创建逻辑和判断逻辑的代码,每增加新的构造函数还需要修改判断逻辑代码。当我们的对象不是上面的3个而是10个或更多时,这个函数会成为一个庞大的超级函数,变得难以维护。

所以,简单工厂只能作用于创建的对象数量较少,对象的创建逻辑不复杂时使用。

抽象工厂模式

js 复制代码
class User {
    constructor(name, role, pages) {
        this.name = name;
        this.role = role;
        this.pages = pages;
    }

    welcome() {
        console.log(`欢迎${this.name}使用本系统`)
    }

    showPage() {
        // js 中没有内置的 abstract
        throw new Error(`请实现 showPage 方法`)
    }
}

class SuperAdmin extends User {
    constructor(name) {
        super(name, 'superAdmin', ['home', 'user', 'setting']);
    }

    showPage() {
        console.log(`超级管理员拥有以下页面:${this.pages.join(' ')}`)
    }

    addUser() {
        console.log(`添加用户`)
    }

    addRight() {
        console.log(`添加权限`)
    }
}

class Editor extends User {
    constructor(name) {
        super(name, 'editor', ['home', 'user']);
    }

    showPage() {
        console.log(`编辑拥有以下页面:${this.pages.join(' ')}`)
    }

}
function getAbstractUserFactory(role) {
    switch (role) {
        case 'superAdmin':
            return SuperAdmin;
        case 'editor':
            return Editor;
        default:
            throw new Error(`没有找到对应的角色`)
    }
}
const userClass = getAbstractUserFactory('editor');
const user = new userClass('张三');
user.showPage(); // 编辑拥有以下页面:home user
相关推荐
FreeTinker8 小时前
HTML本地存储技术解析:localStorage与sessionStorage的原理、差异与应用场景
前端·html
qq_452396238 小时前
第十二篇:《全链路监控与可观测性:前端错误追踪与性能分析》
前端
wangruofeng9 小时前
Phosphor Icons 官网源码拆解:URL 即存储、水波动画与 7362 Star 图标库的架构实践
前端·架构·github
BigTopOne9 小时前
WebRTC Native / Android 开发学习资源整理
前端
excel10 小时前
nuxt 3 升级 nuxt 4 报错之 hasInjectionContext
前端
何以解忧,唯有..10 小时前
LangChain 工具调用(Tool Calling)实战指南
java·前端·langchain
软件聚导航11 小时前
「聚小软 AI 助手」技术升级:从数据库检索到 RAG 知识库问答
前端·数据库·mysql·微信小程序·小程序·ai编程·rag
恋猫de小郭12 小时前
看懂大模型架构术语,帮助你理解目前常见的大模型开源架构
前端·人工智能·ai编程
yma1612 小时前
通过提示词实现GitHub Pages 和 Nginx 双部署竟然这么简单?
前端
前端 贾公子12 小时前
第09章:上下文与记忆 (2)
java·服务器·前端