What is RequireJs
RequireJs is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
IE 6+ ………. compatible ✔Wha
Firefox 2+ ….. compatible ✔
Safari 3.2+ …. compatible ✔
Chrome 3+ …… compatible ✔
Opera 10+ …… compatible ✔
Get started then check out the API.
引入RequireJs 有哪些好处
防止js加载阻塞页面渲染
什么是js加载阻塞?
index.html:
1
2
3
4
5
6
7
8
9
<html>
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<span>body</span>
</body>
</html>a.js:
1
2
3
4
5function fun1(){
alert("it works");
}
fun1();当运行上面两种例子时不知道你是否注意到,alert执行的时候,HTML内容是一片空白的,即body并未被显示,当点击确定后,才出现,这就是JS阻塞浏览器渲染导致的结果。
使用程序调用的方式加载js,防出现如下丑陋的场景
<script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> <script type="text/javascript" src="e.js"></script> <script type="text/javascript" src="f.js"></script> <script type="text/javascript" src="g.js"></script> <script type="text/javascript" src="h.js"></script> <script type="text/javascript" src="i.js"></script> <script type="text/javascript" src="j.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
## 基础用法
### 基本API
> require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短
>
> - define 从名字就可以看出这个api是用来定义一个模块
> - require 加载依赖模块,并执行加载完后的回调函数
### 案例
- HTML页面加载**'jquery', 'bootstrap', 'backend', 'table', 'echarts', 'echarts-theme', 'template'**
- 这些**JS模块**之后再返回JS对象执行特定的函数
```javascript
define(['jquery', 'bootstrap', 'backend', 'table', 'echarts', 'echarts-theme', 'template'],
function($, undefined, Backend, Table, Echarts, undefined, Template) {
var Controller = {
my: function() {},
platform: function() {
// 基于准备好的dom,初始化echarts实例
var myChart = Echarts.init(document.getElementById('echart'), 'walden');
// 指定图表的配置项和数据
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [__('Sales'), __('Orders')]
},
toolbox: {
show: false,
feature: {
magicType: { show: true, type: ['stack', 'tiled'] },
saveAsImage: { show: true }
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: Orderdata.column
},
yAxis: {},
grid: [{
left: 'left',
top: 'top',
right: '10',
bottom: 30
}],
series: [{
name: __('Sales'),
type: 'line',
smooth: true,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1.5
}
},
data: Orderdata.paydata
},
{
name: __('Orders'),
type: 'line',
smooth: true,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1.5
}
},
data: Orderdata.createdata
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$(document).on("click", ".btn-refresh", function() {
setTimeout(function() {
myChart.resize();
}, 0);
});
},
company: function() { }
};
return Controller;
});
模块定义
- 那么刚才上述的JS模块是如何定义且让RequireJs知道的?