SeaJS 学习

什么是系统

在生活和工作中，我们会接触到大量系统：自然界生态系统、计算机操作系统、软件办公系统，还有教育系统、金融系统、网络系统、理论系统等等。究竟什么是系统呢？

来看下维基百科的解释：

系统泛指由一群有关连的个体组成，根据预先编排好的规则工作，能完成个别元件不能单独完成的工作的群体。系统分为自然系统与人为系统两大类。

简言之，系统有两个基本特性：

  1. 系统由个体组成。
  2. 个体之间有关连，按照规则协同完成任务。

系统中的个体可称之为系统成员，这样，要构建一个系统，最基本层面需要做两件事：

  1. 定义系统成员：确定成员是什么。
  2. 约定系统通讯：确定成员之间如何交互，遵循的规则是什么。

只要把这两个问题描述清楚，我们就可以构建出系统。

模块系统

Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里，一切皆是模块，所有模块协同构建成模块系统。Sea.js 首要要解决的是模块系统的基本问题：

  1. 模块是什么？
  2. 模块之间如何交互？

在前端开发领域，一个模块，可以是JS 模块，也可以是 CSS 模块，或是 Template 等模块。在 Sea.js 里，我们专注于 JS 模块（其他类型的模块可以转换为 JS 模块）：

  1. 模块是一段 JavaScript 代码，具有统一的基本书写格式。
  2. 模块之间通过基本交互规则，能彼此引用，协同工作。

把上面两点中提及的基本书写格式和基本交互规则描述清楚，就能构建出一个模块系统。对书写格式和交互规则的详细描述，就是模块定义规范（Module Definition Specification）。

 

模块标识

模块标识是一个字符串，用来标识模块。在 require、 require.async 等加载函数中，第一个参数都是模块标识。define 函数的 dependencies 参数也是由模块标识组成。

SeaJS 中的模块标识是 CommonJS 模块标识 的超集:

  1. 一个模块标识由斜线（"/"）分隔的多项组成。
  2. 每一项必须是小驼峰字符串、"." 或 ".."。
  3. 模块标识可以不包含文件后缀名，比如 ".js"。
  4. 模块标识可以是“相对”或“顶级”标识。如果第一项是 "." 或 ".."，则该模块标识是相对标识。
  5. 顶级标识根据模块命名空间的根路径来解析。
  6. 相对标识相对 require 所在模块的标识来解析。

注意，符合上述规范的标识肯定是 SeaJS 的模块标识，但 SeaJS 能识别的模块标识不需要完全符合以上规范。 比如，除了大小写字母组成的小驼峰字符串，SeaJS 的模块标识字符串还可以包含下划线和连字符， 甚至可以以"http://"、"https://"、"file:///" 等协议标识开头。

相对标识

相对标识只出现在模块环境中，以 "." 开头。会相对当前模块的 URI 来解析：

// 在 http://example.com/js/a.js 中：
require('./b');
  // => http://example.com/js/b.js

 顶级标识

顶级标识不以点（"."）或斜线（"/"）开始， 会相对 SeaJS 的 base 路径来解析：

// 假设 base 路径是：http://example.com/js/libs/

// 在模块代码里：
require('jquery/1.7.1/jquery');
  // => http://example.com/js/libs/jquery/1.7.1/jquery.js

base 路径的默认值，与 sea.js 的路径相关： 如果 sea.js 的路径是： http://example.com/js/libs/sea.js 则 base 路径为： http://example.com/js/libs/

当 sea.js 路径中含有版本号时，base 不会包含 seajs/x.y.z 字串。 当类库模块有多个版本时，这样会更方便。

如果 sea.js 的路径是： http://example.com/libs/seajs/1.0.0/sea.js 则 base 路径是： http://example.com/libs/

当然，也可以手工配置 base 路径：

seajs.config({
  base: 'http://code.jquery.com/'
});

// 在模块代码里：
require('jquery');
  // => http://code.jquery.com/jquery.js

 

普通路径

除了相对和顶级标识之外的标识都是普通路径。普通路径的解析规则，和 HTML 代码中的 script.src 一样，会相对当前页面来解析。(以当前页面路径为基础，无论你设置了怎样的base路径)

// 在 http://example.com/js/main.js 中：
require('http://example.com/js/a');
  // => http://example.com/js/a.js

// 在 http://example.com/js/a.js 中：
require('/js/b');
  // => http://example.com/js/b.js

// 在任何代码里：
seajs.use('./c');
  // => http://example.com/path/to/page/c.js

 

seajs.use(ids, ...) 和 define(id, ...) 中的模块标识始终是普通路径，因为这两个方法是在全局环境中执行的。

文件后缀的提示

除非在路径中出现井号（"#"）或问号（"?"），SeaJS 在解析模块标识时， 都会自动添加 JS 扩展名（".js"）。如果不想自动添加扩展名，最简单的方法是， 在路径末尾加上井号（"#"）。

// ".js" 后缀可以省略：
require('http://example.com/js/a');
require('http://example.com/js/a.js');
  // => http://example.com/js/a.js

// ".css" 后缀不可省略：
require('http://example.com/css/a.css');
  // => http://example.com/css/a.css

// 当路径中有问号（"?"）时，不会自动添加后缀：
require('http://example.com/js/a.json?callback=define');
  // => http://example.com/js/a.json?callback=define

// 当路径以井号（"#"）结尾时，不会自动添加后缀，且会在解析时，去掉井号：
require('http://example.com/js/a.json#');
  // => http://example.com/js/a.json

 http://seajs.org/docs/#docs

posted @ 2015-07-16 16:19  在树上唱歌  阅读(219)  评论(0)  编辑  收藏  举报