“廉頗老矣，尚能飯否”，雖然requirejs古老了點，但是其前端模塊化思想的思想值得我們深究！
<b>初學者關于本文的正確打開方式:</b>該知識點偏重于實踐,所以大家最好自己動手做一遍。如果大家手頭上沒有好的項目的話，可以拿博主的demo進行實驗.
重構前和重構后的代碼都放在我的github上，鏈接：
https://github.com/WesleyQ5233/wechatScenes.git. 里面我也放了更詳細的資料，便于你的學習.大神，請無視并拋磚！
PS：之前博主寫了一個微信場景的demo，相關博文鏈接：
http://www.lxweimin.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

這個世界安靜了.png

怎么樣，自己也寫完一遍會，你就會對js模塊化思想是不是有了更貼切的感受了呢.其實當你把前端的很多框架，工具學完后，學習node是很輕松的.那時候你就是一個full stack engineer啦それは本當におめでとうございます.