如何不重复自己并改进我的应用布局对象？

Question

我最近问这个问题：

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

这是目前解决和完美的作品，这里是的jsfiddle更新版本：

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

这里是代码本身：

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

但是我不开心与approa CH我认为是我重复自己，（如果你看看SidebarLeft和sidebarRight）我app.layout对象中的方法，你就会明白我的意思！我想这是更灵活的不重复我的代码...

如果有人知道任何更好的方法，那么你可以请帮我一下吧！我不想要代码，请解释我出错的地方，并把基本概念放在它背后，我想自己做，并看看我是否可以在我自己做:)

这只是一个练习.. 。 预先感谢

Answer 1

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

var Sidebar = function(selector) { 
    this.activeClass = 'active'; 
    this.$el = $(selector); 
}; 

Sidebar.prototype.isActive = function() { 
    return this.$el.hasClass(this.activeClass); 
}; 

Sidebar.prototype.open = function() { 
    this.isActive() || this.$el.addClass(this.activeClass); 
}; 

Sidebar.prototype.close = function() { 
    this.isActive() && this.$el.removeClass(this.activeClass); 
}; 

，然后用它是这样的：

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

}());