在js中仿java的枚举类型设计实例

最新推荐文章于 2025-06-22 00:45:26 发布

蒙德伊彼

最新推荐文章于 2025-06-22 00:45:26 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVASCRIPT

本文链接：https://blog.youkuaiyun.com/huuinn/article/details/78494153

JAVASCRIPT 专栏收录该内容

4 篇文章

订阅专栏

本文将介绍如何在JavaScript中模仿Java的枚举类型进行设计，通过对象封装来达到类似的效果，帮助开发者在不支持枚举的JS环境中实现枚举功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

在javascript中，像EventTarget.addEventListener()，Document.createElement() 等方法，只接收指定字符串作为参数。比如：

const okButton = document.getElementById("button_ok");
okButton.addEventListener('click', () => console.log('button_ok clicked!'), false);


在上述代码中，我们必须按Events 中所定义的类型字符串（如：click, load）传参，否则程序就不能正常工作。本文将介绍如何通过object，class两种封装形式，分别实现枚举类型。

object封装


 index.html

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>enum</title>
</head>
<body>
<button id="button_cancel">Cancel</button>
<button id="button_ok">OK</button>
<script src="object_script.js"></script>
</body>
</html>



 object_script.js

(function () {
    'use strict';

    /** 事件 */
    const Event = {
        CLICK: "click",
        LOAD: "load"
    };
    deepFreeze(Event);

    /** 响应 */
    const Response = {
        OK: {
            code: 100,
            message: "ok"
        },
        ERROR: {
            code: 900,
            message: "error"
        }
    };
    deepFreeze(Response);

    addEventListener(window, Event.LOAD, () => {
        const okButton = document.getElementById("button_ok");
        addEventListener(okButton, Event.CLICK, () => alert(generateResponseText(Response.OK)));
        const cancelButton = document.getElementById("button_cancel");
        addEventListener(cancelButton, Event.CLICK, () => alert(generateResponseText(Response.ERROR)));
    });

    /**
     * object深度冻结
     * @param {Object} object 对象
     */
    function deepFreeze(object) {
        Object.freeze(object);
        for (const key in object) {
            const value = object[key];
            if (!object.hasOwnProperty(key) || typeof value != "object" || Object.isFrozen(value)) {
                continue;
            }
            deepFreeze(value);
        }
    }

    /**
     * 事件监听器登记
     * @param {EventTarget} target 目标
     * @param {String} event 事件
     * @param {Function} listener 监听器
     * @throws {Error} 错误
     */
    function addEventListener(target, event, listener) {
        if (event === undefined) {
            throw new Error("event is undefined");
        }
        target.addEventListener(event, listener, false);
    }

    /**
     * 响应字符串生成
     * @param {Object} response 响应
     * @return {String} 响应字符串
     * @throws {Error} 错误
     */
    function generateResponseText(response) {
        if (response === undefined) {
            throw new Error("response is undefined");
        }
        return "[" + response.code + "] " + response.message;
    }
})();


class封装


 index_class.html

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>enum</title>
</head>
<body>
<button id="button_cancel">Cancel</button>
<button id="button_ok">OK</button>
<script src="class_script.js"></script>
</body>
</html>



 class_script.js

(function () {
    'use strict';

    /** 值存储类 */
    class HasValue {
        /**
         * @param {Object} value 值
         */
        constructor(value) {
            this.value = value;
        }
    }

    /** 事件类 */
    class Event extends HasValue {
    }
    /** 事件常量 */
    const Events = {
        CLICK: new Event("click"),
        LOAD: new Event("load")
    };
    deepFreeze(Events);

    /** 响应类 */
    class Response {
        /**
         * @param {Number} code 编码
         * @param {String} message 消息
         */
        constructor(code, message) {
            this.code = code;
            this.message = message;
        }
    }
    /** 响应常量 */
    const Responses = {
        OK: new Response(100, "ok"),
        ERROR: new Response(900, "error")
    };
    deepFreeze(Responses);

    addEventListener(window, Events.LOAD, () => {
        const okButton = document.getElementById("button_ok");
        addEventListener(okButton, Events.CLICK, () => alert(generateResponseText(Responses.OK)));
        const cancelButton = document.getElementById("button_cancel");
        addEventListener(cancelButton, Events.CLICK, () => alert(generateResponseText(Responses.ERROR)));
    });

    /**
     * object深度冻结
     * @param {Object} object 对象
     */
    function deepFreeze(object) {
        Object.freeze(object);
        for (const key in object) {
            const value = object[key];
            if (!object.hasOwnProperty(key) || typeof value != "object" || Object.isFrozen(value)) {
                continue;
            }
            deepFreeze(value);
        }
    }

    /**
     * 事件监听器登记
     * @param {EventTarget} target 目标
     * @param {Event} event 事件实例
     * @param {Function} listener 监听器
     * @throws {Error} 错误
     */
    function addEventListener(target, event, listener) {
        if (!(event instanceof Event)) {
            throw new Error("event is not instance of Event");
        }
        target.addEventListener(event.value, listener, false);
    }

    /**
     * 响应字符串生成
     * @param {Object} response 响应
     * @return {String} 响应字符串
     * @throws {Error} 错误
     */
    function generateResponseText(response) {
        if (!(response instanceof Response)) {
            throw new Error("response is not instance of Response");
        }
        return "[" + response.code + "] " + response.message;
    }
})();


查看原文：https://www.huuinn.com/archives/424
更多技术干货：风匀坊
关注公众号：风匀坊