Javascript 如何以正确的方式组织我的Marionette.js-app？

我正在开发我的第一个使用Marionette.js框架构建的大型前端应用程序。现在我有了BlogApp模块，这是一个小的blog子应用程序，只有两种方法：list（列出所有帖子）和show（按id显示单个帖子）：

我的文件夹是这样组织的：

--blog
  -blog_app.js
  --list
    --templates
     -blog_sidebar.template
     -blog_panel.template
     -blog_layout.template
     -blog_post.template
    -list_controller.js
    -list_view.js
  --show
    --templates
     -blog_sidebar.template
     -blog_panel.template
     -blog_layout.template
     -blog_post.template
    -show_controller.js
    -show_view.js

一切正常。

---

显示页面和列表页面之间的唯一区别是显示一篇完整的文章，而不是全部列出。现在我有两个控制器，我正在复制

show

和

list

方法的模板，这完全不是一个好的做法。但我也不认为我应该在

List.Controller

中实现我的

show

方法-它将帮助我使用相同的模板，因为它将破坏我的应用程序基础结构，并且在将来，当我必须添加一些功能时，例如注释、标记等，它将把一切都搞糟。如何正确组织我的博客模块？

到目前为止，我组织代码的方式总体上运行良好，没有任何内存泄漏（afaik）。
我将与您和任何可能认为这有用的人分享此信息。
我还将提供一些关于如何管理内存的补充信息

1） 对于文件夹结构，我有如下内容：

• 文件夹：应用程序
  • 文件夹：app_blog.js
    • 文件夹：布局（用于视图+模板）
    • 文件夹：视图（用于视图+模板）
    • 文件夹：=>下面是一个或多个子应用程序的名称
      • 文件夹：布局
      • 文件夹：视图
      • 文件：ctr_list.js=>木偶控制器
    • 文件：app_博客
• 文件夹：组件
• 文件夹：模型
• 文件夹：供应商
• 文件：main.js
• 文件：app.js

在我的应用程序中，

app_blog

是一个应用程序（文件夹），它使用app_name.js文件来管理路由，并引导子应用程序和控制器来管理应用程序的子部分

当路线被击中时：

//1. render layout 
var layout = new Layout(); 
layout.render(); 

//2. instantiate controller & tell the controller what to do 
var ctr_List = new Ctr_List(); 
ctr_list.showList(); 

我的应用程序中的控制器具有以下格式：

define(["backbone", "marionette", "jquery", "zwoop", "apps/app_blog/list/views/some_view"
], 
function(Backbone, Marionette, $, Zwoop, Some_View){ 

    var Ctr_List = Marionette.Controller.extend({ 

        initialize: function(options){ 
            this.events(); 
            this.region = new Marionette.Region({ el: #some-region }); 
            //Define more regions if you need to 
        }, 

        events: function(){ 
            app.on("reset", _.bind(function(){ this.close(); }, this)); 

            app.on("dosomething", _.bind(function(param){ this._doSomething(); }, this)); 
            this.events(); 

            this.region.on("show", _.bind(function(){ this.activatePlugin(); }, this)); 
        }, 

        showList: function(){ 
            this._showList(); 
        }, 

        _showList: function(){ 
            //Render the list 
            var some_view = new Some_View(); 
            this.region.show(some_view); 
        }, 

        _doSomething(param){

        }, 

        _activatePlugin(){
            //eg. $("#date-input").datepicker(); 
        }, 

        //Unbind all events 
        onClose: function(){ 
            app.off("doSomething"); 
            this.region.off("show"); 
        } 

    }); 

    return Ctr_List; 
}); 

然后，当另一个路由被触发并且另一个应用程序被启动时，如果有必要，我将调用

app.trigger（“reset”）

，以关闭控制器并取消绑定控制器绑定的事件

到目前为止，这对我很有效

define(["backbone", "marionette", "jquery", "zwoop", "apps/app_blog/list/views/some_view"
], 
function(Backbone, Marionette, $, Zwoop, Some_View){ 

    var Ctr_List = Marionette.Controller.extend({ 

        initialize: function(options){ 
            this.events(); 
            this.region = new Marionette.Region({ el: #some-region }); 
            //Define more regions if you need to 
        }, 

        events: function(){ 
            app.on("reset", _.bind(function(){ this.close(); }, this)); 

            app.on("dosomething", _.bind(function(param){ this._doSomething(); }, this)); 
            this.events(); 

            this.region.on("show", _.bind(function(){ this.activatePlugin(); }, this)); 
        }, 

        showList: function(){ 
            this._showList(); 
        }, 

        _showList: function(){ 
            //Render the list 
            var some_view = new Some_View(); 
            this.region.show(some_view); 
        }, 

        _doSomething(param){

        }, 

        _activatePlugin(){
            //eg. $("#date-input").datepicker(); 
        }, 

        //Unbind all events 
        onClose: function(){ 
            app.off("doSomething"); 
            this.region.off("show"); 
        } 

    }); 

    return Ctr_List; 
});