javascript - require.JS 的 backbone 如何工作？

Question

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

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

Answer 1

首先，您的问题混合了两件事。

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

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

来源 map

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

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

缩小文件使用

引用源映射

# sourceMappingURL=getaround-min.js.map

签名。

有关资源 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 是无关的，但它们可以很好地协同工作。

需要JS

RequireJS 实现了所谓的 AMD spec .

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

部门:

// 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
});

RequireJS优化

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