模块化构建工具（requirejs）

在日常的开发环境中，我们总是会引用到各种各样的外部的JS文件，有各种库，也有各个不同需求下的JS，如果我们把这一大堆乱七八糟的的JS代码依次写下来，不仅使得页面非常的难看，而且如果其中某些JS文件需要依赖到一些库或者其他的JS文件并且顺序写错的话就会报错，所以我们用到了requirejs来优化外部js文件的引入。

requirejs 是一个非常小巧的Javascript模块载入框架，其中的语法参照了Nodejs的语法，所以看起来有点相似，但实际区别还是很大的。

requirejs英文文档

菜鸟requirejs教程

一、使用

requirejs之中一共有3个API：define、require、requirejs，其中require = requirejs 。

define用作定义一个模块：

define(function(){      funtion $(selector){            return document.querySelectorAll(selector);      }})

require用作引用其他的模块，第一个参数为需要引用的模块，第二个参数是引用后需要执行的代码块。

require(["js/selector"],function($){     console.log($("div"));})

网络上面有很多的库都支持requirejs的使用（比如jQuery），但也有一些不支持，这个时候我们就需要对这些做一些设置。

新建一个设置文件config.js

require.config({baseUrl: "/",paths : {"jquery" : "lib/jquery/jquery-1.12.4.min",""fly" : "lib/jquery_plugins/jquery.fly.min","template" : "lib/arttemplate/template-native",},shim : {"fly" : {deps : ["jquery"]}}});

其中jquery和template模版引擎都支持requirejs，但依赖与JQ的fly组件不支持，所以需要在shim里面设置好fly的依赖文件。

这样加了设置文件后，主要用作处理页面操作的JS文件可以写作：

require(["config"], function(){require(["jquery", "template", "fly"], function($,  template){//代码区块});});

而在HTML文件中引用时一句话就可以引用完毕：

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

二、不同的规范

现阶段的对模块定义的规范一般有三种，AMD ( requirejs )、CMD（seajs）、CommonJs。其中使用最多还是AMD规范，

AMD和CMD之间的区别具体可以参考CMD作者玉伯在知乎上面自己对于这两者区别的看法：AMD 和 CMD 的区别有哪些？