前端神器avalonJS入门（二）
本章開始搭配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?文件最終是這樣的：
?View Code運行index.html，會發現一切順利：
本章就先簡單介紹在requireJS下如何使用avalon，下一篇avalon文章打算給大家介紹非常了得的東西——avalon的前端路由。
共勉~
?
轉載于:https://www.cnblogs.com/cymbidium/p/5341399.html
總結
以上是生活随笔為你收集整理的前端神器avalonJS入门（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 背景移动的方法
- 下一篇： HTML网页模版/DTD有三种类型