重用 Backbone.js 控件和小部件

Question

是否有一个很好的模型可以重用用 Backbone.js 编写的 UI 组件？

我的团队维护了一个大型 Web 应用程序，该应用程序主要是用服务器端代码编写的，但我们发现我们正在做越来越多的客户端工作。我们有几个用 jQuery 编写的大型 UI 组件，它们真的太复杂了，仅靠一个 DOM 操作库就无法维护。我们需要一个客户端应用程序框架。

jQuery 插件模型提供的一个好处是易于重用。您可以只创建一些具有适当 ID 的 HTML 元素，并将它们与$(function(){}) 连接起来。如果我们采用它，我们肯定需要用 Backbone 实现类似的东西。

那里的大多数示例都展示了如何完全在 Backbone 中构建应用程序，这很棒，但我们不会很快用 JavaScript 重新实现我们的应用程序。我们对客户端框架的使用仅限于复杂的 UI 控件，其中包含大量业务逻辑。

另一个考虑因素是我们有一个 JavaScript 捆绑解决方案。我担心将大量 Backbone 元素捆绑在一起可能意味着我们最终会在后台加载和运行无头控件。

你能构建 Backbone 控件并将它们打包为 jQuery 插件吗？有没有关于这种架构的好资源？

Answer 1

对我来说，使用 Backbone 的最佳部分之一就是您所描述的。 Backbone 的面向对象特性使得构建特定的“小部件”或其他可重用的代码片段变得非常容易，您可以将事件/模板/数据绑定到这些代码片段。您不一定要制作这些 jQuery 插件，因为它不会比 Backbone 的语法提供太多好处。

例如，你可以构建一个控件类，并绑定一个点击事件来触发其上的 foo 方法。

var Control = Backbone.View.extend({
    id:null,
    events: { 
        'click' : 'foo'
    },
    foo: function(){
        console.log(this.id);
    }
})

每次您希望 DOM 元素使用此行为时，您都需要创建一个新的 Control 对象，并使用 jQuery 将其绑定到该元素。

//I say foo when you click me
var foo = new Control({el: $("#foo"), id:'foo' });

//I say bar when you click me
var bar = new Control({el: $("#bar"), id:'bar' });

（您可以将这些调用包装到一个 jQuery 插件中）

这是一个非常简单的示例来展示工作流程，您可以使用 Backbone 的模型/集合和 Underscore 的模板引擎来创建一些非常强大的动态和可重用类。