快速学会require的使用

快速学会使用require.js

1.get start

先到官网下载requirejs到本地，官方同时提供Node版本r.js，我们只使用requirejs即可。

接下来在页面上写入

    <scrpit src="/js/require.js"></scrpit>

即可。

那么业务js呢？我们注意到，官方文档提到了data-main这个属性

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

这个data-main所对应的js，是入口js，requirejs会首先加载这个js，然后才会根据依赖异步加载其他的依赖模块。

在main.js里，我们可以编写业务代码，在编写的时候，要注意处理好依赖。

例如，main.js依赖于工具类tools.js，在main.js中，就应该这么写

require(['js/tools'], function (Tools) { // Tools对应于数组中的tools，多个参数一一对应
    // 编写业务逻辑
})

这就是一个简单的require的使用了。

2.处理依赖

在上一节，我们注意到main.js里面require引入了tools，如果我们依赖许多js，那岂不是每个都要写对应的路径和全名，岂不是很麻烦。

针对这个问题，requirejs提供了一个config函数，用来自定义加载行为。

require.config(
    path:{
        'zepto': 'js/zepto.min',
        'tools': 'js/tools'
    }
)

只需要在main.js最前方加入这个配置函数即可。我们就能简化部分代码。

但是我还是觉得不够好，这样的话，如果我有多个页面，我每次都要写好几次重复config函数，很多余，复制粘贴超过三次，我们就该考虑复用的问题。

当然，requirejs的作者也想到了这个问题。实际上，即使是在一个spa项目中，也不能真的只有一个html。所以，我们可以编写一个config.js来存放我们对require的配置。

// config.js
var require = {
    baseUrl: './js',
    waitSeconds: 0,
    paths: {
        'zepto': 'zepto.min',
        'tools': 'tools'
    },
    shim: {
        zepto: {exports: '$'},
        common:{exports: 'common', deps: ['zepto']}
    }
};

上面列出了一些配置项，可以在官网找到对应内容。简单列几个常见的配置项：

baseUrl: the root path to use for all module lookups.

即根目录，所有的模块都从baseUrl目录下去查找js。

paths: path mappings for module names not found directly under baseUrl.

无需多言，需要注意，path中配置的模块，都是基于baseUrl的。

shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.

shim是我们在面对一些不支持amd写法的老模块时需要进行配置的地方。比如zepto。

waitSeconds: The number of seconds to wait before giving up on loading a script. Setting it to 0 disables the timeout. The default is 7 seconds.

waitSecond用来设置寻找js的时长，默认7s，正常情况下，我们会设置为0，因为一般来说，如果一切正常，不会出现找不到的情况。

callback: A function to execute after deps have been loaded. Useful when require is defined as a config object before require.js is loaded, and you want to specify a function to require after the configuration's deps array has been loaded.

callback函数会在全部依赖加载完毕后调用，可以用来做一些初始化的操作。

我在这里不能一一举例，详细查看官方配置项页面。

在cogfig.js编写完毕以后，就可以在页面中导入它了。

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

此处需要注意的是，一旦配置了configjs中baseUrl，那么data-main中的main.js也要根据baseUrl去找。

3.编写我们的依赖模块

在开发中，我们也需要编写自己的依赖模块，例如tools工具集，这节介绍如何编写符合AMD规范的模块。

下面是一个例子：

define(['zepto'], function($){
　　　　function sayHi(){
　　　　　　$('title').text = 'Hi';
　　　　}
　　　　return {
　　　　　　sayHi : sayHi
　　　　};
　　});

如果无依赖，则第一个参数不传或传空数组即可。

4.实际开发中遇到的问题

事实上，在实际开发中，我们会需要把所有的静态资源（img，js，css）放到cdn上。这时，在打包的时候，就需要修改baseUrl，如果配置了的话。

因为html页面放置在服务器上，可能地址为 https://www.xx.com/index.html 。在html中的js引入应该为

<script src="//static.xx.com/xxxx/js/config.js"></script>

此时config.js放置在cdn上，如果baseUrl依然为./js，很显然，就会链到当前页面所在目录下js文件夹，也就是 https://www.xx.com/js/ ,明显不对。

所以在打cdn包的时候，要注意修改baseUrl为cdn地址。

在cdn打包时，还有一个需要注意的地方，我们会加入md5来防止版本冲突。例如tools.js打包完成后，会变成tool.3jf321.js。这时，config.js中的path路径也需要做修改，链到加了md5的js上。

一般来说，我们都是用grunt和gulp等工具做打包。

加入md5的时候，一般会在rev目录下生成一个mainfest.json，存放了一一对应的对象，我们只需要将这个对象遍历修改即可。

我使用gulp来打包，基本写法如下，仅供参考：

var cdn_url = '//static.xxx.com/xxx/';
gulp.task('rev', function() {
  return gulp.src(['rev/**/*.json', 'dist/*.html'])
    .pipe(revCollector({
      replaceReved: true,
      dirReplacements: {
        'css': function(manifest_value) {
          return cdn_url + 'css/' + manifest_value;
        },
        'js': function(manifest_value) {
          return cdn_url + 'js/' + manifest_value;
        },
      }
    }))
    .pipe(gulp.dest('cdn'));
});

以上就是在使用require.js的一些基本技巧，感谢阅读。