requirejs目录探究

模块化开发也不是第一天的事了,对于其他语言更不是什么新鲜玩意,前端有什么AMD、CMD、COMMONjs规范。自己在很早就去看AMD的代表requirejs,当时怎么也不知道为什么就是觉得目录结构那么丑陋,导致现在都没有怎么去用过这东西,今天无聊再次看了看requirejs,自己想出一个自己比较认可的目录结构。(越来越觉自己在代码格式上有点处女座的倾向)

上面的是requirejs给的一个多页面官方例子,看着也还挺好的。requirejs有个data-main,我觉得这样就一个入口文件感觉好简洁。然后requirejs又有个config文件,这个基本每个文件都有,为了这样你就不能使用data-main了,代码就变成上面的html里的样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script src="js/lib/require.js"></script>
<script>
//Load common code that includes config, then load the app
//logic for this page. Do the requirejs calls here instead of
//a separate file so after a build there are only 2 HTTP
//requests instead of three.
requirejs(['./js/common'], function (common) {
//js/common sets the baseUrl to be js/ so
//can just ask for 'app/main1' here instead
//of 'js/app/main1'
requirejs(['app/main1']);
});
</script>
</head>
<body>
<a href="page2.html">Go to Page 2</a>
</body>
</html>

我给改造成后就变成下面的样子:

我把config那步给移到了js入口文件里去了

1
2
3
4
5
6
7
requirejs(['../common'], function() {
requirejs(['jquery'], function($) {
$(function() {
console.log('ok');
});
});
});

这样我就只要引入入口文件就好了,一个data-main就搞定,看着简洁。 其实如果要是有个data-config这样的的配置就好了,可惜我没有找到,至于现在的合理不合理就不知道,反正现在看着舒服了。

入职新公司了,希望这一年有点长进,自己也会好好的。