Those pits in Seajs.

What is SEAJS? First look at the paragraph code:

1 var loder = {}; 2 var function (id,deps,factory) {3       Loader[id] = factory; 4 };

What did the above code do? This is the simplest loader, but there is a big gap from the actual application, need to add a lot of features, Seajs is a mature solution. When a page is a collection of more and more JS, these JS are maintained by different groups and JS contains a lot of components, so the same function may be named conflict, in order to resolve the naming conflict, you may add a namespace, memory namespace is a burden, and other components of the reference, The problem of how to manage the load of dependent files is also a problem because of the complex dependency relationship. SEAJS solves the problem of namespaces, dependencies, etc. well. Simply put, SEAJS is the module loader, which interprets namespaces and components as modules. The code written in accordance with the SEAJS rules conforms to the CMD specification, with two benefits: two is to make the module definition simple, and the other is to make the module release simple. How is it done in both respects?

1. The module is defined in the first way, the module is written in the source code define (factory), very simple, but if the direct merging of multiple define will cause you do not know how to refer to the specific module, so the second part, how to make the module publishing process simple.
2. The module extraction process is to convert the source code into a code that SEAJS can interpret correctly, i.e. define (id,deps,factory) requires Grunt-cmd-transport or Spm-build tools.

The secret to making these two things simple is that the SEAJS uses the path as the module identifier, and then, in the process of extracting dependencies, it merges the file based on the module identity to find the dependent module, and converts the module definition to this form define (id,deps,factory). The ID of the define (id,deps,factory) and the Deps module in the code after the line are identified by the path, and the corresponding complete module identification can be found according to the path as the module identification.Module IdentificationSeajs's module definition is very simple, the main difficulty is that different projects have different deployment requirements, and therefore because the module identity is not understood enough to enter a variety of pits. Below the detailed analysis of the module identification! module Identity Naming conventions：

1. A module identifies a / number of components separated by a slash ().
2. Each item must be a small hump string, . or .. .
3. The module ID may not contain the file suffix name, for example .js .
4. The module ID can be a relative or top-level identity. If the first item is . or .. , then the module ID is relative to the identity

explain some of these concepts：

1. Relative path, . or..开头
2. 顶级路径，不以Start with a. or ..及 slash ( / )
3. A normal path, except for a relative and top-level path, such as/(root path),,,, etc., at the "http://" "https://" "file:///" beginning of a protocol identifier.
4. The module namespace is the root path of the file where the Seajs is located, the so-called base path, removing the seajs/x.y.z string, you can also specify Seajs.config ({base:});

How is the module dependent extraction process resolved?

1. Extract only relative identities
2. Relative identification require of the module relative to the identity to resolve

after-line module identification parsing rules?

1. The top-level identity always resolves relative to the base underlying path. (The top-level identity starts with a string)
2. Absolute path and root path, that is, normal path, always relative to the current page resolution, as we normally use other JS and CSS path, such as the current page is www.simple.com/user/index.html, the path is/js/ Hello.js, the address after which it resolves is www.simple.com/js/hello.js.
3. 模块定义中requirerequire.asyncthe relative path of the and is resolved relative to the current module path.

If we can understand the starting point of its module identity resolution design, then we can easily understand these without remembering so much:

1. Separation of concerns. When writing the module, we do not need to specify the module ID, require module when just fill in the relative path of the dependent module, so we just focus on the code of writing rather than rely on, after the packaging tool will automatically help us handle the module ID.
2. Try to be consistent with the browser's parsing rules. On-line after the code in the browser, module path parsing rules should be used in the usual CSS, JS these load path rules, the normal path and relative path are relative to the current page.

Example

The directory structure is as follows:

 -- app-- blog index.html--sea-modules --Seajs
 --2.2.0
 Sea.js
 --blog
 --user
 --1.0.0
 Main.js
 --static
 --user
 --src
 A.js
 B.js
 Main.js
 --dist
 Main.js
 Package.json
 Makefile
 
 

 // /www/static/user/src/a.js      Define (function   (Require,exports,module) { Module.exports  = function   () { 
   
    // 
       };}); 
   

//    /www/static/user/src/b.jsdefine (function(require,exports,module) {       function() (         ) {//  ... ...... . .........      };});   

//    /www/static/user/src/main.jsdefine (function(require,exports,module) {

     var a = require ('./a ");     var B = require ('./b ');
      //  ..............

//   /www/static/user/package.json{      family:"blog",      Name:"User",      Version:"1.0.0",      spm:{            output:["Main.js"]}      }    

/www/static/user/makefile
Build:    @spm builddeploy:    -rf. /.. /sea-modules/blog/user    @mkdir  : /.. /sea-modules/blog/user    @mkdir  : /.. /sea-modules/blog/user/1.0. 0     @cp     Dist*/*.. /.. /sea-modules/blog/user/1.0.0    @echo    @echo   "deploy to seajs-modules/blog/user/1.0.0"    @echo 

Build the project with Spm-build: Cd/www/static/user; Spm-build--encoding GBK will generate Main.js and main-debug.js,main.js under/www/static/user/dist.

/www/static/user/dist/main.js
Define ("Blog/user/1.0.0/main", ["./a", "./b"],function(require     ) {var a = require (' ./a ");     var B = require ('./b '); });d efine ("blog/user/1.0.0/a", [],function(require,exports,module) {     //  ....................... });d efine ("blog/user/1.0.0/b", [],function(require,exports,module) {       // .......................});

Then run make deploy

Will be. /dist/main deployment to/www/sea-modules/blog/user/1.0.0/main.js

How do I load a module in a page?

<!--     www.expample.com/app/blog/index.html     --<src= " /sea-modules/seajs/2.4.0/sea.js "  ID=" Seajson "></script > < Script >      seajs.config ({charset: "GBK"});     Seajs.use ("Blog/user/1.0.0/main"); </ Script >

Reference reading:

• SEAJS Working with Documents
• Using SEAJS for modular JavaScript development