backbone 和 require.JS 是如何工作的?

How does backbone with require.JS work?

我想了解 requireJS 和 backbone 是如何工作的。使用 this site,当我在 Chrome 中打开 DevTools 并打开 Sources 选项卡时。我看到一长串 folders/files(见下图),它似乎是未压缩的源代码。但是,我没有看到它是通过“网络”选项卡加载的。

我想知道它是如何结合的,源代码像这样公开是否正常,即使我只请求了一个页面(即搜索页面,见图)加载所有视图是否正常以下)。我知道像 Angular 这样的现代 Javascript 应用程序喜欢在应用程序出现之前预加载它。但这不会给用户带来很多不必要的流量吗?尤其是那些在移动设备上观看的?

首先,您的问题混淆了两件事。

  • BackboneJS和RequireJS完全不相关
  • 您观察到的(脚本面板中的模块依赖结构与所有那些实际未下载的文件)是由于 "Source maps"
  • 的调试器支持

因为我猜你的困惑是由此引起的,我将从...开始...

来源地图

现代浏览器支持源地图。他们的目的是在原始源代码被连接 and/or 缩小到一个文件中时显示原始源代码。

源映射文件描述了例如第 1 行字符 20563 的符号 ZZyb 映射到例如file/somewhere/in/the/tree 在第 34 行 char 1 并且被命名为 someView.

缩小文件使用

引用源映射
# sourceMappingURL=getaround-min.js.map

签名。

有关源地图的更多信息:http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

在您链接的网站上下载缩小文件 (https://www.getaround.com/js/150502002818/getaround-min.js) 时,您会在文件末尾看到该签名:

//# sourceMappingURL=getaround-min.js.map

然后您可以下载该文件。这就是您的调试器所做的。

RequireJS 与 BackboneJS

您可以使用 RequireJS 来模块化您自己的代码,或者与尚未附带此类技术的其他框架结合使用。

例如,

AngularJS 有它自己的依赖管理,允许您定义命名依赖,最后启动应用程序。这允许您将所有源连接(并缩小)到一个文件中,而无需考虑定义顺序。

尽管 Backbone 和 Require 无关,但它们可以很好地协同工作。

RequireJS

RequireJS 实现了所谓的 AMD spec.

模块定义了依赖项和实现该模块的回调。

depA:

// Require depB and depC and after they've been loaded 
// call the callback function and pass those 
// dependencies. Finally return that module.
define(["depB", "depC"], function(depB, depC){
   // by convention depB will resolve to depB.js relative 
   // to "depA"'s path

   // object, string, number, function your module is made of
   return something; 
});

RequireJS 将下载依赖项,在内部存储(缓存)它们并将它们传递给回调。这个过程沿着依赖树重复。当一个依赖已经被下载(被另一个上游模块)时,它可以直接传递而不需要再次下载它。

部门B:

define(["depC", "depD"], function(depC, depD){
   // depC has already been loaded and cached - doesn't 
   // need to be downloaded again
});

需要JS优化

可以(并且 - 在互联网上 - 应该)通过使用 r.js 打包它们来避免逐个文件下载所有依赖项。这些模块将在构建期间转换为一个文件。