利用require.js实现javascript模块化加载

这种引入很看到很想死吧！

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>

require.js可以很好的优化这个问题： 

1、下载require.js http://requirejs.org/docs/download.html

2、用法

如果放底部

<script src="js/require.js"></script>

如果放头部

<script src="js/require.js" defer async="true" ></script>

指定主程序为main.js

<script src="js/require.js" data-main="js/main"></script>

 

3、主模块写法

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
});

 

 

原来的：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>html</title>

</head>
<body>

<script type="text/javascript" src="js/m1.js"></script>
<script type="text/javascript" src="js/m2.js"></script>
<script type="text/javascript" src="js/m3.js"></script>
<script type="text/javascript" src="js/m4.js"></script>
</body>
</html>

就可以改为：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>html</title>

</head>
<body>

<script src="js/require.js" data-main="js/main"></script>
</body>
</html>
//main.js
require(['m1','m2','m3','m4'],function(m1,m2,m3,m4){
    
});

 

posted @ 2015-10-30 11:17  tinyphp  Views(389)  Comments(0)  Edit  收藏  举报