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



我们实际上正在规划一个非常复杂的web应用程序。至少以我自己的标准来看。过去,我们一直在使用服务器端MVC框架(Codeigner)和客户端功能(jQuery和插件)的组合。我们只是在视图中编写了内联javascript代码。这正如预期的那样有效,但当然也有几个缺点:

  • 无缓存
  • 重复的js代码
  • 可维护性问题

我现在的主要目标是以一种高效且易于维护的方式组织客户端代码。但我想继续使用服务器端MVC,因为现有的专有技术和一些现有的接口。此外,我希望通过jQuery和"意大利面条代码"来减少复杂的DOM操作。

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

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

  • 应用程序(CodeIgniter)
  • 资产
    • js
    • css
    • imgs

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

谢谢!

为了补充mexique1的建议,可能值得一看骨干样板项目。它应该为您目前正在考虑的许多问题提供最佳实践解决方案,例如需求和主干的组合、项目客户端的组织以及减少复杂的DOM操作(请参阅模板)。

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

我认为Backbone是一个不错的选择,这里不强制要求。

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

关于Backbone,是的,只要它返回JSON,就可以很容易地将其Model用于现有的MVC应用程序。要加载现有的数据,您需要使用与url组合的fetch方法来适应现有的代码,或者您自己的方法。

通常,考虑哪些模型显示在哪些视图中。Backbone可以帮助您这样思考:我在由HTML创建的视图中显示以JSON数据表示的模型

此外,对于视图层,重用现有的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: ...});

在本例中,#userdiv反映了User模型的状态及其名称。

另请查看Backbone中的Todo应用程序示例。

最新更新