1.Sea.Js是什么
seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器。示例
// File:greet.js define(function (require, exports) { function helloPython() { document.write("Hello,Python"); } function helloJavaScript() { document.write("Hello,JavaScript"); } exports.helloPython = helloPython; exports.helloJavaScript = helloJavaScript; }); // File:usegreet.js sea.use("greet", function (Greet) { greet.helloJavaScript(); });
2.Sea.Js使用指南
模块定义的三种方式
a.
define(function(require, exports, module) { // 模块代码 // 使用require获取依赖模块的接口 // 使用exports或者module来暴露该模块的对外接口 })
b.
define(function(require, exports) { var Vango = require('vango') exports.drawCircle = function () { var vango = new Vango(document.body, 100, 100) vango.circle(50, 50, 50, { fill: true, styles:{ fillStyle:"red" } }) } })
c.
define(function(require, exports, module) { var Vango = require('vango'); module.exports = { drawCircle: function () { var vango = new Vango(document.body, 100, 100); vango.circle(50, 50, 50, { fill: true, styles:{ fillStyle:"red" } }); } }; });
注意:必须保证参数的顺序,即需要用到require, exports不能省略;在模块中exports对象不可覆盖,如果需要覆盖请使用module.exports
的形式。
d.“具名模块”:Sea.js从用于生产的角度来说,必须支持具名模块,因为开发时模块拆得太小,生产环境必须把这些模块文件打包为一个文件,这时再use相应的模块时,需要通过ID来指向。针对此需求,Seajs基本约定原则:ID 和路径一致原则
define('drawCircle', ['vango'], function(require, exports) { var Vango = require('vango'); exports.drawCircle = function () { var vango = new Vango(document.body, 100, 100); vango.circle(50, 50, 50, { fill: true, styles:{ fillStyle:"red" } }); }; })
SeaJs环境配置:
Sea.js通过.config
API来进行配置。你甚至可以在多个地方调用seajs.config来配置,配置多个之后,相关属性合并起来
base:String,在解析绝对路径标识的模块时所使用的base路径,使用base配置,根本上可以分离静态文件的位置,比如使用CDN(如何把静态文件分布到CDN上?)
paths:Object,如果目录太深,可以使用paths这个配置项来缩写,可以在require时少写些代码。
alias:Object,本质上看不出和paths有什么区别,区别就在使用的概念上。
preload:
配置项可以让你在加载普通模块之前提前加载一些模块
模块的使用:
a. seajs.use(id)
seajs.use('./main')
b.seajs.use(ids, callbacks)
seajs.use('./main', function(main) { main.init() })
Sea.js执行ids中的所有模块,然后传递给callback使用。
SeaJs的Plugin
- seajs-text:用来加载HTML或者模板文件;
- seajs-style:提供了
importStyle
,动态地向页面中插入css; - seajs-combo:该插件提供了依赖combo的功能,能把多个依赖的模块uri combo,减少HTTP请求;
- seajs-flush:该插件是对seajs-combo的补充,或者是大杀器,可以先hold住前面的模块请求,最后将请求的模块combo成一个url,一次加载hold住的模块;
- seajs-debug:Fiddler用过么?这个插件基本就是提供了这样一种功能,可以通过修改config,将线上文件proxy到本地服务器,便于线上开发调试和排错;
- seajs-log:提供一个seajs.log API,私觉得比较鸡肋;
- seajs-health:目标功能是,分析当前网页的模块健康情况。
Plugin的运行机制:
- 使用Sea.js在加载过程中的事件,注入一些插件代码,修改Sea.js的运行流程,实现插件的功能;
- 给seajs加入一些方法,提供一些额外的功能。
模块打包:SPM