avalon 單頁面程序（種子工程）之二按需加載和路由系統

時間 2019-12-05

原文原文鏈接

SPA的成功離開不這三個東西，分層架構，路由系統，儲存系統。分層架構是咱們組織複雜代碼的關鍵，路由系統是將多個頁面壓縮在一個頁面的關鍵。其中avalon路由用到了兩個單獨獨立出來的類庫 mmRouter 和 mmHistory。javascript

路由有什麼做用呢？

路由其實能夠理解成網站上不一樣的網頁地址，若是不是SPA的網站，瀏覽器的前進後退，連接到了一個新的頁面，整個頁面從新刷新；但若是是SPA網站，由於整個頁面是不須要所有刷新的，網站的頁面也停留在當前頁面，那麼怎麼解決瀏覽器的前進後退問題呢，怎麼解決須要定位到特定網頁地址的問題呢，因此SPA就引入了路由系統。下面咱們看看路由是怎麼實現的：html

引入路由

用requriejs 引入avalon路由

mmRouter和mmHistory地址：https://github.com/RubyLouvre/mmRouter
用requirejs配置mmRouter和mmHistory在網站中的地址java

require.config({//第一塊，配置
    baseUrl: '',
    paths: {
        avalon: ["js/avalon/avalon"],//必須修改源碼，禁用自帶加載器，或直接刪提AMD加載器模塊
        mmHistory: 'js/avalon/mmHistory',
        mmRouter: 'js/avalon/mmRouter',
    }
});

avalon路由代碼

'/sub1/index'爲路由地址, 當用戶在頁面點擊這個地址的時候，觸發callback回調，每一個路由能夠單獨定義一個callback方法。在這個種子工程中，我都調用了同一個callback方法，就比較適合目錄動態生成，須要按需調用不一樣的頁面的狀況。在這裏執行了callback回調以後， console.log(this.path)輸出了路徑的地址git

//requirejs引用mmRouter
require(['mmRouter'],function(mmRouter){
    avalon.log("引入avalon");

    var model = avalon.define({
        $id: "root",
        name: "tangolivesky"
    })

    //路由的導航回調
    function callback() {
        console.log(this.path);
    }

    /*avalon路由方法 '/sub1/index'爲路由地址, 當用戶在頁面點擊這個地址的時候，觸發callback回調，
    每一個路由能夠單獨定義一個callback方法。在這個種子工程中，我都調用了同一個callback方法，就比較適合
    目錄動態生成，須要按需調用不一樣的頁面的狀況*/
    avalon.router.get("/sub1/index", callback)
    avalon.router.get("/sub2/index", callback)
    avalon.history.start({
        basepath: "/avalon"
    })
    avalon.scan()
});

html頁面：
結構比較簡單，咱們就定義了兩個a 標籤，地址前面加上#!, 這個是avalon特有的寫法，angularjs是#angularjs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>avalon工程</title>
    <script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
    <ul>
        <li>
            <a href="#!/sub1/index">導航1</a>
        </li>
        <li>
            <a href="#!/sub2/index">導航2</a>
        </li>
    </ul>

</body>
</html>

執行結果

當點擊導航1，或者導航2，分別在瀏覽器控制檯中輸出了/sub1/index和 /sub2/indexgithub

按需加載js和子頁面html模板

一個項目都會由好多個子頁面和js組成，就單頁面程序來說，你能夠把js進行合併，而後按需加載部分子頁面html. 也能夠按需加載js和html . 我在這裏用的是按需加載js, 再由js中的requirejs text 類庫來加載html文件。瀏覽器

index.html增長子頁面替換標籤

在首頁index.html中增長這段代碼<div ms-include-src="content"></div>， avalon中ms-include-src是用來加載模板用的架構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>avalon工程</title>
    <script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
    <ul>
        <li>
            <a href="#!/sub1/index">導航1</a>
        </li>
        <li>
            <a href="#!/sub2/index">導航2</a>
        </li>
    </ul>

    <div ms-include-src="content"></div>
</body>
</html>

修改main.js中導航回調函數

//導航回調
    function callback() {
        var jspath = "modules"; //這裏改爲您本身的網站地址 ,這個是js路徑的變量
        var pagepath = "";       //這個是網頁的變量

        //這段代碼的做用是按照路由path 獲得須要加載的js路徑
        var paths = this.path.split("/");
        for (var i = 0; i < paths.length; i++) {
            if (paths[i] != "") {
                jspath += "/" + paths[i];
                pagepath += "_" + paths[i];
            }
        }

        //console.log(jspath);
        //console.log(pagepath);

        require([jspath], function (page) {
            //這段代碼的做用是把pagepath變量 賦給root controller下面的content
            avalon.vmodels.root.content = pagepath;
        });
    }

修改modules/sub1 下面的index.js

同理修改 modules/sub2下面的index.js jsp

sub1下面index.js函數

define(['avalon', 'text!./index.html',], function (avalon,_sub1_index) {
    avalon.templateCache._sub1_index = _sub1_index
})

sub2下面index.js

define(['avalon', 'text!./index.html',], function (avalon,_sub2_index) {
    avalon.templateCache._sub2_index = _sub2_index
})

sub1下面index.html

<div>
    第一個頁面
</div>

執行結果

分別點擊導航1 和導航2，按需加載了sub1的index.js、index.html 和 sub2的index.js、index.html

例子我放在了github中 https://github.com/tangolivesky/avalonSPA_Sample

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

avalon 單頁面程序 （種子工程）之二 按需加載和路由系統

路由有什麼做用呢？

引入路由

用requriejs 引入avalon路由

avalon路由代碼

執行結果

按需加載js和子頁面html模板

index.html增長子頁面替換標籤

修改main.js中導航回調函數

修改modules/sub1 下面的index.js

執行結果

avalon 單頁面程序（種子工程）之二按需加載和路由系統