我正在努力使requireJS正常工作。 Page运行正常,但我认为我的处理方式很糟糕。

例如,在页面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)调用?

最佳答案

只看JS:

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

您可以看到window.google是全局的。如果没有Google发布AMD版本,您将无能为力。

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

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

如果转换为模块,是的,您可以在其他页面中require对其进行设置,并且如果设置了HTTP缓存标头,则浏览器可以选择使用缓存的版本,从而为您节省HTTP请求(适用相同的缓存启发式方法如果您已将每个模块优化为一个文件)。

如果您重新定义(我假设您的意思是复制并粘贴代码块),则require调用中列出的依赖项应全部由浏览器缓存,并因此立即可用(取决于您的Web服务器及其HTTP)缓存标题)。

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

关于javascript - 何时定义模块以及何时仅需要使用requireJS的文件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16214348/

10-11 13:05
查看更多