带有require.JS的主干如何工作？

Question

I am trying to understand how requireJS and backbone work. With this site when I open the DevTools in Chrome and opened a Sources Tab. I see a long list of folders/files (see image below) which seems to be the source code when it's uncompressed. However, I don't see it being loaded via the Network Tab.

I wonder how does it tie in and is it normal that the source code gets exposed like this, and whether it is normal that all views are being loaded even I just requested one page (ie the search page, see image below). I understand that modern Javascript applications like Angular likes to preload the application before it's presented. But wouldn't it be causing a lot of unnecessary traffic to users? especially those on mobile view?

Answer 1

First, your question mixes two things.

• BackboneJS and RequireJS are completely unrelated
• What you observe (module dependency structure in the scripting panel vs. all those files actually not downloaded) is due to the Debugger support of "Source maps"

Since I guess your confusion is caused by this I'll start with ...

Source maps

Modern browsers support source maps. Their intention is to reveal the original source code when it has been concatenated and/or minified into one file.

The source map file describes eg the symbol ZZyb at line 1 char 20563 is mapped to eg the file/somewhere/in/the/tree at line 34 char 1 and is named someView .

Minified files reference the source map using the

# sourceMappingURL=getaround-min.js.map

signature.

More on source maps: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

When downloading the minified file ( https://www.getaround.com/js/150502002818/getaround-min.js ) on that website you've linked, you will observe that signature at the end of the file:

//# sourceMappingURL=getaround-min.js.map

You can then download that file. This is what your debugger does.

RequireJS vs. BackboneJS

You can use RequireJS to modularize your own code or in conjunction with other Frameworks that do not already ship with such technologies.

AngularJS for example has it's own dependency management which allows you to define named dependencies and finally you start the application. This allows you to just concatenate (and minify) all sources into one file without taking care of the definition order.

Even though Backbone and Require are unrelated they work very well together.

RequireJS

RequireJS implements the so called AMD spec .

A module defines dependencies and a callback to implement that module.

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 will download the dependencies, store (cache) them intenally and pass them to the callback. This process repeats down the dependency tree. When a dependency has already been downloaded (by another upstream module) it can be passed directly without downloading it again.

depB:

define(["depC", "depD"], function(depC, depD){
   // depC has already been loaded and cached - doesn't 
   // need to be downloaded again
});

RequireJS optimization

Downloading all dependencies file by file can (and - on internet seites - should) be avoided by packaging them using r.js . The modules will be converted into into one file during build time.