Question

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

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

jQuery插件模型提供的一个好处是易于重用。您可以使用适当的ID创建一些HTML元素，并使用$(function(){})进行连接。如果采用Backbone，我们肯定需要用Backbone来实现类似的功能。

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

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

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

Answer 1

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

例如，您可以构建一个控件类，并绑定一个click事件来触发它上面的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的模板引擎获得真正的激烈创造，以创建一些非常强大的动态＆amp;可重复使用的课程。

重用Backbone.js控件和小部件

1 个答案: