我最近问这个问题:如何不重复自己并改进我的应用布局对象?
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对象中的方法,你就会明白我的意思!我想这是更灵活的不重复我的代码...
如果有人知道任何更好的方法,那么你可以请帮我一下吧!我不想要代码,请解释我出错的地方,并把基本概念放在它背后,我想自己做,并看看我是否可以在我自己做:)
这只是一个练习.. 。 预先感谢
您可以添加一个函数,它接受了sidebarLeft或sidebarRight对象并返回一个带有init,open等属性的对象,引用传递的对象作为闭包的一部分。 –