1. Before contacting the specification, we use modularity to encapsulate the code mostly as Follows:
;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(window.模块名 || {}, 依赖项, 依赖项)
What is the function of a semicolon?
答:为了防止前面的代码没有添加分号造成语法解析错误,也可能会是 "!", "+" 等
Why put your code in a self-executing function
答:为了避免全局命名空间污染,核心就是利用函数的私有作用域
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
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
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
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
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 中的模块代码里
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){})
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.
- The
-
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.
- The
-
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
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 向外暴露接口对象 }) }
Category: JavaScript
Seajs of JS Modular specification cmd