下载
命令行下载：
bower install requirejs
或者
npm install requirejs
官网下载点击下载requirejs
主要方法
-
define
-
require
案例一
目录结构
- index.html
- main.js
- scripts
- apple.js
- student.js
index.html部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模块化编程</title></head>
<body>
<h3>requirejs模块化编程</h3>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
main.js部分
//配置依赖路径
requirejs.config({
baseUrl: './scripts'
});
//依赖student模块，并调用该模块eat()方法
require(['student'], function (stu) {
stu.eat()
});
apple.js部分
//apple为当前模块名
define('apple', function () {
return {
name: 'apple fruits'
}
});
student.js部分
//apple为依赖模块名
//student为当前模块名
define('student', ['apple'], function (apple) {
return {
eat: function () {
console.log(apple.name);
}
}
});
特点：
- 模块名必须与文件名相同
- 其实模块名可以不写的
案例二
目录结构
- index.html
- main.js
- scripts/
- appleModule.js
- studentModule.js
- bower_components/jquery/dist/
- jquery.min.js
index.html部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模块化编程</title></head>
<body>
<h3>requirejs模块化编程</h3>
<div id="box">Lorem ipsum dolor sit amet.</div>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
main.js部分
//配置项，在主入口js文件配置即可，其他模块都可调用paths模块
requirejs.config({
//所有的require依赖根路径都是baseUrl
baseUrl: './scripts',
//路径可以是数组，如果第一个加载成功则结束，否则加载后面的文件
paths:{
'jquery': [
'../bower_components/jquery/dist/jquery.min', //本地加载jquery
'http://code.jquery.com/jquery-1.12.4' //cdn加载jquery
],
'student': 'studentModule',
'apple': 'appleModule'
}
});
//依赖config配置项命名的student模块
require(['student'], function (stu) {
//调用student模块的eat()和say()方法
stu.eat();
stu.say();
});
studentModule.js部分
//注意，这里并没有给模块命名，所以主入口可以随便定义模块名
//依赖jquery和apple模块
define(['jquery', 'apple'], function ($, apple) {
const student = {};
student.name = 'zhangsan';
student.eat = function () {
console.log(this.name + ' like ' + apple.name);
};
student.say = function () {
var str = 'I eat '
+ apple.num + apple.unit + ' ' + apple.name
+ ', and pay ' + apple.total().toFixed() + 'RMB everyday.';
$('#box').text(str);
};
//总之，返回一个对象就行
return student;
});
appleModule.js部分
//注意，这里并没有给模块命名，所以主入口可以随便定义模块名
define(function () {
const apple = {};
apple.name = 'apple';
apple.num = ;
apple.price = ;
apple.unit = 'kg';
apple.total = function () {
return this.num * this.price
};
//总之，返回一个对象就行
return apple;
});
重点内容
- 不需要定义模块名，同时还可以通过配置项自定义模块名
- 因为没有模块名，文件名也不受约束
- 一次配置，多处依赖
![App客户端架构演化之路[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)