快速上手seajs——简单易用Seajs

背景

什么是Seajs

1. Seajs是一个加载器 http://kb.cnblogs.com/page/211942/
2. 遵循 CMD 规范模块化开发，依赖的自动加载、配置的简洁清晰。

3. 兼容性

   • Chrome 3+
   • Firefox 2+
   • Safari 3.2+
   • Opera 10+
   • IE 5.5+

基本应用

导入Seajs库

1. 去官网下载最新的seajs文件， http://seajs.org/docs/#downloads
2. 在页尾引入seajs： 
   <script src="http://www.mamicode.com/site/script/sea.js"></script>

3. 然后在它下面写模块的配置和入口。

   // seajs 的简单配置seajs.config({  base: "../sea-modules/",  alias: {    "jquery": "jquery/jquery/1.10.1/jquery.js"  }});// 加载入口模块seajs.use("../static/hello/src/main");

配置和入口

这里解释下配置和入口的意思。

配置

通常在配置上修改seajs的路径和别名。

seajs的 路径是相对于前面引入的seajs文件的 。假如是这样的目录结构：

examples/  |-- index.html  |  `--about  |     |-- news.html  |  `-- script        |-- seajs.js        |-- jquery.js        `-- main.js

既然这么方便那在什么情况需要配置呢？一般情况是用不到的。但是假如你的路径特别深 或者要做路径映射的时候它的作用就来了。下面介绍下常用的几个配置。

seajs.config({	// Sea.js 的基础路径（修改这个就不是路径就不是相对于seajs文件了）	base: ‘http://example.com/path/to/base/‘,	// 别名配置（用变量表示文件，解决路径层级过深和实现路径映射）	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‘	}});

查看更多

入口

入口即加载，需要加载什么文件（模块加载器）就在这里引入。 sea.js 在下载完成后，会自动加载入口模块。

seajs.use("abc/main");  //导入seajs.js同级的abc文件夹下的main.js模块的（后缀名可略去不写）

加载单个依赖

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

加载多个依赖

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

这里回掉函数中的a和b参数是与前面的模块暴露出来的接口一一对应的。有时候也许只需要使用b的接口，但是也要把a参数写上。什么是暴露接口下面会解释。

模块开发

这里才是重点，其实也很简单就是一个书写规范（CMD）而已。

// 所有模块都通过 define 来定义define(function(require, exports, module) {  // 通过 require 引入依赖  var $ = require(‘jquery‘);  var Spinning = require(‘./spinning‘);  // 通过 exports 对外提供接口  exports.doSomething = ...  // 或者通过 module.exports 提供整个接口  module.exports = ...});

事实上define方法还有另外几个参数，一般情况我们用不到。具体看 官方API 。

小结

其实Seajs的基本使用就这么简单，日常使用足够了，之前看官网的 5分钟教程 楞是没看懂，后来想想真的是5分钟学会啊,悟性太低- -||

注意事项

1. 模块内的函数依赖必须交代清楚，防止模块在函数依赖加载前先加载出来。而且还增强了模块的独立性。
2. 引入seajs的时候最好给 <script> 标签加个id，可以快速访问到这个标签（我是在模块合并时用到它的）
3. 还有前面提到的使用 seajs.use() 在.html页面上写js时如果有多个模块依赖，需要使用暴露出来的接口就要让参数与它一一对应。