推荐阮一峰老师写的require.js的用法：http://www.ruanyifeng.com/blog/2012/11/require_js.html
我学习require.js是借鉴的阮一峰老师的JavaScript模块化编程（三）：require.js的用法；这篇文章也是根据阮一峰老师的教程写出的demo。
require.js的使用可以避免alert()造成的js阻塞，可以优化js的加载。
1、避免alert()造成的js阻塞：
<!--index.html 原始写法必须alert事件执行完以后才能加载body部分的内容-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert(1)
</script>
</head>
<body>
<h1>body</h1>
</body>
</html>
<!--用require加载js,避免alert事件阻塞页面加载问题-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/require.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
require.config({
paths:{
"al":"js/al"
}
})
require(['al'],function(al){
alert('require');
});
</script>
</head>
<body>
<span class="oSpan">body</span>
</body>
</html>
2、优化js加载：
<!--避免下面这种加载js的情况-->
<script src="a.js" type="text/javascript" charset="utf-8"></script>
<script src="b.js" type="text/javascript" charset="utf-8"></script>
<script src="c.js" type="text/javascript" charset="utf-8"></script>
<script src="d.js" type="text/javascript" charset="utf-8"></script>
<script src="e.js" type="text/javascript" charset="utf-8"></script>
改成这种写法
require(['a','b','c','d','e'],function(a,b,c,d,e){
//some code here
});
--------------------------------------------------------------分割线-----------------------------------------------------------------------------
写一下require.js简单的使用：
加载require.js文件造成网页失去响应的两个解决方法：
1、把js文件放在网页底部加载；
2、<script src="js/require.js" defer async="true" type="text/javascript" charset="utf-8" ></script>
注：async="true" 为异步加载，IE不支持async，只支持defer
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--data-main 指定网页的主模块，入口js文件-->
<script data-main="js/main" src="js/require.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>body</h1>
</body>
</html>
//add.js
//define定义模块
define(function(){
function add(x,y){
return x+y;
}
return {
add:add
}
})
//sum.js
define(function(){
function sum(x,y){
return x*y;
};
return {
sum:sum
}
})
//red.js
define(function(){
function red(x,y){
return x-y;
};
return {
red:red
}
})
//main.js
//require.config()方法，我们可以对模块的加载行为进行自定义。
//require.config()就写在主模块（main.js）的头部。参数就是一个对象
require.config({
//require 第一个参数为数组，载入每一个依赖的js文件，第二个参数为callback回调函数
//paths为指定js路径，且.js可省去。(定义各个模块的加载路径)
paths:{
"add":"add",
"sum":"sum",
"red":"red"
}
})
require(['add','sum','red'],function(add,sum,red){
alert(add.add(1,2));//3
alert(sum.sum(1,2));//2
alert(red.red(2,1));//1
});
更多内容，请参考 阮一峰老师写的require.js的用法： http://www.ruanyifeng.com/blog/2012/11/require_js.html
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)