RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD (通用模块定义)规范”。github地址
注意:window.onload事件不可用,用了会报错。
一、为什么要使用模块化?
**1. **不用模块化之前:需要手动去引入js,并且引入顺序不对会出错(因为依赖关系)
**2. **不用模块化之后:
a. 解决文件之间依赖
b. 自动引入js
c. 也可以解决命名冲突
二、如何使用RequireJS?
1. 在html中引入RequireJS
在HTML中,添加这样的 <script> 标签:
<script type="text/javascript" src="require.min.js" data-main="xxx"></script>
1. 通常使用requirejs的话,我们只需要导入requirejs文件即可,不需要显式导入其它的js库,因为这个工作会交给requirejs来做。
**2. **属性 data-main 是告诉requirejs:你下载完以后,马上去载入真正的入口文件。它一般用来对requirejs进行配置,并且载入真正的程序模块。
2. 在config.js中配置requirejs
1). config.js 中通常用来做两件事:
2). 配置requirejs 比如项目中用到哪些模块,文件路径是什么
载入程序主模块
requirejs.config({
baseUrl: './',
paths: {
main: 'main'
}
});
require(['main',function(mod){
mod.test1();
mod.test2();
}]);
3. 定义相关模块文件
**1). ** function.js文件,写一个生成随机数的函数。
define(function(){
return {
rnd:function (m,n) {
return parseInt(Math.random()*(m-n)+m);
}
}
});
**2). **str.js 返回一个字符串。
define(function(){
return '我是一个简单的字符串';
});
4. 定义main.js文件
首先引入所需要的模块,然后调用。
define(function(require){
var fns = require('function');
var str = require('str');
return {
test1:alert(str),
test2:console.log(fns.rnd(1,100))
};
});
效果:弹窗弹出字符串,控制台(f12)输出一个随机数。