requireJS模块化开发

一.requireJS介绍

     项目中大都使用模块化开发，requireJS作为AMD模块开发的典范，所以有必要学习下。通过一步步利用requireJS编写demo，从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受。

    AMD：一种基于模块的异步加载JavaScript代码的机制，它推荐开发人员将JavaScript代码封装进一个个模块，对全局对象的依赖变成了对其他模块的依赖，无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的JavaScript代码好处很明显，各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载JavaScript代码，使Web页面上其他不依赖 JavaScript代码的UI元素，如图片、CSS以及其他DOM节点得以先加载完毕，Web页面加载速度更快，用户也得到更好的体验。

 二.为什么要用requireJS

     1.最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

    

这段代码依次加载多个js文件。
这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

   2.正常编写方式

       index.html

       

       a.js

       

      可能你更喜欢这样写

      

      第二种方法使用块作用域来申明function防止污染全局变量，本质还是一样的，当运行上面两种例子

     不知道你是否注意到，alert执行的时候，html内容是一片空白的，即<span>body</span>并未被显示，

     当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。

     3.requireJS写法

     当然首先要到requireJS的网站去下载JS

     index.html:

     

     a.js

     

    浏览器提示"it works",说明运行正确，但是有一点不一样，这次浏览器并不是一片空白，body

   已经出现在页面中，目前为止，可以知道require具有如下优点：

    1.防止js加载阻塞页面。

    2.使用程序调用的方式加载js，防止出现如下丑陋的场景。

    

三.require.js的加载

使用require.js的第一步，是先去官网下载最新版本。

下载后，假定把它放在js子目录下面，就可以加载了。

有人可能会想到，加载这个文件，也有可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，

另一个是写成下面这样：

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

四.主模块的写法

上一节的main.js，我把它称为"主模块"，意思是整个网页的入口代码。它有点像C语言的main()函数，所有代码都从这儿开始运行。
下面就来看，怎么写main.js。
如果我们的代码不依赖任何其他模块，那么可以直接写入javascript代码。

main.js代码：

页面上调用js文件，如下图：

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

五.AMD模块的写法

require.js加载的模块，采用AMD规范，也就是说，模块必须按照AMD的规定来写。

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数中，假定现在有一个math.js文件，它定义了一个math模块，那么，math.js就要这样写：

加载方法如下：

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。