Sea.js 提供简单、极致的模块化开发体验
参考:http://seajs.org/docs/#intro
为什么使用 Sea.js ?
Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。
兼容性
Sea.js 具备完善的测试用例,兼容所有主流浏览器:
Chrome 3+ ✔ Firefox 2+ ✔ Safari 3.2+ ✔ Opera 10+ ✔ IE 5.5+ ✔
Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。
引用文献:
前端模块化开发的价值
一步步学会使用SeaJS 2.0
seajs.config
用来对 Sea.js 进行配置。
seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https://a.alipayobjects.com/arale', 'jquery': 'https://a.alipayobjects.com/jquery' }, // 设置别名,方便调用 alias: { 'class': 'arale/class/1.0.0/class', 'jquery': 'jquery/jquery/1.10.1/jquery' } });
更多配置项请参考:#262
seajs.use
用来在页面中加载一个或多个模块。
// 加载一个模块 seajs.use('./a'); // 加载一个模块,在加载完成时,执行回调 seajs.use('./a', function(a) { a.doSomething(); }); // 加载多个模块,在加载完成时,执行回调 seajs.use(['./a', './b'], function(a, b) { a.doSomething(); b.doSomething(); });
更多用法请参考:#260
define
用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:
define(function(require, exports, module) { // 模块代码 });
也可以手动指定模块 id 和依赖,详情请参考:#242require
, exports
和 module
三个参数可酌情省略,具体用法如下。
require
require
用来获取指定模块的接口。
define(function(require) { // 获取模块 a 的接口 var a = require('./a'); // 调用模块 a 的方法 a.doSomething(); });
注意,require
只接受字符串直接量作为参数,详细约定请阅读:#259
require.async
用来在模块内部异步加载一个或多个模块。
define(function(require) { // 异步加载一个模块,在加载完成时,执行回调 require.async('./b', function(b) { b.doSomething(); }); // 异步加载多个模块,在加载完成时,执行回调 require.async(['./c', './d'], function(c, d) { c.doSomething(); d.doSomething(); }); });
详细说明请参考:#242
exports
用来在模块内部对外提供接口。
define(function(require, exports) { // 对外提供 foo 属性 exports.foo = 'bar'; // 对外提供 doSomething 方法 exports.doSomething = function() {}; });
详细说明请参考:#242
module.exports
与 exports
类似,用来在模块内部对外提供接口。
module.exports
与 exports
的区别,以及详细说明请参考:#242
CMD 模块定义规范
模块标识
require 书写约定
模块的加载启动
配置
标准构建
插件
加载模板字符串
加载 Handlebars 模板并进行预编译
加载 JSON 数据
seajs.importStyle(cssText, id?)
减少 HTTP 请求数是性能优化中非常重要的一条准则。使用 combo 插件,配合服务器的 nginx-http-concat服务(安装指南),可自动对同一批次的多个模块进行合并下载。
通过 combo 插件,我们可以对同一数组中的加载项进行合并加载。通过 flush 插件,我们可以更进一步减少 HTTP 请求数。
调试插件
加载 seajs-log 插件后,seajs 会拥有 log 方法。
通过 health 插件,可以分析当前页面模块的健康情况。
多版本共存
seajs.cache Object
通过 seajs.cache
,可以查阅当前模块系统中的所有模块信息
seajs.reslove Function
类似 require.resolve
,会利用模块系统的内部机制对传入的字符串参数进行路径解析。
seajs.require Function
全局的 require
方法,可用来直接获取模块接口
seajs.data Object
通过 seajs.data
,可以查看 seajs
所有配置以及一些内部变量的值,可用于插件开发。当加载遇到问题时,也可用于调试。
seajs.log Function
由 seajs-log 插件提供
使用 seajs.use
或 require
进行引用的文件,如果是具名模块(即定义了 ID 的模块),会把 ID 和 seajs.use
的路径名进行匹配,如果一致,则正确执行模块返回结果。反之,则返回 null
。
改造现有文件为 CMD 模块
插件开发指南
Sea.js 通过事件提供可扩展接口。要给 Sea.js 开发插件,需要了解 Sea.js 内部所提供的事件类型。