智慧建站平台,千套网站模板,免费随心选!

您现在的位置: 首页>>网站教程

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

来源: 发布时间:2023-08-30热度:308 ℃
Backbone 作为一种 Web 应用程序开发框架变得越来越流行。随着这种流行,无数的扩展和插件来增强框架的功能,并填补其他人认为需要填补的漏洞。让我们来看看一些******选择。 骨干.木偶由 Deric···

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

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';
            }
        }
    }
});
登录后复制

本文地址:http://yunji1.cn