require.js 实例入门

发表于   |   分类于   |     |   阅读次数

随着项目的壮大，js 通用功能代码块越来越多，复制粘贴js块、多引入一个又一个的 <script></script> 终究觉得这些笨拙得无法满足当前的需要了。 require.js 相信能帮上这个忙。

require.js 的知识点不多，官网、同行高手的博文都已经说得好详细了。个人学习膜拜后，决定写下自己的第一个 require.js 实例小 demo 的过程，实用成果。

主要参考：
RequireJS 中文网
阮一峰 Javascript模块化编程

开始前的准备

下载 require.js 2.1.11
下载 jquery-1.12.2.min

新建目录结构、html/js文件如下，并把刚下载的2个js放到对应目录：

1
2
3
4
5
6
7
8
9
10
|-reuirejs_pro
    |-js
        |-app
            as.js
            md.js
        |-lib
            jquery-1.12.2.min.js
        app.js
        require.js
    index.html

require.js 引入

在 index.html 引入 require.js 文件：

1
<script type="text/javascript" src="js/require.js" defer async="true" data-main="js/app.js"></script>

defer async="true"：异步加载 require.js ，防止页面加载阻塞。
data-main="js/app.js"：require.js 加载完后、便去加载 主文件 app.js 。

index.html 文件代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>requirejs test</title>
	<script type="text/javascript" src="js/require.js" defer async="true" data-main="js/app.js"></script>
</head>
<body>
<input type="text" id="num1" />
<input type="text" id="num2" />
<button type="button" id="add">加add</button>
<button type="button" id="sub">减sub</button>
<button type="button" id="mult">乘mult</button>
<button type="button" id="divi">除divi</button>
<input type="text" id="res" readonly="readonly" />
</body>
</html>

app.js 主文件配置

编辑 app.js 主文件：

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
require.config({
    baseUrl:"js/app",
    paths:{
        //jquery,相对于baseUrl:"js/app"
        "jquery": "../lib/jquery-1.12.2.min",
        "as": "as",
        "md": "md",
    }
    /*
    //配置不兼容模块，deps改模块的依赖性；exports该模块外部调用时的名称
    shim:{
        "jquery.scroll":{
            deps:['jquery'],
            exports:'jQuery.fn.scroll'
        }
    }
    */
});
//可以这样写：["jquery","app/as","app/md"];
require(["jquery","as","md"],function($,as,md){
    $(function(){
        /*
        $('#add').click(function(){
            var $num1=parseInt($('#num1').val());
            var $num2=parseInt($('#num2').val());
            var res=as.add($num1,$num2);
            $('#res').val(res);
        });
        $('#sub').click(function(){
            var $num1=parseInt($('#num1').val());
            var $num2=parseInt($('#num2').val());
            var res=as.sub($num1,$num2);
            $('#res').val(res);
        });
        $('#mult').click(function(){
            var $num1=parseInt($('#num1').val());
            var $num2=parseInt($('#num2').val());
            var res=md.mult($num1,$num2);
            $('#res').val(res);
        });
        $('#divi').click(function(){
            var $num1=parseInt($('#num1').val());
            var $num2=parseInt($('#num2').val());
            var res=md.divi($num1,$num2);
            $('#res').val(res);
        });
        */
        //同样的功能，上面注释掉的太笨重了，改成下面这段
        $('button').click(function(){
            var $num1=parseInt($('#num1').val());
            var $num2=parseInt($('#num2').val());
            var $thisId=$(this).attr('id');
            switch($thisId){
                case 'add':
                    var res=as.mAdd($num1,$num2);
                    break;
                case 'sub':
                    var res=as.mSub($num1,$num2);
                    break;
                case 'mult':
                    var res=md.mult($num1,$num2);
                    break;
                case 'divi':
                    var res=md.divi($num1,$num2);
                    break;
            }
            $('#res').val(res);
        });
    });
});

编辑 模块文件的 define

app 的目录下2个js文件 as.js，md.js。

编辑 as.js，该模块js文件可以实现 加法、减法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
define(function(){
	var mAdd=function(num1,num2){
		return num1+num2;
	}
	var mSub=function(num1,num2){
		return num1-num2;
	}
	return{
		mAdd:mAdd,
		mSub:mSub
	};
});
//若该模块依赖其它模块，增加一个数组参数
/*
define(['md'],function(md){
	md.mult(2,3);
});
*/

编辑 md.js，该模块js文件可以实现 乘法、除法：

1
2
3
4
5
6
7
8
9
10
11
12
define(function(){
	var mult=function(num1,num2){
		return num1*num2;
	}
	var divi=function(num1,num2){
		return num1/num2;
	}
	return{
		mult:mult,
		divi:divi
	};
});

好的，大功告成！当你完整地做好一个 demo、然后对它进行不断的一边修改、一边摸索，require.js 的那些知识点就一点点地迎刃而解啦！

require.js 为了解决加载多个 js 的多请求，可以进行优化合并 js 为一个 js 。然而这个步骤， 使用前端自动化工具 gulp 来实现应该会更好吧……

当然，更多的熟练掌握有待在实践应用中去发掘了。