ES6：如何在這個類中存儲對象？

Question

TopPage_R類在某種程度上類似於 Android SDK 中的R 類（如果不詳述， R類存儲對圖像、字符串值等的引用）。 在我繼承的 ES6 類中， CSS_CLASSE_SELECTORS是靜態屬性（實際上是方法），它通過類名（例如header ）返回 css 類選擇器（例如.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 應用程序會話期間未更改。

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 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

考慮一個滿是學生的教室。 把東西放在原型上就像把東西放在白板上給他們所有人看。