Question

TopPage_R类在某种程度上是Android SDK中R class的类似物（如果不详细说明，R类存储对图像的引用，字符串值等）。在我继承的ES6-class中，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内而不创建它的实例吗？假设在Web应用程序会话期间CSS_CLASS属性不会更改。

P上。 S.如果你想对这个问题进行选择，请在评论中告诉我原因，我将更正未来的问题提问方法。

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);
    }
}

Answer 2

我不知道它是如何工作的，因为它是静态的，但如果你想让一个方法或对象可用的方法没有它在每个新实例上运行，你需要将它添加到原型。

R.prototype.getSelectorsOfCssClasses = function(CssClassesObj) {
  ...
}

有关详细说明，请参阅此问题：https://stackoverflow.com/a/5837860/1763258

考虑一个满是学生的教室。把东西放在原型上就像把东西放在白板上让所有人看到。

ES6：如何在这个类中存储对象？

2 个答案: