许多基于backbone.js 的框架在现实世界中的优点和缺点是什么? [关闭]

2024-03-25

希望有人可以分享他们对一些最新出现的backbone.js 变体的经验。 我在几个项目中对主干/下划线/需求有一些很好的经验,我希望下一步朝着复杂应用程序结构的更高级解决方案迈出一步。

我知道以下框架可用:

  • 木偶 https://github.com/derickbailey/backbone.marionette
  • 杰佩托(基于木偶) http://modeln.github.com/backbone.geppetto/#geppetto-context/job-1-event-bus
  • Chaplin https://github.com/chaplinjs/chaplin, Chaplin - 卓别林样板 https://github.com/pabera/chaplin-boilerplate
  • 椎骨 https://github.com/hautelook/vertebrae
  • 布局管理器 https://github.com/tbranyen/backbone.layoutmanager
  • Thorax http://walmartlabs.github.com/thorax/
  • Aura https://github.com/addyosmani/aura
  • Luca https://github.com/datapimp/luca
  • Singool http://fahad19.github.com/singool/
  • 后退栈 https://github.com/pwalczyszyn/backstack
  • hulk https://github.com/davps/backbone.hulk

  • 顺便说一句 - 大型项目的绝佳起点 http://boilerplatejs.org/

也许我错过了一些。

这里有一个关于差异的简短介绍:

  • 扬声器甲板谈话链接 https://speakerdeck.com/u/molily/p/application-frameworks-on-top-of-backbonejs-talk-at-appsberlinjs

但这很一般。我想知道是否有人可以分享他们使用这些框架在现实生活应用程序中的经验。

选择其中一种比另一种有什么好处?例如,什么时候马里内特会成为比卓别林更好的解决方案,或者为什么椎骨更适合某些应用。

当然,显而易见的答案是“使用最适合您需求的东西”,但我缺乏使用这些框架的经验,无法了解它们的优势/目的/优势或首选场景。

Thanks!

Edit 1:找到了这个帖子:Backbone.Marionette 与 Backbone-Boilerplate https://stackoverflow.com/questions/10510050/backbone-marionette-vs-backbone-boilerplate

Edit 2: 马蒂亚斯·谢弗(卓别林)通过邮件回复:

简而言之,当前的结构接近 1.0 版本,因为它已经在生产中使用。在 1.0 之前,我们不打算添加重大新功能或破坏 API 更改。

Marionette 无疑是最全面、最稳定的库。它解决了使用 Backbone 进行 JS 应用程序开发的多个方面。例如,它有一个强大的视图层,而 Backbone 本身则完全无效。当然,你会发现有些方面不能满足你的需求,你可能会觉得有必要围绕Marionette建立一个结构。

相比之下,Chaplin 专注于 Backbone 应用程序的一个相当小但非常重要的方面,即整体应用程序结构和模块生命周期。在这方面,卓别林非常固执,他更像是一个框架而不是一个库(就像“你的代码调用库,框架调用你的代码”)。 Chaplin 提供了一些位于各个应用程序模块之上并控制整个应用程序状态的中心类。这为您的应用程序提供了传统的结构,例如 Ruby on Rails 就是这样做的。

在 Chaplin 中,您声明一些映射到控制器的路由,一旦路由匹配,Chaplin 就会启动控制器。它还负责处理旧控制器,以及控制器应该创建的主视图的显示和隐藏。这是基本的想法,但卓别林处理了丑陋的细节,使这一切顺利进行。

这种结构有两个原则: - 模块化、解耦和沙箱 - 使用发布/订阅和中介器进行跨模块通信

当然,这些模式在软件开发领域并不新鲜,Chaplin 并不是唯一将它们应用于 Backbone.js 应用程序的库。

Chaplin 还为视图层提供了增强功能,例如高度复杂的 CollectionView,但总体上不如 Marionette 的区域和布局那么多。但使用 Chaplin Views 提供的方法编写此类元类相对容易。


您正在查看的大多数(全部?)框架都解决相同的问题,但它们的实现方式略有不同,目标也略有不同。

我认为可以公平地说所有这些项目都会解决以下类别的问题:

  • 提供一组合理的默认值
  • 减少样板代码
  • 在 BackboneJS 构建块之上提供应用程序结构
  • 提取作者在应用程序中使用的模式

我自 2011 年 12 月以来一直在构建 Marionette,它也有一些非常明确的目标和理想:

  • 复合应用架构
  • 企业消息传递模式影响
  • 模块化选项
  • 增量使用(没有全有或全无的要求)
  • 没有服务器锁定
  • 轻松更改这些默认值
  • 代码作为配置/过度配置

我并不是说其他​​框架都没有这些相同的目标。但我认为 Marionette 的独特性来自于这些目标的结合。

复合应用架构

我在使用 WinForms 和 C# 的胖客户端分布式软件系统中工作了 5 年多。我为台式机、笔记本电脑(智能客户端)、移动设备和 Web 应用程序构建了应用程序,所有应用程序共享核心功能集并多次使用相同的服务器后端。这次,我了解了模块化的价值,并很快走上了复合应用程序设计的道路。

基本思想是“组合”应用程序的运行时体验,并由许多彼此不一定了解的较小的单独部分组成。它们将自己注册到整个组合应用程序系统中,然后通过各种解耦消息和调用的方式进行通信。

我在我的博客上写了一些相关内容,介绍了 Marionette 作为 Backbone 的复合应用程序架构:

  • http://lostechies.com/derickbailey/2011/11/17/introduction-to-composite-javascript-apps/ http://lostechies.com/derickbailey/2011/11/17/introduction-to-composite-javascript-apps/
  • http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/ http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

消息队列/模式

同样的大规模分布式系统也利用消息队列、企业集成模式(消息传递模式)和服务总线来处理消息。这比其他任何事情都对我的解耦软件开发方法产生了巨大的影响。我开始从这个角度看待单进程、内存中的 WinForms 应用程序,很快我的服务器端和 Web 应用程序开发就受到了影响。

这直接转化为我对 Backbone 应用程序设计的看法。我在 Marionette 中为高级应用程序对象以及您在应用程序中创建的每个模块提供了一个事件聚合器。

我考虑了可以在模块之间发送的消息:命令消息、事件消息等等。我还将服务器端通信视为具有这些相同模式的消息。有些图案已经出现在 Marionette 中,但有些还没有。

  • http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/
  • http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/ http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/
  • http://lostechies.com/derickbailey/2009/12/23/understanding-the-application-controller-through-object-messaging-patterns/ http://lostechies.com/derickbailey/2009/12/23/understanding-the-application-controller-through-object-messaging-patterns/(WinForms代码,但仍然适用)

模块化

代码的模块化非常重要。对于任何具有显着规模和复杂性的系统来说,都必须创建小型、封装良好、具有明确入口和出口点的单一焦点的包。

Marionette 直接通过它的module定义。但我也认识到有些人喜欢 RequireJS 并且想要使用它。因此,我提供了标准构建和 RequireJS 兼容构建。


MyApp = new Backbone.Marionette.Application();

MyApp.module("MyModule", function(MyModule, MyApp, Backbone, Marionette, $, _){

  // your module code goes here

});

(目前还没有可用的博客文章)

增量使用

这是我尽可能融入 Marionette 各个部分的核心理念之一:使用 Marionette 时没有“全有或全无”的要求。

Backbone 本身采用了一种非常增量和模块化的方法来处理它的所有构建块对象。您可以自由选择要使用哪些、何时使用。我坚信这一原则,并努力确保 Marionette 以同样的方式工作。

为此,我在 Marionette 中内置的大部分组件都是独立构建的,可以与 Backbone 的核心组件配合使用,并且可以更好地协同工作。

例如,几乎每个 Backbone 应用程序都需要在屏幕上的特定位置动态显示 Backbone 视图。应用程序还需要在新视图到位时关闭旧视图并清理内存。这就是木偶的地方Region进来玩。区域会处理获取视图、调用渲染并将结果填充到 DOM 的样板代码。然后将关闭该视图并为您清理它,前提是您的视图具有“关闭”方法。


MyApp.addRegions({
  someRegion: "#some-div"
});

MyApp.someRegion.show(new MyView());

但是您不需要使用 Marionette 的视图来使用区域。唯一的要求是您要在对象原型链中的某个点从 Backbone.View 进行扩展。如果您选择提供close方法,一个onShow方法,或者其他,秘偶区会在适当的时候为你调用。

  • http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/ http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
  • http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/ http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

无服务器锁定

我在各种服务器技术之上构建 Backbone / Marionette 应用程序:

  • ASP.NET MVC
  • 红宝石 on Rails
  • 红宝石/西纳特拉
  • NodeJS / ExpressJS
  • PHP / 苗条
  • Java
  • Erlang
  • ... 和更多

当谈到在浏览器中运行时,JavaScript 就是 JavaScript。服务器端 JavaScript 也很棒,但它对我如何编写基于浏览器的 JavaScript 的影响为零。

由于我构建的项目和客户使用的后端技术的多样性,我不能也不会出于任何原因将 Marionette 锁定到单个服务器端技术堆栈。我不会提供样板项目。我不会提供 ruby​​ gem 或 npm 包。我希望人们了解 Marionette 不需要特定的后端服务器。它是基于浏览器的 JavaScript,后端并不重要。

当然,我完全支持其他人为他们的语言和框架提供包。我在 Wiki 中列出了这些软件包,并希望人们在看到需要时继续构建更多软件包。但这是社区支持,而不是来自 Marionette 的直接支持。

  • https://github.com/derickbailey/backbone.marionette/wiki/Available-packages https://github.com/derickbailey/backbone.marionette/wiki/Available-packages

轻松更改默认值

在我努力减少样板代码并提供合理的默认值(这是我直接从 Tim Branyen 的 LayoutManager 中“借用”的想法)时,我认识到其他开发人员需要使用与我略有不同的实现。

我提供基于内联的渲染<script>模板的标签,默认使用 Underscore.js 模板。但您可以通过更改来替换它Renderer and/or TempalteCache木偶中的对象。这两个对象提供了渲染功能的核心,并且有 wiki 页面展示了如何针对特定模板引擎和加载模板的不同方式更改此功能。

有了 Marionette v0.9,事情变得更加容易。例如,如果您想用预编译模板替换内联模板脚本块的使用,则只需替换渲染器上的一种方法:


Backbone.Marionette.Renderer.render = function(template, data){
  return template(data);
};

现在整个应用程序将使用您附加到视图的预编译模板template属性。

我什至在 v0.9 中提供了 Marionette.Async 插件,它允许您支持异步渲染视图。我不断努力让替换 Marionette 中的默认行为尽可能简单。

代码即配置

在某些情况下,我是“约定优于配置”的粉丝。这是一种完成工作的强大方式,Marionette 提供了一点点 - 虽然不是太多,老实说。许多其他框架 - 特别是 LayoutManager - 提供了比 Marionette 更多的配置约定。

这是有目的和意图的。

我已经构建了足够多的 JavaScript 插件、框架、附加组件和应用程序,以了解尝试让约定以有意义且快速的方式工作的痛苦。它可以快速完成,但通常是以无法改变它为代价的。

为此,我对 Marionette 采用“代码即配置”方法。我没有提供很多“配置”API,您可以在其中提供带有静态值的对象文字,从而改变一系列行为。相反,我通过带注释的源代码和实际的 API 文档记录了每个对象具有的方法,目的是告诉您如何更改 Marionette 以按照您想要的方式工作。

通过为 Marionette 对象提供干净清晰的 API,我创建了一种情况,即替换特定对象或整个 Marionette 的行为相对简单且非常灵活。我牺牲了“简单”的配置 API 调用,以换取提供您自己的代码的灵活性,使事情按照您想要的方式工作。

您在 Marionette 中找不到“配置”或“选项”API。但您会发现大量方法,每个方法都有一个非常特定的目的,并且具有清晰的签名,可以轻松更改 Marionette 的工作方式。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

许多基于backbone.js 的框架在现实世界中的优点和缺点是什么? [关闭] 的相关文章

  • Backbone 可以逆序渲染集合吗?

    我正在使用 Signalr 中心来订阅服务器上的事件 事件被分派到集线器 它成功地将项目添加到 Marionette CollectionView 这又被呈现到表格中 因为事件表本质上是一个记事本 所以我希望事件按相反的顺序排列 并且最好只
  • 主干+rails TypeError:List.Header不是构造函数

    我正在尝试按照从该网站购买的教程进行操作 http www backbonerails com http www backbonerails com 我正在关注该系列的第五集 起床运行 第 1 部分 在视频的 46 52 左右 他有 lis
  • Javascript MVC 框架的目的[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我想知道 Javascript MVC 框架 例如 Backbone js 和 Spine js 的用途 作为一名热心 经验丰富的 Ruby o
  • Backbone - 从 API 获取 JSON 数据

    这几天我在玩Backbone 我想从 Twitter 搜索 API 接收一些数据 但我真的不明白它是如何工作的 这是我的代码 function Tweet Backbone Model extend Tweets Backbone Coll
  • 如何在JQuery中选择除单击元素之外的所有类?

    我有一个在 Drupal 上开发的网站 我使用一个名为 collapsiblock 的模块 它基本上是一个 JQuery 插件 来实现类似手风琴的效果 它对我来说工作得很好 尽管它还处于测试阶段 但我想修改它 以便当用户单击手风琴的一项时
  • Backbone - 对 id 使用不同的字段名称

    我正在移植一个旧应用程序以使用backbone js 希望如此 问题是系统中的各种对象都没有使用 id 作为 id 每个对象都是不同的 通过阅读 我在初始化 Backbone Model 时提出了以下解决方案 initialize func
  • Coffee HAML 中的部分内容 (.hamlc)

    我在 Rails 后端使用backbone js哈姆咖啡 https github com netzpirat haml coffee 它是由haml 咖啡 资产 https github com netzpirat haml coffee
  • 使用node.js和backbone.js进行模板渲染

    有没有人找到一个好的解决方案来开发可在服务器和客户端上使用的backbone js模板 这对于backbone js历史堆栈来说是非常理想的 因为用户可以在浏览器位置栏中共享和链接到真实的url 并且node js服务器可以在第一个页面视图
  • 保护我的 Node.js 应用程序的 REST API 安全?

    我可以在 REST API 上获得一些帮助 我正在编写一个 Node js 应用程序 它使用 Express MongoDB 并在客户端使用 Backbone js 在过去的两天里 我一直在努力解决所有这些问题 但运气不佳 我已经查过了 保
  • 避免从主干视图重新渲染图像和其他内容

    当我重新渲染主干视图时 有什么好方法可以跳过重新渲染图像和谷歌地图等内容 每次重新渲染视图时 我的照片和地图视图都会闪烁得很厉害 这种情况很常见 特别是对于图像 模板引擎从头开始布局布局 这会导致图像标记再次从服务器或从缓存中获取位图 当然
  • Backbone.View“el”混淆

    视图应该如何el被处理 必须设置它 否则事件不会触发 请参阅here https stackoverflow com questions 4909564 backbone js why isnt this event bound 但它应该是
  • 主干表视图消耗行视图 - 如何构造?

    我有一组模型希望在表格视图中呈现 每个模型应由表中的一行表示 并且该行应使用模板生成 我应该能够将事件处理程序附加到该行 例如单击 在事件发生时发出有关与该行关联的模型的一些特定信息 我见过类似的事情的一种常见方法是将每一行分解到它自己的视
  • 依赖注入与托管依赖关系与全局对象

    我正在 Javascript BackboneJS 一个 MVC 框架 RequireJS 框架中工作 但这个问题有点 OO 通用 首先让我解释一下 在 Backbone 中 您的视图是传统视图和控制器的混合 而您的 HTML 模板是传统的
  • Backbone.js / Marionette.js 中的路由 - 无主题标签、路由列表和子路由器

    我对 Backbone js Marionette js 中的路由有三个问题 1 如何获取我的应用程序路由器已注册的所有路由的列表 例如对于 Express js 在 Node js 中 它将是app routes 我尝试对 Backbon
  • 与 jQuery 配合使用的backbone.js 替代品?

    有没有像backbone js这样的东西的替代品 它为你的前端javascript提供了一些框架 结构 但没有任何不需要的依赖项 并且与jQuery更紧密地结合在一起 您需要一个易于使用的 MVC 框架吗 因为Sammy js http s
  • 在主干/下划线模板中使用循环

    我有一个backbone js underscore js 模板 我将其输入到主干视图中进行渲染 视图传递一个包含数组的模型posts对象 我称之为post在模板中 Problem 当我尝试循环遍历数组的所有元素时posts 我收到一个错误
  • 脚本内的角度范围

    我们可以使用脚本标记内范围中定义的角度变量 如下所示 HTML 代码 div div JS CODE function AngularCtrl scope scope user name John 我只是得到 scope 未定义 有人可以帮
  • PMT功能 支付方式

    下面是我计算贷款付款的函数 就像在 Excel 中一样 我需要添加另一个参数 即付款类型 function PMT ir np pv fv ir interest rate per month np number of periods mo
  • 告诉 ember.js 对其模型的“id”使用不同的密钥

    我陷入了不应该回来的境地idAPI 端点中的字段 我需要告诉 ember 使用slug字段为 而不是id I tried DS RESTAdapter map App Post id key slug 虽然这对于App Post find
  • 如何有一个后备路由来捕获backbone.js中的未知页面

    我设置了一组如下所示的路线 routes home home home page home 我想知道的是 如何配置路由 以便如果用户请求未知页面 我可以轻松重定向到静态 404 html 页面 在您的路由器中 例如前两条路由 routes

随机推荐

  • 如何将字符串的元素放入具有特定行为的列表中

    list1 A B list2 1 1 1 2 1 3 1 4 2 1 2 2 2 3 2 4 我需要我的输出 1 1 1 2 1 3 1 4 2 1 2 2 2 3 2 4 现在如果我知道 子列表 1 的长度 4 sublist2 的长度
  • EF Code First 延迟加载不起作用

    我首先使用 EF6 的代码 但似乎无法让延迟加载工作 预加载工作正常 我有以下课程 public class Merchant User public virtual ICollection
  • D3.js - 具有多个环和动画过渡的甜甜圈图

    如何为下面的多环D3图表添加过渡动画效果 如图所示D3 js 具有多个环的圆环图 https stackoverflow com questions 17507728 d3 js donut charts with multiple rin
  • BlackBerry Simulator 中的图形加速错误

    当我在模拟器上运行任何程序时 它会打开并显示错误 图形加速错误 BlackBerry 9900 Simulator 检测到您当前的图形加速存在问题 设置 具有最新视频的 OpenGL 1 x 兼容显卡 图形加速需要驱动程序 请尝试较低的 通
  • 在 Android 中将原始文件移动到 SD 卡

    我有一个方法可以copy an Audio file from raw folder to SD card 需要两个输入 ressound ogg 音频原始文件 ID fName SD卡中原始文件的文件名 Updated public bo
  • iOS 16 中 List 中的嵌套 ScrollView + 可刷新的奇怪行为

    在我的 SwiftUI 应用程序中 我有一个带有嵌套 ScrollView 的列表 因为我已将 iPhone 更新到 iOS 16 所以主列表上的刷新有一个奇怪的行为 似乎每个ScrollView都有自己的刷新 问题是我在主列表上应用了 r
  • jQuery 从 select 获取值然后更改 div 的 css

    我一直在尝试使用这个例子 但我一生都无法让它发挥作用 从选择中更改 Div 的背景 https stackoverflow com questions 5764413 change background of div from select
  • 属性名称不同时如何指定映射规则

    我是 Automapper 框架的新手 我有一个域类和一个 DTO 类 如下所示 public class Employee public long Id get set public string Name get set public
  • 有没有办法从 vim 一次打开多个文件?

    当从命令行启动 vim 时 我可以这样做vim txt一次打开目录中的所有文本文件 出于某种原因 在 vim 内部尝试相同的操作 e txt 给出错误 E77 Too many file names vim 拒绝一次打开多个有什么原因吗 有
  • 在主查询中的一列中返回多个值

    我试图从表中查找相对信息 并将这些结果 以及其他不相关的结果 作为较大查询的一部分返回到一行中 我已经尝试使用这个示例 并针对我的数据进行了修改 如何在一列中返回多个值 T SQL https stackoverflow com quest
  • 检查 Laravel 中的请求数组是否为空

    我有一个动态生成的表单 它为我提供了一组输入 然而数组可能为空 那么 foreach 将失败 public function myfunction Request request if isset request do something
  • 如何使嵌入式 Elasticsearch 可通过 localhost:9200 访问

    我正在玩spring boot sample data elasticsearch https github com spring projects spring boot tree master spring boot samples s
  • 在 VS 2012 中部署 Visual Studio 插件

    我已经成功创建了 Visual Studio 插件 但是我很困惑如何在另一台计算机上部署这个插件 我已经浏览了 stackoverflow 的答案 但是我对此事没有明确的想法 您只需将 YourAddIn dll 和 YourAddIn A
  • 将函数指针设置为静态地址

    我正在将 DLL 注入另一个进程 并希望根据其地址 0x54315 调用该二进制文件中的函数 我怎样才能真正声明一个函数 然后将其设置到这个地址 define FUNC 0x54315 void myFuncPtr int main myF
  • UI 自动化 - 为另一个应用程序的文本框设置文本

    我有两种形式 当单击其中一个按钮时 我想打开另一个按钮并在其中填充一个文本框 我尝试使用下面的代码 但它给出了一个错误 指出 不支持的模式 这是我的代码 private void button1 Click object sender Ev
  • 找出长度为 N 的两个字符的所有可能组合

    我有两个角色 例如 a a b b 我需要找到这两个字符的所有可能组合 从而形成长度为 N 的字符串 例如 如果N 3 combinations aab aba baa abb bab bba aaa bbb 某些模块中有此功能吗 iter
  • 覆盖 Django 模型 __init__ 方法

    我的 Django 项目的 Ingredient 模型有一个IntegerField它声明该原料库存是否按重量 单位或窝数进行管理 虽然数据库有它的integervalue 我必须显示它的名称 我认为最好覆盖每个成分并设置其值 而不是覆盖
  • 清理我的 git 分支的开发功能

    我参加 git 聚会有点晚了 我有一个简单的问题 我的主分支上目前正在开发三个功能实验 这些功能可以称为postits auth and uploads 当我做git status在我的主分支上 我得到了 已更改但未更新 中约 10 个条目
  • iOS 14/Xcode 12.0.1 更新后 UIPickerView 渲染不正确

    有人注意到应用程序 UIPickerViews 中的文本渲染不正确 第一个字符被截断吗 我在多个设备上的应用程序的所有 UIPickerViews 中看到了这一点 在大多数情况下 您可以看到第一个字符的几个像素 我尝试过从手机中删除派生数据
  • 许多基于backbone.js 的框架在现实世界中的优点和缺点是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 希望有人可以分享他们对一些最新出现的backbone js 变体的经验 我在几个项目中对主干 下划线 需求有一些很好的经验 我希望下一步朝着复杂