存储主干视图的最佳方式

Question

我已经构建了我的第一个主干应用程序，并且非常喜欢主干提供的结构。但是，我发现自己有一些小烦恼，我相信其他人已经找到了解决方案。

所以目前我已经创建了一个类似的文件结构

models
      index.js
      user.js
views
      index.js
      user.js

所以在我的视图文件夹中的“index.js”中，我目前拥有所有视图，所以假设我有

headerView
footerView
buttonView

等等等等

因此，我目前在一个与一个页面应用程序相关的通用“视图 js 文件”中有多个“视图”。问题是查找特定视图并不直观，我打开编辑器并找到正确的视图。

在其他 MVC 中，我会将每个视图存储在其自己的唯一文件中，并酌情使用它们 - 其他用户是否也这样做？我想我担心的是有多个单独的 js 文件？反正我是用minify项目来缩小js的，所以可以创建一个组，但是想知道其他人做了什么？

Answer 1

我建议你看看require.js。 Here 是一个可以帮助您入门的教程。

核心思想是……。像下面这样。

• 每个模型、视图、集合、路由器，驻留在其自己的文件中的任何内容都称为module
• 在每个模块的顶部定义其依赖项，这意味着需要加载哪些其他模块才能使新模块工作
• require.js 加载您的依赖项并保证通过您的自定义变量
进行访问

定义（例如 childView.js）

define([
    'jQuery',
    'Underscore',
    'Backbone'
], function($, _, Backbone){
     return Backbone.View.extend({
         //your usual view methods and properties
     });
});

重用（例如 parentView.js）

define([
    'jQuery',
    'Underscore',
    'Backbone',
    'pathToChildView/childView.js'
], function($, _, Backbone, ChildView){
     return Backbone.View.extend({
         // your usual view methods and properties
         // + access to your ChildView Modul
     });
});

如果您对模块加载语法有疑问，sugared 变体可能是您的朋友。

Answer 2

将每个对象分成分层文件夹中的视图/模板对以便更好地导航是值得的。然后，您只需在视图中构造子对象并传递 el 元素。这样您就可以根据需要在整个项目中重用每个对象。