何时定义模块以及何时仅需要使用requireJS的文件

Question

I'm struggling to get requireJS to work properly. Page is running fine, but I think I'm doing things in an oh-so wrong way.

For example, on page xzy I'm adding the following JavaScript at the end of the page (the JS must stay on the page for now, so no external js-files possible)

<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>

Doing this makes google.map and the $.().gmap method globally available, which probably shouldn't be available globally.

Questions:
Should I convert this into a requireJS module? Why?

If so, will the module be available on other pages as well or do I just "re-define" on page 123 and the dependency files will already have been cached?

And finally - will I have to convert the code inside my require call into module.methods, which I then call via module_name.method_name(pass_some_parameters) ?

Answer 1

Just looking at the JS:

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

You can see that window.google is a global. There's not much you can do about that without Google releasing an AMD version.

Your decision regarding should you create a module should firstly be a question of readability/maintainability of the JS code. Modules are (should be), readable, reusable chunks of code/reusable abstractions that the rest of your code can consume. You should also derive testing benefits from this - each module should be easier to test in isolation.

You can end up with many more JS files if you choose a modular approach, and you might think this leads to performance issues - ie multiple HTTP requests. But this is mitigated by using the RequireJS Optimiser to optimise your modules to a single file.

If you convert to a module, yes you can require it from other pages, and if your HTTP caching headers are set up, then the browser may choose to use a cached version, thus saving you a HTTP request (same caching heuristics apply if you've optimised every module into a single file).

If you re-define (I assume you mean copy and paste the code block), then those dependencies listed in the call to require should all be cached by the browser, and therefore instantly available (depending on your web server and its HTTP caching headers).

Finally, yes you may have to refactor the code a bit to expose the new module's API. If that means exposing a single object with methods, then that's what you should do. This process almost inevitably leads to better code though in my experience. As you've had to think more about what the module's purpose is, and this often leads to your breaking the coupling between pieces of code.