netnr 2024-12-22

使用 Proxy

对象属性取值 i18n.loading ,有智能提示,可定位跳转

避免方法取值 i18n("loading") ,没有智能提示

以下代码可拷贝到控制台执行看效果

const baseLanguage = {
    _lang: "en", // default

    loading: "Loading ...",
    success: "Successful",
    done: "Done!"
};

const allLanguages = {
    "cn": {
        loading: "加载中 ...",
        success: "操作成功!",
        done: "操作完成!"
    },
    "jp": {
        loading: "読み込み中",
        success: "成功",
        done: "仕上げる",
    }
}

const i18n = new Proxy(baseLanguage, {
    get(target, prop, receiver) {
        if (prop === "$setLang") {
            return (lang) => (target._lang = lang);
        }
        if (prop === "$getLang") {
            return target._lang;
        }

        // 优先取指定语言,无则返回默认语言
        let language = allLanguages[target._lang];
        if (language && prop in language) {
            return language[prop];
        } else {
            return target[prop];
            // return Reflect.get(target, prop, receiver);
        }
    }
});

// 测试
console.debug(`i18n.$getLang: ${i18n.$getLang}`);
console.debug(`loading: ${i18n.loading}\t\tsuccess: ${i18n.success}\t`);

console.debug(`\n\ni18n.$setLang("cn")\n\n`);
i18n.$setLang("cn");

console.debug(`i18n.$getLang: ${i18n.$getLang}`);
console.debug(`loading: ${i18n.loading}\t\tdone: ${i18n.done}\t`);

使用 Object.assign

覆盖属性的方式

Object.assign(baseLanguage, {
    loading: "加载中 ...",
    success: "操作成功!",
    done: "操作完成!"
})
登录写评论