模块化工具【require.js】——初识

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。上篇内容滚动视差的效果我们可以用require.js来模块化一下。

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

require.js优点

1、防止js加载阻塞页面渲染

2、使用程序调用的方式加载js，防出现如下丑陋的场景

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

怎么用require.js

1、添加一个main.js文件，并在main.js里面编写以下代码作为require.js的入口：

require.config({
	//main.js所在的位置
	baseUrl: "../dist",
	//模块标识名与模块路径映射
	paths: {
		'skrollr' : "skrollr.min"
	},
	//加载超时处理
	waitSeconds: 15
});

require(['skrollr'], function(skrollr){
	//在这里初始化我们引入的js文件
	var s = skrollr.init({
		edgeStrategy: 'set',
		easing: {
			WTF: Math.random,
			inverted: function(p) {
				return 1-p;
			}
		}
	});
});

2、页面渲染

<script data-main="scripts/main" src="scripts/require.js"></script>
//以下代码已经写入main.js文件
<!--<script>
    var s = skrollr.init({
        edgeStrategy: 'set',
        easing: {
            WTF: Math.random,
            inverted: function(p) {
                return 1-p;
            }
        }
    });
</script>-->