前端神器avalonJS入門（二）

時間 2019-11-29

標籤前端神器 avalonjs 入門简体版

原文原文鏈接

本章開始搭配requireJS來使用avalon，開始以前，咱們能夠對avalon進行精簡改造（注：新版的avalon已提供了shim版本，無需再作以下的精簡了，直接點這裏獲取）。javascript

avalon源碼裏有本身的AMD加載器和DOMReady模塊，使用requireJS來加載各依賴腳本的話，使用其配套插件DOMReady來ready執行會更合適，並且avalon的AMD模塊也多餘了。故咱們能夠把這倆塊代碼咔嚓掉。css

只須要在源碼裏搜索「AMD」和「DOMReady」就能找到位於尾部的這倆模塊，刪掉它們能夠節省400多行代碼（大約是第4358行到4777行）:html

要注意的是avalon的DOMReady模塊裏帶了自掃描機制，它能在DOMReady後自動執行avalon.scan()來掃描和執行文檔中的avalon功能屬性：前端

因此咱們刪掉源碼中DOMReady模塊的話，以後編寫avalon腳本應當在最後手動加上一句 avalon.scan() 或 avalon.scan(document.getElementById("XX")) ，前者會掃描整個文檔，後者只會掃描所選DOM內區域，我我的是推薦使用後者。java

其實在第一篇的時候就有提過這個問題了，只是沒細說：git

刪掉avalon自帶的AMD和DOMReady模塊後，還有一個小地方也建議修改下（非必須項），它是avalon內置的調試方法，爲不干擾後續本身的腳本調試，能夠把它註釋掉。github

方法是直接在源碼搜索「console」，大約在46行的位置註釋掉log()方法裏的調試代碼便可：後端

需求dom

本章要用到的腳本除了精簡後的avalonJS，還須要requireJS及其插件DomReady.js（後續篇章還會用到css.js來按需加載樣式文件）。ide

你能夠在個人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();
});