码迷,mamicode.com
首页 > Web开发 > 详细

SeaJS 学习

时间:2015-07-16 19:03:51      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

什么是系统

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

来看下维基百科的解释:

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

简言之,系统有两个基本特性:

  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

SeaJS 学习

标签:

原文地址:http://www.cnblogs.com/zhangcybb/p/4651640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!