通过扩展增强主干以改善体验

redmaomail 2024-07-24 21:53 阅读数 63 #wordpress

通过扩展增强主干以改善体验

Backbone 作为一种 Web 应用程序开发框架变得越来越流行。随着这种流行，无数的扩展和插件来增强框架的功能，并填补其他人认为需要填补的漏洞。让我们来看看一些最佳选择。

骨干.木偶

由 Derick Bailey 开发，这个扩展相当大，是我个人最喜欢的。 Derick 决定填补他认为存在的所有最大漏洞，而不是向 Backbone 添加一两个功能。以下是他在 GitHub 项目的自述文件中对此的说法。

“Backbone.Marionette 是 Backbone.js 的复合应用程序库，旨在简化大型 JavaScript 应用程序的构建。它是我 (Derick Bailey) 使用 Backbone 构建的应用程序中发现的常见设计和实现模式的集合，并包括受复合应用程序架构启发的各种部分，例如 Microsoft 的“Prism”框架。”

让我们仔细看看 Marionette 为我们提供了什么：

应用程序：这是一个中心对象，应用程序中的所有内容都可以通过它进行通信。它提供了一种快速、轻松地设置应用程序主视图的方法，一个中央事件中心，应用程序中的每个模块都可以通过它进行通信，这样它们就不会相互依赖，并且提供了用于细粒度控制的初始化程序您的应用程序如何启动。
模块：一种封装模块代码并在中央应用程序对象上命名这些模块的方法。
视图：要扩展的新视图类提供了用于清理的本机方法，因此您不会最终出现内存泄漏。它还包含渲染样板；对于简单视图，只需指定模板和模型，它就会处理其余的事情。
集合/复合视图：这就是“复合应用程序库”发挥作用的地方。这两个视图使您可以轻松创建视图，这些视图可以处理渲染集合中所有视图的过程，甚至是集合和模型的嵌套层次结构，只需很少的努力。
区域和布局：区域是一个对象，可以处理 DOM 中特定位置的渲染、取消渲染和关闭视图的所有工作。布局只是一个普通视图，其中还内置了用于处理子视图的区域。
AppRouter：一种新型路由器，可以使用控制器来处理工作负载，以便路由器只包含路由的配置。
事件：Marionette 从 Wreqr 项目扩展而来，使 Backbone 的事件更加强大，可用于创建基于事件的大型应用程序。

我只触及了 Marionette 功能的皮毛。我绝对建议前往 GitHub 并阅读他们在 Wiki 上的文档。

此外，Andrew Burgess 在他的 Tuts+ Premium 高级骨干模式和技术课程中介绍了 Marionette。

骨干网验证

Backbone.Validation 旨在填补一小部分问题：即模型验证。 Backbone 有多个验证扩展，但这个扩展似乎赢得了社区的最多尊重。

实际上，您不必为模型编写 validate 方法，而是可以为模型创建 validation 属性，该属性是一个对象，指定您希望验证的每个属性以及验证列表每个属性的规则。您还可以为每个属性指定错误消息，并传入自定义函数来验证单个属性。您可以看到下面的示例，该示例是根据其网站上的示例之一修改的。

var SomeModel = Backbone.Model.extend({
    validation: {
        name: {
            required: true
        },
        'address.street': {
            required: true
        },
        'address.zip': {
            length: 4
        },
        age: {
            range: [1, 80]
        },
        email: {
            pattern: 'email',
            // supply your own error message
            msg: "Please enter a valid email address"
        },
        // custom validation function for `someAttribute`
        someAttribute: function(value) {
            if(value !== 'somevalue') {
                return 'Error message';
            }
        }
    }
});

登录后复制

有无数的内置验证器和模式可供您检查，甚至还有一种方法可以使用您自己的全局验证器来扩展列表。这个 Backbone 插件并没有让验证变得很有趣，但它确实消除了不添加验证的任何借口。请访问他们的网站以获取更多示例以及如何使用这个精彩工具的更深入说明。

Backbone.LayoutManager

Backbone.LayoutManager 就是为了让 Backbone 的视图变得更好。与 Backbone.Marionette 一样，它引入了清理代码以防止内存泄漏，处理所有样板文件，并只为您留下配置和特定于应用程序的代码。与 Marionette 不同，LayoutManager 特别关注视图。

因为 LayoutManager 仅关注视图，所以它可以比 Marionette 为视图做更多的事情。例如，当您想要从外部文件动态加载模板时，LayoutManager 能够执行异步渲染。

LayoutManager 还可以处理子视图，尽管方式与 Marionette 非常不同。但无论哪种方式，它主要是配置，这使得事情变得非常简单，并且消除了您需要做的 90% 的工作（如果您试图自己实现这一切）。请看下面一个向视图添加三个子视图的简单示例：

Backbone.Layout.extend({
    views: {
      "header": new HeaderView(),
      "section": new ContentView(),
      "footer": new FooterView()
    }
});

登录后复制

像往常一样，请务必参阅 GitHub 页面和文档以了解更多信息。

Backbone.ModelBinder

Backbone.ModelBinder 在模型中的数据和视图显示的标记之间创建链接。您已经可以通过绑定到模型上的更改事件并再次渲染视图来完成此操作，但 ModelBinder 更高效且更易于使用。

看一下下面的代码：

var MyView = Backbone.View.extend({
    template: _.template(myTemplate),

    initialize: function() {
        // Old Backbone.js way
        this.model.on('change', this.render, this);
        // or the new Backbone 0.9.10+ way
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

登录后复制

这种方法的问题在于，每当更改单个属性时，我们都需要重新渲染整个视图。此外，在每次渲染时，我们都需要将模型转换为 JSON。最后，如果希望绑定是双向的（当模型更新时，DOM 也会更新，反之亦然），那么我们需要向视图添加更多逻辑。

此示例使用 Underscore 的 template 函数。让我们假设我们传递给它的模板如下所示：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName" value="<%= firstName %>">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName" value="<%= lastName %>">
</form>

登录后复制

使用标签 <%= 和 %> 使 template 函数将这些区域替换为我们从模型发送的 JSON 中存在的 firstName 和 lastName 属性。我们假设该模型也具有这两个属性。

使用 ModelBinder，我们可以删除这些模板标签并以普通 HTML 形式发送。 ModelBinder 将查看 input 标记上的 name 属性的值，并自动将该属性的模型值分配给该标记的 value 属性。例如，第一个 input 的 name 设置为“firstName”。当我们使用 ModelBinder 时，它会看到这一点，然后将 input 的 value 设置为模型的 firstName 属性。

下面，您将看到我们之前的示例在切换到使用 ModelBinder 后的外观。另外，要意识到绑定是双向的，因此如果 input 标签更新，模型将自动为我们更新。

HTML 模板：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName">
</form>

登录后复制

JavaScript 视图：

var MyView = Backbone.View.extend({
    template: myTemplate,

    initialize: function() {
        // No more binding in here
    },

    render: function() {
        // Throw the HTML right in
        this.$el.html(this.template);
        // Use ModelBinder to bind the model and view
        modelBinder.bind(this.model, this.el);
    }
});

登录后复制

现在我们有了干净的 HTML 模板，我们只需要一行代码就可以使用 modelBinder.bind 将视图的 HTML 和模型绑定在一起。 modelBinder.bind 采用两个必需参数和一个可选参数。第一个参数是将绑定到 DOM 的数据的模型。第二个是将递归遍历的 DOM 节点，搜索要进行的绑定。最后一个参数是 binding 对象，如果您不喜欢默认用法，它指定如何完成绑定的高级规则。

ModelBinder 不仅仅可以用于 input 标签。它适用于任何元素。如果元素是某种类型的表单输入，例如 input、select 或 textarea，它将相应地更新这些元素的值。如果您绑定到一个元素，例如 div 或 span，它会将模型的数据放置在该元素的开始和结束标记之间（例如 [数据在此处] )。

Backbone.ModelBinder 背后的功能比我在这里演示的要强大得多，因此请务必阅读 GitHub 存储库上的文档以了解所有相关信息。