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 打包它们来避免逐个文件下载所有依赖项。这些模块将在构建期间转换为一个文件。
我想了解 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 打包它们来避免逐个文件下载所有依赖项。这些模块将在构建期间转换为一个文件。