给新来的实习生普及下JS基本知识,看到比较好的文章

转载https://blog.csdn.net/xuxiaoping1989/article/details/52384778

接触过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

  1.  
    require(['lib'], function(Lib){
  2.  
    // do sth
  3.  
    });

当然,除了 data-main 属性,你也可以手动配置 baseUrl ,比如下面例子。需要强调的是:
如果没有通过 data-main 属性指定 baseUrl ,也没有通过config的方式显示声明 baseUrl ,那么 baseUrl 默认为加载requirejs的那个页面所在的路径
index.html  (此时的baseUrl 指向index.html所在路径, )

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

main.js

  1.  
    require(['js/lib'], function(lib){
  2.  
    <pre name="code" class="html"><span style="white-space:pre"></span>lib.lib() //'js/lib'

});


baseUrl  +  path :让依赖更简洁、灵活
比如我们加载了下面一堆模块(好多水果。。。),看着下面一长串的依赖列表,可能你一下子就看出问题来了:
1)、费力气:每个加载的模块前面都有长长的 common/fruits
2)、难维护:说不定哪一天目录名就变了(在大型项目中并不算罕见),想象一下目录结构变更带来的工作量

  1.  
    requirejs.config({
  2.  
    baseUrl: 'js'
  3.  
    });
  4.  
    // 加载一堆水果
  5.  
    require(['common/fruits/apple', 'common/fruits/orange', 'common/fruits/grape', 'common/fruits/pears'], function(Apple, Orange, Grape, Pears){
  6.  
    // do sth
  7.  
    });

对一个模块加载器来说,上面说的这两点问题显然需要考虑进去。于是requirejs的作者提供了 paths 这个配置项。我们看下修改后的代码。

  1.  
    requirejs.config({
  2.  
    baseUrl: 'js',
  3.  
    paths: {
  4.  
    fruits: 'common/fruits'
  5.  
    }
  6.  
    });
  7.  
    // 加载一堆水果
  8.  
    require(['fruits/apple', 'fruits/orange', 'fruits/grape', 'fruits/pears'], function(Apple, Orange, Grape, Pears){
  9.  
    // do sth
  10.  
    });

其实就少了个 common 前缀,也没节省多少代码,但当项目结构变更时,好处就体现了。假设 common/fruits 某一天突然变成了 common/third-party/fruits ,那很简单,改下 paths 就可以了。

    1.  
      requirejs.config({
    2.  
      baseUrl: 'js',
    3.  
      paths: {
    4.  
      fruits: 'common/third-party/fruits'
    5.  
      }
    6.  
      });
02-11 11:17