结合Require.js，Backbone.js和服务器端MVC框架

Question

我们实际上正在计划一个非常复杂的Web应用程序。 至少对我自己的标准来说。 在过去，我们一直使用服务器端MVC框架（Codeigniter）和客户端功能（jQuery和插件）的组合。 我们在视图中简单地编写了内联JavaScript代码。 这按预期工作，但当然有几个缺点：

• 没有缓存
• 重复的js代码
• 可维护性问题
• ...

我现在的主要目标是以高效且易于维护的方式组织客户端代码。 但是我想继续使用服务器端MVC，因为现有的知识和一些现有的接口。 此外，我想用jQuery和“spaghetti代码”减少复杂的DOM操作。

现在我想到了Backbone.js和Require.js的组合，但我真的找不到关于如何将它们与服务器端MVC结合起来的教程或任何可靠的描述。 甚至推荐吗？

在我的旧应用程序中，我得到了这样的文件结构：

• 应用程序（CodeIgniter）
• 资产
  • JS
  • CSS
  • IMGS

有什么想法或最佳实践吗？

谢谢！

Answer 1

要添加mexique1的建议，可能值得查看骨干 - 样板项目 。 它应该为您正在考虑的许多问题提供最佳实践解决方案，例如需求和主干的组合，项目客户端的组织以及复杂DOM操作的减少（请参阅模板） 。

正如您所预料的那样，挑战很可能是将样板方法与您习惯的方法相结合。 但是，它几乎肯定值得付出努力，因为它应该为这个和未来的项目提供坚实的基础。

Answer 2

我认为Backbone是一个不错的选择，并且Require在这里不是强制性的。

要求只会帮助您组织源代码并可能提高性能。 我认为你可以立即开始使用Backbone，这将是你最常用的东西，并在稍后添加Require。

关于Backbone，是的，如果它返回JSON，它很容易使用它与现有的MVC应用程序一起使用它。 要加载现有数据，您需要使用结合到网址的fetch方法来适应现有代码或您自己的方法。

通常，请考虑在哪些视图中显示哪些模型。 Backbone可以帮助您这样思考： 我在Views中显示由JIS数据表示的模型。

此外，对于视图层，重用现有HTML非常容易，因为视图不依赖于任何内容，没有任何JavaScript模板或任何内容。

简单的例子：

<div id="user">
    <span class="name">John</span>
</div>

var UserView = Backbone.View.extend({
    render: function() {
        this.$el('.name').html(this.model.get('name'));
    }
});
var userView = new UserView({el: $('#user')[0], model: ...});

在此示例中， #user div反映了User模型的状态及其名称。

另请查看Backbone中的Todo App示例。