javascript - ES6 : How to store the object inside this class?

Question

TopPage_R 类在某种程度上类似于 R class在 Android SDK 中(如果不详细说明，R 类存储对图像、字符串值等的引用)。在我继承的 ES6 类中， CSS_CLASSE_SELECTORS 是静态属性(实际上是方法)，它按类名(例如 )返回 css 类选择器(例如 .header) header )。

class R {

    static getSelectorsOfCssClasses(CssClassesObj){

        let OutputCssClassesObj = CssClassesObj;

        for (let key in OutputCssClassesObj){
            OutputCssClassesObj[key] = '.' + CssClassesObj[key];
        }

        return OutputCssClassesObj;
    }
}

class TopPage_R extends R {

    /* required even if constructor in the superclass nas not beed defined */
    constructor() {
        super();
    } 

    static get CSS_CLASSES () { return {
        header: 'header',
        logo: 'logo',
        navmenu: 'navmenu',
        footer: 'footer'
    }}

    static get CSS_CLASS_SELECTORS(){ 
        return R.getSelectorsOfCssClasses(TopPage_R.CSS_CLASSES)}
    }
}

每次我们调用 CSS_CLASS_SELECTORS 方法时，都会创建新对象并 将执行循环。浪费系统资源，不是吗？

console.log(TopPage_R.CSS_CLASS_SELECTORS.header);
// The new OutputCssClassesObj will be created again
console.log(TopPage_R.CSS_CLASS_SELECTORS.footer);

我需要将 CSS_CLASS_SELECTORS 存储在继承的类中。 但是我不想创建 TopPage_R 的实例:我想调用 这个类，然后它是静态属性，如 Android SDK 中的 setToolbarTitle(getString(R.string.app_name));

let pageResources = new TopPage_R(); // I don't want to create the instance >_<
let $header = jQuery(pageResources.CSS_CLASS_SELECTORS.footer);

我可以将 CSS_CLASS_SELECTORS 存储在 TopPage_R 中而不创建它的实例吗？假设 CSS_CLASS 属性在 Web 应用 session 期间不会更改。

Answer 1

目前，ES6不支持静态属性，仅支持静态方法。 但是您可以使用旧语法来设置类的静态属性:

class TopPage_R extends R {

    ...

    static get CSS_CLASS_SELECTORS() {
        return R.getSelectorsOfCssClasses(TopPage_R.CSS_CLASSES);
    }
}

TopPage_R.CSS_CLASSES = {
    header: 'header',
    logo: 'logo',
    navmenu: 'navmenu',
    footer: 'footer'
};

另一个选择是将你的 css 类定义为类外部的变量。如果您使用 ES6 模块，那么此变量将对应用程序的其余部分隐藏，因此无需担心隐私问题。

let CSS_CLASSES = {
    header: 'header',
    logo: 'logo',
    navmenu: 'navmenu',
    footer: 'footer'
};

class TopPage_R extends R {

    static get CSS_CLASSES () {
        return CSS_CLASSES;
    }

    static get CSS_CLASS_SELECTORS() {
        return R.getSelectorsOfCssClasses(TopPage_R.CSS_CLASSES);
    }
}

或者您可以将 Babel 与 Class properties transform 一起使用编译您的代码，然后使用:

class TopPage_R extends R {

    static CSS_CLASSES = {
        header: 'header',
        logo: 'logo',
        navmenu: 'navmenu',
        footer: 'footer'
    };

    static get CSS_CLASS_SELECTORS() {
        return R.getSelectorsOfCssClasses(TopPage_R.CSS_CLASSES);
    }
}