javascript - 何时定义模块以及何时仅使用 requireJS 请求文件

Question

我正在努力让 requireJS 正常工作。页面运行良好，但我认为我做事的方式非常错误。

例如，在页面 xzy 上，我在页面末尾添加以下 JavaScript(JS 目前必须保留在页面上，因此不可能使用外部 js 文件)

<script type="text/javascript" language="javascript">
  //<![CDATA[
  (function () {
    require([
      'async!http://maps.google.com/maps/api/js?v=3&sensor=false',
      'maps/jquery.ui.map.full.min.js',
      'maps/jquery.ui.map.extensions.min'
      ], function() {

        // ... do stuff with Google Maps

      }
    );
  }());
//]]>
</script>

这样做会使 google.map 和 $.().gmap 方法全局可用，而这可能不应该全局可用。

问题:
我应该将其转换为 requireJS 模块吗？为什么？

如果是这样，该模块是否也可以在其他页面上使用，或者我只是在第 123 页上“重新定义”并且依赖项文件已经被缓存？

最后 - 我是否必须将 require 调用中的代码转换为 module.methods，然后通过 module_name.method_name(pass_some_parameters) 调用？

Answer 1

只看 JS:

http://maps.google.com/maps/api/js?v=3&sensor=false

您可以看到 window.google 是全局的。如果 Google 不发布 AMD 版本，您对此无能为力。

关于是否创建模块的决定首先应该是 JS 代码的可读性/可维护性问题。模块(应该是)是可读的、可重用的代码块/可重用的抽象，可供其余代码使用。您还应该从中获得测试好处 - 每个模块应该更容易单独测试。

如果您选择模块化方法，您最终可能会得到更多的 JS 文件，并且您可能认为这会导致性能问题 - 即多个 HTTP 请求。但这可以通过使用 RequireJS Optimiser 来缓解。将模块优化为单个文件。

如果您转换为模块，是的，您可以从其他页面require它，并且如果您设置了HTTP缓存 header ，那么浏览器可能会选择使用缓存版本，从而节省您的时间HTTP 请求(如果您已将每个模块优化到单个文件中，则适用相同的缓存启发式方法)。

如果您重新定义(我假设您的意思是复制并粘贴代码块)，那么在调用require时列出的那些依赖项应该 全部由浏览器缓存，因此立即可用(取决于您的网络服务器及其 HTTP 缓存 header )。

最后，是的，您可能需要稍微重构代码才能公开新模块的 API。如果这意味着用方法公开单个对象，那么这就是您应该做的。根据我的经验，这个过程几乎不可避免地会带来更好的代码。因为您必须更多地考虑模块的用途，这通常会导致您破坏代码片段之间的耦合。