require.js的基本用法

推荐阮一峰老师写的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

秒客网

require.js的基本用法

相关文章