Seajs of JS Modular specification cmd

1. Before contacting the specification, we use modularity to encapsulate the code mostly as follows:

 ;(function (形参模块名, 依赖项, 依赖项) {  // 通过 形参模块名 修改模块  window.模块名 = 形参模块名 })(window.模块名 || {}, 依赖项, 依赖项)

1. What is the function of a semicolon?

   答：为了防止前面的代码没有添加分号造成语法解析错误，也可能会是 "!"， "+" 等

2. Why put your code in a self-executing function

   答：为了避免全局命名空间污染，核心就是利用函数的私有作用域

3. Why are dependencies passed in as parameters

   答：为了减少作用域查找机制

2. Common JavaScript modularity specifications

Specification is actually the set of rules that these libraries gradually form in the process of promotion.

The so-called norm is:

定义了模块的书写格式以及模块之间的交互规则

Node Environment

 CommonJS

Browser environment

AMD    RequireJSCMD Common Module Definition    CMD 就是 SeaJS 这个模块加载器在推广的过程中定义的一个模块规范ECMAScript    ECMAScript 6

CMD, AMD, and CommonJS are community-developed module specifications that are designed to address the problem of JavaScript without a modular system. They all have rules on how to define module members and how to communicate interactions among module members.

1.SeaJS Basic Introduction

1. In Seajs, a JS script file is a module

   The module has two properties:

   1. 模块要有一个私有作用域：避免全局命名空间污染2. 模块可以向外导出内部成员，供别的模块加载和使用

   So: As long as the use of SEAJS, all the JS files through the Define function to define the module, and all the module code written to the define defined callback function

   Three fixed arguments are passed in the callback function of the Define method respectively:

   1. require：2. exports3. module

2. Each module has a require function that can be used to load the specified module, which requires receiving a module path

   1. 加载指定模块并且执行该模块中的代码2. 得到该模块中的暴露的接口对象：module.exports

3. Scope and export of modules

   A module is inherently a private scope, and all members defined within that module

   If members inside the module want to be accessed externally:

   Must be exposed by using the Module.exports (exports) object

   When the Require function loads the module, it automatically gets the Module.exports object inside the module.

2.SeaJS Detailed introduction 1. Use

index.html    <script src="./js/sea.js"></script>    <script>      seajs.use(‘./js/main‘);    </script>main.js    define(function (require, exports, module) {      var moduleA = require(‘add.js‘)      console.log(moduleA.add(10,20))    })add.js    define(function (require, exports, module) {      //隐性:var exports = module.exports        function add(a, b){        return +a + +b;      }      module.exports.add = add;      //隐性:return module.exports      })exports 和 module.exports 的区别：以下事例只能用module.exports    define(function (require, exports, module) {      //隐性:var exports = module.exports        module.exports= function(){      }      //隐性:return module.exports      })

2. Configuration (put more in the portal file)

    seajs.config({      // 别名配置      alias: {        ‘es5-safe‘: ‘gallery/es5-safe/0.9.3/es5-safe‘,        ‘json‘: ‘gallery/json/1.0.2/json‘,        ‘jquery‘: ‘jquery/jquery/1.10.1/jquery‘      },      // 路径配置      paths: {        ‘gallery‘: ‘https://a.alipayobjects.com/gallery‘      },      // Sea.js 的基础路径      base: ‘http://example.com/path/to/base/‘,    });

3. API explanation

2. Seajs.use

   Load the module and start the module system.

       加载一个模块 seajs.use(‘id‘)    加载一个模块，在加载完成时，执行回调 seajs.use(‘id‘, callback)    加载多个模块，加载完成时，执行回调 seajs.use([‘id1‘,‘id2‘,...],callback)**注意**：    在调用 seajs.use 之前，需要先引入 sea.js 文件    seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行，需要使用 jquery 等类库来保证    seajs.use 理论上只用于加载启动，不应该出现在 define 中的模块代码里

4. Define (Factory)

   Define is a global function used to define a module.

       define 接受 factory 参数，factory 可以是一个函数，也可以是一个对象或字符串。    factory 为对象、字符串时，表示模块的接口就是该对象、字符串。    factory 是一个对象时    define({})    factory 是一个字符串时    define(‘hello‘)    factory 是一个函数时    define(function(require, exports, module){})

6. Require

   Require is used to load a JS file module, require is used to get the interface object Module.exports of the specified module.

       require 在加载和执行的时候，js 会按照同步的方式和执行。

   Use Note:

   正确拼写    模块 factory 构造方法的第一个参数 必须 命名为 require不要修改    不要重命名 require 函数，或在任何作用域中给 require 重新赋值使用字符串直接量    require 的参数值 必须 是字符串直接量

   Tips: Just think of require as a grammatical keyword.

7. The

8. Module identity

   Module identity is a string that identifies the module. The

     module ID may not contain the file suffix name, for example. JSSEAJS recommended No. js file module suffix module identifier can be relative or top-level identity  

   Relative identity

     relative identity with. Start , which is resolved forever relative to the path that the current module is in.  

   Top-level identity

     the top-level identity does not start with. or/, relative to the base path of the module system (the base path, the default is the path to which the Sea.js file belongs). You can configure the base path manually. Seajs.config ({base: './js '})  

   Normal path

   Except the relative and top-level identities are normal paths. Parsing rules for normal paths are parsed relative to the current page.

    //Assuming the current page is http://example.com/path/to/page/index.html//absolute path is normal path: require.resolve (' http://cdn.com/ js/a ');//= http://cdn.com/js/a.js//root path is normal path: require.resolve ('/js/b ');//= = http://example.com/js/b.js//Use  The relative path in is always the normal path: Seajs.use ('./C '); = = Load is Http://example.com/path/to/page/c.jsseajs.use ('..  /d '); = = Loads the http://example.com/path/to/d.js  

   Tips:

   The top-level identity is always resolved relative to the base base path.

     If not set, the base path defaults to the path that the Sea.js library file belongs to, and the absolute path and root path of the underlying path can be configured through Seajs.config ({base: ' Base path '}) always relative to the current page resolution. Relative identities are always resolved relative to the current page relative to the current file seajs.use. 

9. The

10. Module

    Module is an object that stores some properties and methods associated with the current module. The unique identity of the

      module.id module, which can be specified by the first parameter of the Define method, The default is the absolute path to the module file Module.uri the absolute path of the module module.dependenciesdependencies is an array, Represents the current module's dependency module.exports The current module provides an interface object to the outside of each module, which ultimately executes the same sentence: return module.exports  

    Communication interface between module and module

12. Exports

    Exports is only a reference to Module.exports. In other words, modifying the exports is equivalent to modifying the module.exports.

    But once the exports is re-assigned within factory, it does not change the value of Module.exports. Therefore, assigning a value to exports is not valid.

    The difference between exports and module.exports:

    每个模块内部对外到处的接口对象始终都是 module.exports可以通过修改 module.exports 或给它赋值改变模块接口对象exports 是 module.exports 的一个引用，就好比在每一个模块定义最开始的地方写了这么一句代码：var exports = module.exports关于这俩哥们儿的区别请分析一下代码：var module = {  exports: {}}function changeExports (exports, module) {  // var exports = module.exports     exports.foo = ‘bar‘     // 这里赋值拿不到，不要使用使用     // exports = function () {}     return module.exports}changeExports(module.exports, module)

    Then why do we have exports?

    为了开发体验，API更友好，使用 exports 的时候，可以少写一个点儿。

    If you really don't know the difference between exports and module.exports, just remember Module.exports.

4. How to transform a common module file into a module compatible with the CMD specification

    if (typeof define === "function" && define.cmd) {         // 有 Sea.js 等 CMD 模块加载器存在         define(function (require, exports, module) {           // 使用 module.exports 向外暴露接口对象      })    }

JS Modular specification cmd Seajs