javascript - 为什么我无法更新我的 JavaScript 对象属性值？

Question

我在更新应用程序对象属性值时遇到问题!每当我在 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
}

这个小应用程序 API 背后的想法是，我不需要手动检查容器是否可见并手动更改 UI，我只需调用 app.layout 方法就可以完成这项工作。 .

如您所见，当 app.layout.sidebar('open')(); 和 app 两种方法使用时，我尝试更新 'visible' 属性值.layout.sidebar('close')(); 被调用!

谢谢

<小时/>

这是更新版本:

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

希望它对那些希望将其集成到他们的应用程序中的人有所帮助，因为它使跟踪您的 UI 变得非常容易，而无需您每次都手动检查...

但是，如果有人知道更好的方法，请更新 jsFiddle 版本并在评论部分链接回来:)

谢谢你们，特别是那些乐于助人的人 干杯

Answer 1

您的代码每次都重新创建选项对象sidebar称为 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 .

我看不出您的 layout 的复杂性有任何原因。对象，因此除了确保 options 之外，不能真正推荐适当的更改。并不是每次都重新创建。

如果您愿意使用这种调用:

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(例如，其中包含空格，或者以数字开头但不是数字)。