seaJs模块化开发简单入门
随着前端技术的日益成熟，功能越来越丰富强大，规范也越来越健全，在这样的背景环境下很快便有了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
123456789101112
define(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
1234
define(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){ // 回调的参数，就是模块中的exports exports.alert(); }); // 加载多个文件 /* seajs.use(['./main.js','./main2.js'],function(ex1,ex2){ 操作 })*/ </script> </body> </html>加载多个入口文件
12345
seajs.use(['./main.js','./main2.js'],function(ex1,ex2){ // 模块加载完成时执行回调操作 ex1.fn(); // 调用ex1的方法 ex2.fn(); // 调用ex2的方法 })
有些js文件可能是在某些事件触发后才会被加载使用，因此没有必要在页面刚访问时，就加在所有资源文件，这样也可以减少客户端与服务器端的请求时间，提高用户体验。
- seaja对于此便提供了一个
async异步请求的方法：123
require.async('./test2.js',function(ex){ // 异步请求 ex.fn();})
如有不当，请参考官网文档
seajs的具体config配置见：https://github.com/seajs/seajs/issues/262参考文档：
相关推荐
binglingnew 2020-02-09
binglingnew 2012-10-03
binglingnew 2019-12-03
earthhour 2019-06-30
yo跟着新宇走 2020-01-03
Gary的影响力 2014-01-23
GhostStories 2019-10-28
weimasoft 2014-06-30
wuzlun 2016-11-27
人生百态 2017-09-26
binglingnew 2019-06-06
sean0 2019-04-02
yuanyuangugu 2019-07-01
binglingnew 2016-02-16
人生百态 2019-06-28
NSStringlin 2017-09-26