4

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

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

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

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

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

  • 应用程序（CodeIgniter）
  • 资产
    • js
    • css
    • 图片

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

谢谢！

4

2 回答 2

4

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

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

于 2012-11-13T23:49:43.687 回答
3

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

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

关于 Backbone，是的，只要它返回 JSON，就可以很容易地将其模型与现有的 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: ...});

在这个例子中， div用它的名字#user反映了一个模型的状态。User

还要检查 Backbone 中的Todo App示例。

于 2012-11-13T19:01:37.223 回答