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

时间:2023-03-08 19:02:22

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

<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){ });