JavaScript Module Specification: Commonjs,amd,cmd

Commonjs/nodejs implementation

• Variables provided by the node. JS context
  • Require: a function that refers to a dependent module, the dependent module is referenced as an object, can consume the provided methods and variables, and require () accepts a module identification parameter.
  • Module: Object that represents the current module itself
  • Exports: Object, module's properties, as the only export of modules, used to export the methods and variables provided by the current module, the method or variable is mounted as a property of the exports object can be exported, you can also directly assign the method or variable to module.exports export
    "' JavaScript
    Mount mode export methods and variables
    Exports.fun1=function () {
    ...
    }
    var a = "";
    Exports.a=a;
    Direct assignment export, can not directly assign value to exports!!!
    function fun2 () {
    }
    module.exports=fun2;

2. - _filename：当前模块的文件名
4. - _dirname：当前模块所在目录名
6. -模块标识格式
8. 1符合小驼峰命名的字符串||以.、..开头的相对路径||绝对路径
10. 2可以没有文件名后缀
12. -模块类型
14. -.js
16. -.node
18. -.json
20. -包结构
22. -package.json；json格式文件，包描述文件
24. - bin：目录，存放可执行二进制文件
26. - lib：目录，存放Javascript代码
28. - doc：目录，存放文档
30. - test：目录：存放测试用例
34. ### AMD/require.js实现
36. [AMD文档](https://github.com/amdjs/amdjs-api/wiki/AMD "AMD文档")
38. -模块定义，使用require.js提供的全局函数define定义模块，define()接受三个参数
40. ```javascript
42. define(id?,dependences?,factory);

• ID, optional,
• Dependences, optional, string array (can have only one element), all modules dependent on the current module
• Factory, must, function, provides a separate scope for defining the methods and variables provided by the module, and when the current module has a dependent module, the dependent module is passed in as a factory parameter

2. define(function(){
4. var exports ={};//需要定义模块入口变量
6. exports.fun1=function(){
8. ...
10. }
12. return exports;//需要将模块入口作为返回值
14. });
16. define([‘myLib‘],function(myLib){
18. function foo(){
20. myLib.doSomething();
22. }
24. return{
26. foo : foo
28. };
30. });

• module loading, loading modules in non-module code, using the global function provided by require.js require to load the module as a parameter of the callback function, require accepts two parameters
  • Modules, string array, module ID to be loaded, set load path for module identity if necessary
    "' JavaScript
    Set the load path, relative to the directory where the current module is located
    Require.config ({
    Paths: {
    "jquery": "Lib/jquery.min",
    "Underscore": "Lib/underscore.min",
    "Backbone": "Lib/backbone.min"
    }
    });
    Set the module to load the root directory
    Require.config ({
    BASEURL: "Js/lib",
    Paths: {
    "jquery": "Jquery.min",
    "Underscore": "Underscore.min",
    "Backbone": "Backbone.min"
    }
    });

2. - callback，回调函数，加载模块后执行，参数即为加载的模块对象
6. ### CMD/seajs实现
8. [CMD文档](https://github.com/cmdjs/specification/blob/master/draft/module.md "CMD文档")
10. -模块定义，使用sea.js提供的全局函数define定义模块，define()接受一个参数factory，factory有三种情况
12. -函数：模块构造函数，默认有三个参数，require，exports，module，以形参的形式将上下文提供的变量引入当前模块的作用域供调用，还可以自己定义其他参数
14. ```javascript
16. //变量和方法的挂载同commonJS，不能直接为exports赋值，因为exports是momule.exports的引用，改变exports的值不改变对象内容
18. define(function(require, exports, module) {
20. ...
22. });

• Object:
  "' JavaScript
  Define ({foo: "Bar"});

1. -字符串：可以用来定义字符串模板
2. ```javascript
3. define(‘I am a template. My name is {{name}}.‘);

• Module loading
  • Require (), synchronous loading, accepting module identities as unique parameters, loading modules as objects
  • Require.async (), asynchronous load, accept module ID and callback function, execute callback function after module load succeeds

Front-End Module

JavaScript does not compile the process, module loading is carried out during the execution of the code, the JavaScript module is a separate file, module loading means the need to read the file
The loading of the backend module (NODEJS) is synchronously loaded by default, because the loaded files are local, and the Nodejs provides a module caching mechanism, so synchronous loading has little impact on performance
The loading of the front-end modules requires a network request, which is much slower than loading local files, and can have a significant impact on the user experience if synchronous loading occurs and the module is loaded before UI initialization.
From CommonJS to Sea.js

JavaScript Module Specification: Commonjs,amd,cmd