Angular JS-8-Seajs with front-end modularity

First, the front-end of the modular

For front-end modularity, refer to the following links: http://www.cnblogs.com/huiguo/category/1125329.html

Second, Seajs

SEAJS:SEAJS is a module loader for Web browsers, mainly to implement the asynchronous loading of JS files and the dependencies between the management modules. in the world of Seajs, a file is a module . All modules follow the CMD specification.

Three, the CMD specification

Refer to the https://github.com/seajs/seajs/issues/242 link for a simple look at the CMD specification: The CMD specification clarifies the basic writing format and basic interaction rules of the module. In the CMD specification, a module is a file. The code is written in the following format:

Define (factory);

Global functionsdefine(factory)用来定义模块。define接受factory 参数，factory 可以是一个函数，也可以是一个对象或字符串。

 1. factory 为对象、字符串时，表示模块的接口就是该对象、字符串:

1 define ({"foo": "Bar" });//2 define (' I am a template. My name is {{name}}. ');

2  factory as a function, the representation is the construction method of the module . by Executing this construction method, you can get the interface that the module provides to the outside . factory When the method executes, the default is to pass in three parameters: require ,, exports and module :

Define (function(require, exports, module) {  //  Modules code });

   2.1 Require parameter    
          2.1.1 require   Require (ID)      method as  Factory The first parameter of the    function, accepts   module ID    as a unique parameter to get the interfaces provided by other modules. 

Define (function(require, exports) {  //  get module A's interface  var a = require ('./a ')  ; // method of calling module a   a.dosomething ();});

2.1.2 require.async(id, callback?)method is used to load the module asynchronously inside the module and execute the specified callback after the load completes. callbackparameters are optional.

 define (function   (require, exports, module) {   //  asynchronously loads a module that executes a callback when loading is complete  Require.async ('./b ', function   (b) {b.dosomething  ();  });   //  asynchronously loads multiple modules, executes callbacks when loading is complete     Require.async (['. C ', './d '], function   (c, D) {    C.dosomething ();  D.dosomething (); });});

requireIs the synchronous execution down, the require.async asynchronous callback executes. require.asynctypically used to load a module that can delay asynchronous loading.

2.1.3 require.resolve(id) 方法 Use the path resolution mechanism inside the module system to parse and return the module path. The function does not load the module and returns only the resolved absolute path. Typically used in plug-in environments or in scenarios where the module path needs to be dynamically spliced

Define (function(require, exports) {  Console.log (require.resolve ('./b '))  ; // ==> http://example.com/path/to/b.js });

  < Span class= "pl-k" > 2.2 exports parameter:            
           2.2.1 Exports    is an object that is used to provide a module interface to the outside. 

Define (function(require, exports) {  //  externally supplied foo attribute  exports.foo = ' Bar ' ;   // dosomething Methods  for external delivery function () {};});

2.2.2 In addition to exports adding members to an object, you can also use return the direct outward interface.

Define (function(require) {  //  via return directly provides interface  return  {     ' Bar ',    function() {}  };});

2.3 module is an object that stores some of the properties and methods associated with the current module.

String  Unique identification of the 2.3.1 Module.id module.

function (Require, exports, module) {  //  Modules code   
defineThe first parameter is the module identifier });

2.3.2 Module.uriString    据模块系统的路径解析规则得到的模块绝对路径。

Define (function(require, exports, module) {  console.log (Module.uri);    // ==> http://example.com/path/to/this/file.js });

In general (when there is no define handwriting id parameter in), module.id the value is module.uri exactly the same.

2.3.3 Module.dependenciesArraydependencies 是一个数组，表示当前模块的依赖。

2.3.4 Module.exports Object : interface provided externally by the current module.

passed to   Factory   constructor method   exports   parameter is   module.exports   A reference to the object. The interface is provided only through &NBSP, exports   parameters, and sometimes not all of the developer's needs are met. For example, when the interface of a module is an instance of a class, it needs to be implemented by   module.exports :

Define (function(require, exports, module) {  //  Exports is a reference to Module.exports  //  true  // re-assigning module.exports to a value  New SomeClass ();   // exports no longer equals module.exports  // false });

Angular JS-8-Seajs with front-end modularity