关闭

requirejs:模块加载(require)及定义(define)时的路径小结

标签: requireJSbaseUrl
1058人阅读 评论(0) 收藏 举报
分类:
接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步。而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得很困惑。

假设我们的目录结构如下:

demo.html 
js/require.js 
js/main.js 
js/lib.js                               =>alert('js/lib')
js/util.js                              =>alert('js/util')
js/common/lib.js              =>alert('s/common/lib')
js/common/jqury/lib.js    =>alert('js/common/jqury/lib')
common/lib.js                  =>alert('common/lib')

baseUrl :基础中的基础
在requirejs的模块路径解析里, baseUrl 是非常基础的概念,离开了它,基本就玩不转了,所以这里简单介绍一下。简单的说, baseUrl 指定了一个目录,然后requirejs基于这个目录来寻找依赖的模块。
举个栗子,在demo.html里加载requirejs,同时在requirejs所在的script上声明 data-main 属性,那么,requirejs加载下来后,它会做两件事件:
1)、加载js/main.js
2)、将baseUrl设置为data-main指定的文件所在的路径,这里是 js/
<script src="js/require.js" data-main="js/main.js"></script>
那么,下面依赖的lib模块的实际路径为 js/lib.js
require(['lib'], function(Lib){
    // do sth
});
当然,除了 data-main 属性,你也可以手动配置 baseUrl ,比如下面例子。需要强调的是:
如果没有通过 data-main 属性指定 baseUrl ,也没有通过config的方式显示声明 baseUrl ,那么 baseUrl 默认为加载requirejs的那个页面所在的路径
index.html  (此时的baseUrl 指向index.html所在路径, )
<script src="js/require.js"></script>
<script src="js/main.js"></script>
main.js
require(['js/lib'], function(lib){
<pre name="code" class="html"><span style="white-space:pre">	</span>lib.lib()                              //'js/lib'
});


baseUrl  +  path :让依赖更简洁、灵活
比如我们加载了下面一堆模块(好多水果。。。),看着下面一长串的依赖列表,可能你一下子就看出问题来了:
1)、费力气:每个加载的模块前面都有长长的 common/fruits
2)、难维护:说不定哪一天目录名就变了(在大型项目中并不算罕见),想象一下目录结构变更带来的工作量
requirejs.config({
    baseUrl: 'js'
});
// 加载一堆水果
require(['common/fruits/apple', 'common/fruits/orange', 'common/fruits/grape', 'common/fruits/pears'], function(Apple, Orange, Grape, Pears){
    // do sth
});
对一个模块加载器来说,上面说的这两点问题显然需要考虑进去。于是requirejs的作者提供了 paths 这个配置项。我们看下修改后的代码。
requirejs.config({
   baseUrl: 'js',
   paths: {
      fruits: 'common/fruits'
    }
});
// 加载一堆水果
require(['fruits/apple', 'fruits/orange', 'fruits/grape', 'fruits/pears'], function(Apple, Orange, Grape, Pears){
    // do sth
});
其实就少了个 common 前缀,也没节省多少代码,但当项目结构变更时,好处就体现了。假设 common/fruits 某一天突然变成了 common/third-party/fruits ,那很简单,改下 paths 就可以了。
requirejs.config({
    baseUrl: 'js',
    paths: {
        fruits: 'common/third-party/fruits'
    }
});

推荐文章:
RequireJS实例分析
requirejs:模块加载(require)及定义(define)时的路径小结
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:17555次
    • 积分:327
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:56篇
    • 译文:0篇
    • 评论:0条
    文章分类