随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs、AMD、CMD等一系列规范,使前端发开趋向模块化、规范化。
CMD模块化的代表之一就是国内开发的seaJs,它有很多优点:
- 遵从CMD规范,代码模块化
- 中文文档通俗易懂,入门上手简单
- 兼容性好、配置简洁明了、提供插件接口
seajs模块化基本流程:
- 引入sea.js库
define
定义模块exports
暴露模块require
导入模块
安装
npm
安装npm i seajs
bower
安装bower i seajs
- 官网下载:http://seajs.org/docs/#downloads
定义模块
main.js
123456789101112define(function(require,exports,module){// 引用test.js//require('./test.js')/** 如果地址是一个模块,那么require的返回值就是模块中的exports*/function (){alert(require('./test.js').num);};// 向外暴露模块接口exports.alert = alert;})1) exports : 对外的接口
2) require : 依赖的接口test.js
1234define(function(require,exports,module){var num = 10;exports.num = num;});
调用模块
html页面中引入seajs和使用use方法请求入口文件
12345678910111213141516171819202122232425262728大专栏 seaJs模块化开发简单入门iv class="line"><html> <head><meta charset="UTF-8"><title>seaJs</title></head><body><script src="sea.js"></script><script>/** seajs.use方法:* 页面去调用模块,* 第一个参数:模块的地址* 第二个参数:地址加载成功后的回调函数* seajs的默认目录:sea.js所在的目录* */seajs.use('./js/main.js',function(exports){// 回调的参数,就是模块中的exportsexports.alert();});// 加载多个文件/*seajs.use(['./main.js','./main2.js'],function(ex1,ex2){操作})*/</script></body></html>加载多个入口文件
12345seajs.use(['./main.js','./main2.js'],function(ex1,ex2){// 模块加载完成时执行回调操作ex1.fn(); // 调用ex1的方法ex2.fn(); // 调用ex2的方法})
有些js文件可能是在某些事件触发后才会被加载使用,因此没有必要在页面刚访问时,就加在所有资源文件,这样也可以减少客户端与服务器端的请求时间,提高用户体验。
- seaja对于此便提供了一个
async
异步请求的方法:123require.async('./test2.js',function(ex){ // 异步请求ex.fn();})
如有不当,请参考官网文档
seajs的具体config
配置见:https://github.com/seajs/seajs/issues/262参考文档: