前端那些事儿(2) --- javascript模块化(下)

上篇文章我们提到了原生方法加载JS模块时,因为存在阻塞、依赖关系复杂等等缺点,所以最好用加载工具来帮助我们完成加载,这就是requireJS、seaJS这样的加载工具,这篇文章暂时只关注于requireJS。

引入requireJS

首先先去reqiureJS的官方网站下载:[http://requirejs.org/docs/download.html]

然后在HTML文档中引入:

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

为了防止阻塞,建议将script标签写到HTML文章的尾部,这样可以在DOM加载完之后再执行JS代码,避免白屏问题。

这里发现了一个奇怪的属性:data-main,是干什么用的?

这就是requireJS的入口,在加载完自身之后,requireJS会立即加载这个属性指向的文件,由于requireJS是默认加载JS文件的,所以可以在url里省略掉“.js”的后缀。


主模块写法

主模块长得大概像这个样子:

1
2
3
4
5
6
7
8
9
10
11
require.config({
paths: {
"module_1" : 'url',
"module_2" : 'url',
"module_3" : 'url'
}
});

require(['module_1','module_2','module_3'], function(module_1,module_2,module_3) {
//这里可以随意使用module下的功能
});

首先是config方法,这个方法定义了所有模块的名字、url,以便加载时使用。

然后就是喜闻乐见的require方法了,这个方法有两个参数:

  • 第一个参数是依赖的模块名称,注意是string类型的,会有很多人忘记这一点。
  • 第二个参数是对应执行的函数。

require方法会自动解析模块的依赖关系,比如3依赖2,2依赖1,那么在加载3模块之前,requireJS会提前加载并且运行1模块和2模块,非常方便。


如何写模块

比如我们定义了一个foo模块,它有一个方法a,并且他是依赖于jQuery的,:

1
2
3
4
5
6
7
8
define(["jQuery"], function() {
return {
a: function() {
//可以在这里使用jQuery
$("div").css("display","none");
}
}
});

这就是基础的模块写法。


其他参考资料

requireJS在网上的资源很多,所以这篇文章并不长,因为我觉得我的文笔水平不如其他博客大大。

这里给出了一些可以参考的资料:
http://www.tuicool.com/articles/jam2Anv
http://www.ruanyifeng.com/blog/2012/11/require_js.html
http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html