seajs官方文档的学习笔记（一）

seajs API 快速参考 --> https://github.com/seajs/seajs/issues/266

 

 

########### 模块 https://github.com/seajs/seajs/issues/240 #####################

sea.js 专一于前端开发领域里的 JS 模块：  

1. 模块是一段 JavaScript 代码，具备统一的基本书写格式。  

2. 模块之间经过基本交互规则，能彼此引用，协同工做。

 

模块定义规范（Module Definition Specification）：对[基本书写格式]与[基本交互规则]的清楚描述。

有CommonJS 社区的 Modules 1.1.1 规范、NodeJS 的 Modules 规范、RequireJS 提出的 AMD 规范等等。

 

sea.js 遵循的是 CMD 规范

########## CMD模块定义规范 https://github.com/seajs/seajs/issues/242 ############

CMD（common Module Definition）。该规范明确了模块的[基本书写格式]和[基本交互规则]。

 

CMD 规范中，一个模块就是一个文件。

 

define(factory)

define：是[全局函数]，用来定义一个模块

factory：函数、对象或者字符串 

define({'foo', 'bar'}); 
define('I am a template, My name is {{name}}');

 

↓

factory为函数时，表示[模块的构造方法]，能够获得模块向外提供的接口。 factory 方法在执行时，默认会传入三个参数：require、exports 和 module. 

define(id?, deps?, factory)

字符串 id 表示模块标识，数组 deps 是模块依赖

define('hello', ['jquery'], function(require, exports, module) {  
　　// 模块代码
})；

 

define.cmd

一个空对象，可用来断定当前页面是否有 CMD 模块加载器

if (typeof define === 'function' && define.cmd)  {
　　 // 有 sea.js 等 CMD 模块加载器存在
}

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

require(id)

require 是一个方法，接受[模块标识]做为[惟一参数](参数值必须是字符串直接量。)，用来获取模块提供的接口

define(function(require, exports) {

　　 // 获取模块 a 的接口
　　 var a = require('./a');  
　　 // 调用模块 a 的方法  
　　 a.doSomething();

});

 

require.async(id, callback?)

require.async 用来在模块内部[异步加载]模块，在加载完成后执行回调（ callback 可选）。 require(id) 是同步往下执行

define(function(require, exports) {  

　　// 异步加载一个模块，在加载完成时，执行回调  
　　require.async('./b', function(b) {    
　　　　b.doSomething();  
　　});    

　　// 异步加载多个模块，在加载完成时，执行回调  
　　require.async(['./c', './d'], function(c, d) { 
　　　　// 这 function 里的参数要与前面加载模块的顺序一一对应    
　　　　c.doSomething();    
　　　　d.doSomething();  
　　});

});

 

require.resolve(id)

该函数[不会加载函数]，只[返回]解析后的[模块绝对路径]。（使用模块系统内部的路径解析机制）

define(function(require, exports) {

　　console.log(require.resolve('./b'));  
　　// ==> http://localhost/seajsS/quick-start/static/hello/src/b.js

});

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

exports

是一个对象，用来向外提供模块接口

define(function(require, exports) { 

　　 // 对外提供 foo 属性  
　　exports.foo = 'bar';    
　　// 对外提供 doSomething 方法  
　　exports.doSomething = function() {}; 

});

 

 

替代exports

使用 return 直接向外提供接口

define(function(require)  {  

　　// 经过 return 直接提供接口  
　　return {   
　　　　foo: 'bar',   doSomething: function() {}  
　　}; 

});

 

 

或者是

define(function(require, exports, module) {  

　　// 正确写法  
　　module.exports = {   
　　　　foo: 'bar',   doSomething: function() {}  
　　};    

　　// 错误写法  
　　// 解释：exports 仅仅是 module.exports 的一个引用，给 exports 从新赋值时，并不会改变 module.exports 的值，OK？  
　　exports =  {   
　　　　foo: 'bar',   doSomething: function() {}  
　　}; 

});

 

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

module

是一个对象，存储了与当前模块相关联的一些属性和方法

 

module.id

模块的惟一标识。define 的第一个参数就是模块标识

define('module_id', [], function(require, exports, module) { 
　　 // 模块代码 
});

 

module.uri

返回模块的绝对路径（根据模块系统的路径解析规则）。

define(function(require, exports, module) {    

　　console.log(module.uri);  
　　// ==> http://localhost/seajsS/quick-start/static/hello/src/main.js 

});  

没有在 define 中手写 id 参数时，module.id 的值就是 module.uri，二者彻底相同

注意：而require.resolve(id) 是使用模块系统内部的路径解析机制的

 

module.dependencies Array

表示当前模块的依赖

 

module.exports Object

当前模块对外提供的接口

 

传给 factory 构造方法的 exports 参数是 module.exports 对象的一个引用。只经过 exports 参数来提供接口，有时没法知足开发者的全部需求。 好比当[模块的接口是某个类的实例]时，须要经过 module.exports 来实现

 

define(function(require, exports, module) {    

　　// exports 是 module.exports 的一个引用  
　　console.log(module.exports === exports);  // true    
　　// 从新给 module.exports 赋值（模块的接口是某个类的实例）  
　　module.exports = new SomeClass();        
　　// exports 再也不等于 module.exports  
　　console.log(module.exports === exports);  // false   

});

 

这就是 CMD 模块定义规范的全部内容。常常使用的 API 只有 define, require, require.async, exports, module.exports 这五个。其余 API 有个印象就好，在须要时再来查文档，不用刻意去记。

 

################# 模块标识 https://github.com/seajs/seajs/issues/258 ####################

 

################# require的书写约定 https://github.com/seajs/seajs/issues/259 ############
require 的参数值 必须 是字符串直接量

 

################# 模块的加载启动 https://github.com/seajs/seajs/issues/260 ###############
seajs 启动模块

<script src="path/to/sea.js"></script>
<script>
　　seajs.use('./main');
</script>

　　

seajs.use(id, callback?) | Function |
在页面中加载任意模块

// 加载模块 main，并在加载完成时，执行指定回调
seajs.use('./main', function(main) {
　　main.init();
});

// 并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调
seajs.use(['./a', './b'], function(a, b) {
　　a.init();
　　b.init();
});

　

与 DOM ready
没有任何关系。若是某些操做要确保在 DOM ready 后执行，须要使用 jquery 等类库来保证

seajs.use(['jquery', './main'], function($, main) {
　　$(document).ready(function() {
　　　　main.init();
　　});
});

 

最佳实践

1. seajs.use 理论上只用于加载启动，不该该出如今 define 中的模块代码里。在模块代码里须要异步加载其余模块时，推荐使用 require.async 方法。
2. 引入 sea.js 时，能够把 sea.js 与其余文件打包在一块儿，可提早合并好，或利用 combo 服务动态合并。不管哪种方式，为了让 sea.js 内部能快速获取到自身路径，推荐手动加上 id 属性：<script src="path/to/sea.js" id="seajsnode"></script>

加上 seajsnode 值，可让 sea.js 直接获取到自身路径，而不须要经过其余机制去自动获取。这对性能和稳定性会有必定提高，推荐默认都加上。

 

################# 配置 https://github.com/seajs/seajs/issues/262 ###############

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'
},

// 变量配置
vars: {
    'locale': 'zh-cn'
},

// 映射配置
map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
],

// 预加载项
preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
],

// 调试模式
debug: true,

// Sea.js 的基础路径
base: 'http://example.com/path/to/base/',

// 文件编码
charset: 'utf-8'
});