【requirejs】手把手教你用requirejs重构你的项目

“廉颇老矣，尚能饭否”，虽然requirejs古老了点，但是其前端模块化思想的思想值得我们深究！
<b>初学者关于本文的正确打开方式:</b>该知识点偏重于实践,所以大家最好自己动手做一遍。如果大家手头上没有好的项目的话，可以拿博主的demo进行实验.
重构前和重构后的代码都放在我的github上，链接：
https://github.com/WesleyQ5233/wechatScenes.git. 里面我也放了更详细的资料，便于你的学习.大神，请无视并抛砖！
PS：之前博主写了一个微信场景的demo，相关博文链接：
http://www.jianshu.com/p/44f986f8cb76 .
今天博主就亲身实践教大家怎样用requreJs将此demo重构.

<b>配置requireJs环境</b>
在WebStorm下输入：

npm install -g requirejs
bower install requirejs

将requireJs库下载下来,然后放到项目对于的文件夹下.并按以下引入，
<script src="js/libs/requirejs/require.js" data-main="dist/main"></script>

首先我展示一下重构之前项目结构：

重构前项目结构

然后是重构后项目结构：

重构后项目结构.png

显而易见，我们接下来的工作就是要在新增的app文件夹里将我们原来写的js代码用requireJs规范进行拆封、封装、最后用requireJs附带的命令行压缩一下，其中main.js作为项目的入口文件,并在这里配置相关参数。包括指定模块的根文件夹、配置项目模块的路径和别名、通过shim的配置将非AMD标准写法输出为AMD标准、定义依赖模块关系等.

原项目所有的js代码我放在了index.html下：

原项目所有的js代码.png

很显然我们可以拆分成三个模块.分别命名并放在重构后的app文件下：

js拆分.png

分别用来处理对应的音乐播放暂停、首页预加载、图片滑动功能.
下面我们就需要按照requireJs的规范将各原Js代码放到这些新增的js文件里.
<b>1）首先按如下方式写好入口文件：</b>

入口文件main.js写法.png

<b>2）再将app文件夹里拆分出的模块依次写好：</b>
注意前置依赖的正确注入。回调函数里面的代码我们在原文件里已经写好，拷贝过来就行啦.

各拆分模块的写法.png

好啦，现在我们就可以成功运行index.html文件啦.但是这时候我们已经用requireJs完全重构一遍了，小伙伴们是不是这时候对模块化的写法有了更深一层的体会呢.
<b>3）最后我们再次优化一下我们的代码</b>
按下F12，点开Network选择JS。你会发现请求的js文件太多啦，很显然不符合我们项目的优化要求（要尽可能的减少http的请求数）

请求的js文件数太多啦.png

这时候我们在项目根文件下建一个build文件夹在里面配置名为build.config.js文件如下：

build.config.js.png
并将index.html文件里面的requirejs引入路径改为dist下：
<script src="js/lib/require.js" data-main="dist/main"></script>
注意这时候index.html里只引入这一个js文件，如果你完美配置无误的话.这时候我们运行index.html文件，你会发现js请求数就两个了！
这个世界安静了.png

怎么样，自己也写完一遍会，你就会对js模块化思想是不是有了更贴切的感受了呢.其实当你把前端的很多框架，工具学完后，学习node是很轻松的.那时候你就是一个full stack engineer啦それは本当におめでとうございます.