為什么我不能更新更新我的JavaScript對象屬性值？

Question

我在更新App對象屬性值時遇到問題！ 每當我在App對象中調用方法時，我都試圖將“ visible”屬性從false更新為true！

現在我不知道為什么我不能更新值！！！ 有人可以幫我嗎？

這是代碼；

var app = app || {};

app.layout = {

    // SIDEBAR
    'sidebar': function(a) {
        var options = {
            'settings': {
                'object': $('.sidebar-left'),
                'visible': false,
                'type': 'wide'
            },
            'open': function() {
                if(options.isActive() === false) {
                    options.settings.visible = true;
                    options.settings.object.addClass('active');
                }
            },
            'close': function() {
                if(options.isActive() === true) {
                    options.settings.visible = false;
                    options.settings.object.removeClass('active');

                }
            },
            'isActive': function() {
                if(options.settings.visible === true) {
                    return true;
                } else {
                    return false;
                }
            }
        }
        return options[a];
    }

    // HEADER
    // CONTENT
    // FOOTER
}

這個小的App API背后的想法是，我不需要手動檢查容器是否可見並手動更改UI，我可以調用app.layout方法，這應該可以完成工作...

如您所見，當app.layout.sidebar('open')();的兩個方法app.layout.sidebar('open')();時，我正在嘗試更新'visible'屬性值app.layout.sidebar('open')(); 和app.layout.sidebar('close')(); 叫做！

謝謝

---

這是更新的版本：

http://jsfiddle.net/Farzad/ndb1490v/3/

希望它對那些希望將其集成到其應用程序中的用戶有所幫助，因為它使跟蹤UI變得非常容易，而無需您每次手動進行檢查...

但是，如果有人知道更好的方法，請對jsFiddle版本進行更新，並在注釋部分中鏈接回來：）

謝謝你們，特別是那些有幫助的人

Answer 1

每次sidebar被調用時，您的代碼都會重新創建 options對象，其中false為visible的硬編碼值：

app.layout = {

    // SIDEBAR
    'sidebar': function(a) {
        var options = {
            'settings': {
                'object': $('.sidebar-left'),
                'visible': false,                 // <=== Note
                'type': 'wide'
            },
            // ...
        return options[a];
    }
}

因此， 任何叫你做這樣的：

app.layout.sidebar('open')();

...將始終看到options.settings.visible為false 。

除了確保不會每次都重新創建options ，我看不到layout對象復雜性的任何原因，因此不能真正建議適當的更改。

如果您很樂意改用這種電話：

app.layout.sidebar.open();

...然后您可以簡化事情：

var app = app || {};

app.layout = (function() {
    var options = {
        'settings': {
            'object': $('.sidebar-left'),
            'visible': false,
            'type': 'wide'
        }
    };
    return {
        sidebar: {
            'open': function() {
                if(options.isActive() === false) {
                    options.settings.visible = true;
                    options.settings.object.addClass('active');
                }
            },
            'close': function() {
                if(options.isActive() === true) {
                    options.settings.visible = false;
                    options.settings.object.removeClass('active');

                }
            },
            'isActive': function() {
                if(options.settings.visible === true) {
                    return true;
                } else {
                    return false;
                }
            }
        }
        // HEADER, e.g.
        ,
        header: {
            // ...
        }
        // CONTENT
        // FOOTER
    };
})();

請注意，您需要確保代碼在 .sidebar-left元素存在之后運行。

---

旁注：您在options對象屬性鍵中使用的引號都是可選的，您可以將其省略：

var options = {
    settings: {
        object: $('.sidebar-left'),
        visible: false,
        type: 'wide'
    }
};

定義sidebar 。 在JavaScript中，唯一需要用引號引起來的是名稱是否不是無效的IdentifierName （例如，其中包含空格，或者以數字開頭但不是數字）。