本章開始搭配requireJS來使用avalon，開始之前，我們可以對avalon進行精簡改造（注：新版的avalon已提供了shim版本，無需再做如下的精簡了，直接點這里獲取）。
avalon源碼里有自己的AMD加載器和DOMReady模塊，使用requireJS來加載各依賴腳本的話，使用其配套插件DOMReady來ready執行會更合適，而且avalon的AMD模塊也多余了。故我們可以把這倆塊代碼咔嚓掉。
只需要在源碼里搜索“AMD”和“DOMReady”就能找到位於尾部的這倆模塊，刪掉它們可以節省400多行代碼（大約是第4358行到4777行）:
要注意的是avalon的DOMReady模塊里帶了自掃描機制，它能在DOMReady后自動執行avalon.scan()來掃描和執行文檔中的avalon功能屬性：
所以我們刪掉源碼中DOMReady模塊的話，之后編寫avalon腳本應當在最后手動加上一句 avalon.scan() 或 avalon.scan(document.getElementById("XX")) ，前者會掃描整個文檔，后者只會掃描所選DOM內區域，我個人是推薦使用后者。
其實在第一篇的時候就有提過這個問題了，只是沒細說：
刪掉avalon自帶的AMD和DOMReady模塊后，還有一個小地方也建議修改下（非必須項），它是avalon內置的調試方法，為不干擾后續自己的腳本調試，可以把它注釋掉。
方法是直接在源碼搜索“console”，大約在46行的位置注釋掉log()方法里的調試代碼即可：
需求
本章要用到的腳本除了精簡后的avalonJS，還需要requireJS及其插件DomReady.js（后續篇章還會用到css.js來按需加載樣式文件）。
你可以在我的Github上直接下載本章的Demo，也省去了搜羅上述腳本的過程。
示例
我們依舊拿上一篇的選項卡來做本章示例即可，本章主要介紹的僅為如何在使用requireJS的基礎上使用avalon：
我們本章示例的文件系統可以是這樣的：
其中的js/page文件夾下的 index.js 作為 index.html 頁面的腳本入口（requireJS的main入口）。js/tool文件夾下則存放要用到的工具。這樣還蠻簡潔直觀的對吧。
在 index.html 頁面里，我們僅需引入配置了入口的requireJS文件即可：
<script src="js/tool/require.js" type="text/javascript" data-main="js/page/index"></script>
然后加入我們上一篇avalon文章中寫好的內容，整體是這樣的：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>初玩阿瓦隆</title> <script src="js/tool/require.js" type="text/javascript" data-main="js/page/index"></script> </head> <body> <script type="text/javascript"> //這里給后端提供數據接口 var conf = { gg:[{"id":"1","title":"公告文章標題1"},{"id":"2","title":"公告文章標題2"},{"id":"3","title":"公告文章標題3"},{"id":"4","title":"公告文章標題4"}], bd:[{"id":"1","title":"媒體報道文章標題1"},{"id":"2","title":"媒體報道文章標題2"},{"id":"3","title":"媒體報道文章標題3"},{"id":"4","title":"媒體報道文章標題4"}] }; </script> <div ms-controller="list"> <span ms-mouseover="changeUl(1)">公告</span> <span ms-mouseover="changeUl(0)">媒體報道</span> <a ms-href="'#!/'+ more_name">{{more_text}}</a> <ul> <li ms-repeat="infoList"> <a ms-href="'#!/'+ more_name + '/' + el.id" ms-title="el.title">{{el.title}}</a> </li> </ul> </div> </body> </html>
主頁面寫好了，我們再看看requireJS的入口腳本 js/page/index.js 怎么寫。
首先是配置我們要調用到的文件（比如avalonJS和domReadyJS）：
require.config({ baseUrl: 'js/', //相對於index.html頁面文件的地址 paths:{ //這里配置的地址，都是相對於上方的baseUrl的 avalon: 'tool/avalon', domReady:'tool/domReady' }, shim:{ avalon: { exports: "avalon" } } });
其中的baseUrl是當前config的全局路徑，后面paths里定義的路徑都是相對於baseUrl的，baseUrl的好處就是如果路徑很長的話，可以拿它當前綴變量。
例如上述代碼paths里定義avalon的地址是 "tool/avalon"，實際運行的時候會給它加上前綴baseUrl（當然也會加上省略的后綴名.js）變成 "js/tool/avalon.js"。
shim指的是給非嚴格AMD標准的文件加上一層“殼”，增強代碼健壯性。
接着就是我們對avalon腳本的常規調用了：
require(['avalon',"domReady!"], function() { var vm = avalon.define({ $id: "list", more_name: "gg", more_text: "更多公告", gg:conf.gg, bd:conf.bd, infoList:conf.gg, changeUl:function(flag){ if(flag){ vm.more_name = "gg"; vm.more_text = "更多公告"; vm.infoList = vm.gg; }else{ vm.more_name = "bd"; vm.more_text = "更多報道"; vm.infoList = vm.bd; } } }); avalon.scan(); });
注意要用
require(['依賴文件1',"依賴文件2"], function() { //回調 })
來處理模塊依賴，然后注意domReadyJS的模塊引用寫法是“domReady!”，即在最后加了一個感嘆號，表示優先使用其作為DOMReady處理模塊。
整理一下，我們的 js/page/index.js 文件最終是這樣的：
require.config({ baseUrl: 'js/', //相對於index.html頁面文件的地址 paths:{ //這里配置的地址，都是相對於上方的baseUrl的 avalon: 'tool/avalon', domReady:'tool/domReady' }, shim:{ avalon: { exports: "avalon" } } }); require(['avalon',"domReady!"], function() { var vm = avalon.define({ $id: "list", more_name: "gg", more_text: "更多公告", gg:conf.gg, bd:conf.bd, infoList:conf.gg, changeUl:function(flag){ if(flag){ vm.more_name = "gg"; vm.more_text = "更多公告"; vm.infoList = vm.gg; }else{ vm.more_name = "bd"; vm.more_text = "更多報道"; vm.infoList = vm.bd; } } }); avalon.scan(); });
運行index.html，會發現一切順利：
本章就先簡單介紹在requireJS下如何使用avalon，下一篇avalon文章打算給大家介紹非常了得的東西——avalon的前端路由。
共勉~
