Question

我最近问过这个问题：

Why I can't update update my JavaScript object properties value?

现在已经解决并完美运行，这是jsFiddle的更新版本：

以下是代码本身：

var app = app || {};

app.layout = (function() {
    var options = {
        header: {
            object: $('#header'),
            visible: false
        },
        content: {
            object: $('#content'),
            visible: false
        },
        sidebarLeft: {
            object: $('.sidebar-left'),
            visible: true
        },
        sidebarRight: {
            object: $('.sidebar-right'),
            visible: false
        },
        footer: {
            object: $('#footer'),
            visible: false
        }
    };
    return {
        // SIDEBAR LEFT
        sidebarLeft: {
            init: function() {
                if(options.sidebarLeft.object.hasClass('active')) {
                    options.sidebarLeft.visible = true;
                }
            }(),
            open: function() {
                if (this.isActive() == false) {
                    options.sidebarLeft.visible = true;
                    options.sidebarLeft.object.addClass('active');
                }
            },
            close: function() {
                if (this.isActive() == true) {
                    options.sidebarLeft.visible = false;
                    options.sidebarLeft.object.removeClass('active');
                }
            },
            isActive: function() {
                return options.sidebarLeft.visible;
            }
        },
        sidebarRight: {
            init: function() {
                if(options.sidebarRight.object.hasClass('active')) {
                    options.sidebarRight.visible = true;
                }
            }(),
            open: function() {
                if (this.isActive() == false) {
                    options.sidebarRight.visible = true;
                    options.sidebarRight.object.addClass('active');
                }
            },
            close: function() {
                if (this.isActive() == true) {
                    options.sidebarRight.visible = false;
                    options.sidebarRight.object.removeClass('active');
                }
            },
            isActive: function() {
                return options.sidebarRight.visible;
            }
        },
        // HEADER
        header: {},
        // CONTENT
        content: {},
        // FOOTER
        footer: {}
    };
})();
////////////////////////////////////////////////////////////////////////////////////////////////////////

// Which panel are active


    if(app.layout.sidebarLeft.isActive() == true){
        app.layout.sidebarLeft.close();
        app.layout.sidebarLeft.open();
    }
    if(app.layout.sidebarRight.isActive() == true){
        app.layout.sidebarRight.close();
        app.layout.sidebarRight.open();
    }


var $notification = $('.notification');



    $notification.html('Left sidebar is active = ' + app.layout.sidebarLeft.isActive() + '<br>' + 'Right sidebar is active = ' + app.layout.sidebarRight.isActive());


    // Left Sidebar Actions
$('#sidebar-left-open').click(function(){
    app.layout.sidebarLeft.open();
});

$('#sidebar-left-close').click(function(){
    app.layout.sidebarLeft.close();
});

// Right Sidebar Actions
$('#sidebar-right-open').click(function(){
    app.layout.sidebarRight.open();
});

$('#sidebar-right-close').click(function(){
    app.layout.sidebarRight.close();
});


    $('button').click(function(){
        $notification.html('Updating...');
        setTimeout(function(){
        $notification.html('Left sidebar is active = ' + app.layout.sidebarLeft.isActive() + '<br>' + 'Right sidebar is active = ' + app.layout.sidebarRight.isActive());
        }, 400);
    });

但是，我对我在app.layout对象中重复自己（如果你看SidebarLeft和sidebarRight）方法所采用的方法感到不满意，你就是这样做的。我明白我的意思！我希望它更灵活，不要重复我的代码...

如果有人知道更好的方法，那么请你帮我吧！我不想要代码，请解释我出错的地方并将基本概念置于其后，我想自己做，看看我是否可以自己做：）

这只是一个练习...... 提前谢谢

Answer 1

不要重复自己？像这样创建一个可重用的对象：

var app = app || {};

app.layout = (function() {
    var options = {
        header: {
            object: $('#header'),
            visible: false
        },
        content: {
            object: $('#content'),
            visible: false
        },
        footer: {
            object: $('#footer'),
            visible: false
        },
        sidebarLeft: new Sidebar('.sidebar-left'),
        sidebarRight: new Sidebar('.sidebar-right'),
    };

    return {
       sidebarLeft,
       sidebarRight,
       header:{},
       content:{},
       footer:{}
    }
}());

//the rest of your code

然后像这样使用它：

visible

您还可以看到您的isActive()标志是多余的，每次调用打开或关闭时都需要设置。您可以通过调用visible而不是使用IIFE标记来完全替换它。

修改

您在评论中要求的示例 - 在所有内容周围使用var app = app || {}; (function() { /* sidebar constructor and prototype methods */ var Sidebar = function() { ... } app.constructors = app.constructors || {}; app.constructors.Sidebar = Sidebar; app.layout = ... }());以防止全局访问：

{{1}}

如何不重复自己并改进我的App Layout对象？

1 个答案: