seajs模块化加载框架使用
seajs是模块化加载框架。seajs.org已经打不开了,seajs的github。seajs速查文档
<!--如果完成下面4步,则seajs掌握了80%
js模块化
1.引入seajs的库 :<script type="text/javascript" src="sea/sea.js"></script>
2.如何变成模块
define:一个文件就是一个模块。如下utils文件
define(function(require, exports) {
exports.each = function (arr) {
// 实现代码
};
exports.log = function (str) {
// 实现代码
};
});
3.如何调用模块 exports seajs.use
用来在页面中加载一个或多个模块。seajs.use(id, callback?)
4.如何依赖模块 requie
通过 require('./util.js')
就可以拿到 util.js 中通过 exports
暴露的接口。
require执行完的结果就是exports
。
-->
html文件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> <meta name="format-detection" content="telphone=no, email=no"/> <meta name="apple-touch-fullscreen" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>image-size</title> <style type="text/css"> *{margin: 0;padding: 0;} </style> <script type="text/javascript" src="sea/sea.js"></script> <script language="javascript"> //加载入口文件main.js,默认后缀js自动匹配 //seajs.use(模块地址,函数) // sea的默认根目录:sea.js这个文件所在的文件 //以当前页面为根目录写法:./目录 seajs.use('./sea/main',function(main){ console.log(main.say()); }); </script> </head> <body> </body> </html>
与html并列的sea文件夹里,放有sea.js,main.js,main1.js,main2.js
main.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
define(function(require,exports,module){ console.log('module of main:'); var main1 = require('main1'); main1.say(); var main2 = require('main2'); //require引用模块 main2.say(); return { say: function(){ console.log('main--hello'); } }; });
main1.js:
define(function(require,exports,module){ console.log('module of main1:'); //exports 对外提供接口的对象 module.exports = { say: function(){ console.log('main1--hello'); } }; });
main2.js:
define(function(require,exports,module){ console.log('module of main2:'); return { say: function(){ console.log('main2--hello'); } }; });
输出结果:
module of main: module of main1: main1--hello module of main2: main2--hello main--hello undefined