- 下载requireJs(不要点download 点击版本号后的Minified按钮，否则不起作用)
http://requirejs.org/docs/download.html
下载.jpg
- 说明：RequireJS 使用的是 AMD 模块开发
AMD示例
// 定义时导入需要的类库名（paths的别名）
define(['jquery'], function ($) {
var var3info = {
name: 'var3info name',
add() {
$('#btn').click(function () {
console.log('add');
})
},
}
var var3info2 = {
name: 'var3info2 name',
add() {
$('#btn').click(function () {
console.log('add');
})
},
}
return {
var3info,
var3info2
}
})
- html模版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="js/lib/require.js" data-main="js/script/main"></script>
</head>
<body>
<div>
<div>
jquery区域
</div>
<div id="text">
默认text
</div>
<button id="btn">
点我
</button>
</div>
</body>
</html>
- 主配置文件 main.js
require.config({
// 加载js的目录 paths中以此目录为标准获取
baseUrl: 'js',
// 类库别名和路径映射
paths: {
jquery: 'lib/jquery-3.7.1',
var2: 'script/var2',
var3: 'script/var3',
},
// 依赖以及导出设置，key值需对应paths中的别名，用于非AMD标准的类库进行导出
shim: {
// 非AMD标准模块 可以指定要导出的变量，如果不指定导出，则可以通过全局变量获取
'var2': {
// 依赖
deps: ['jquery'],
// 导出变量
exports: 'var2info2',
},
},
// 插件以及其他模块配置
map: {
'*': {
// 加载css的插件
'css': 'lib/require-css'
},
},
});
// 非标准AMD
require(['var2'], function (var2info2) {
// 获取导出的var2info2
console.log(var2info2);
// 其实var2的变量是全局性的，也可以直接获取var2中的所有变量
console.log(var2info);
console.log(var2info2);
})
// 标准AMD 只能用对应变量获取
require(['var3'], function (var3) {
// 使用var3来接收导出的var3
console.log(var3);
})
- var2模块 非标准AMD模块
// 此模块需要jQuery 因此需要在配置shim中配置依赖
var var2info = {
name: 'var2info name',
add() {
$('#btn').click(function () {
console.log('add');
})
},
}
var var2info2 = {
name: 'var2info2 name',
add() {
$('#btn').click(function () {
console.log('add2');
})
},
}
- var3模块 标准AMD模块
// 定义时导入需要的类库名（paths的别名）
define(['jquery'], function ($) {
var var3info = {
name: 'var3info name',
add() {
$('#btn').click(function () {
console.log('add');
})
},
}
var var3info2 = {
name: 'var3info2 name',
add() {
$('#btn').click(function () {
console.log('add');
})
},
}
return {
var3info,
var3info2
}
})
