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

fanux 發(fā)布于2019-08-19 17:30 / 1305人閱讀

摘要：的成功離開不這三個東西，分層架構(gòu)，路由系統(tǒng)，儲存系統(tǒng)。分層架構(gòu)是我們組織復(fù)雜代碼的關(guān)鍵，路由系統(tǒng)是將多個頁面壓縮在一個頁面的關(guān)鍵。在這個種子工程中，我都調(diào)用了同一個方法，就比較適合目錄動態(tài)生成，需要按需調(diào)用不同的頁面的情況。

SPA的成功離開不這三個東西，分層架構(gòu)，路由系統(tǒng)，儲存系統(tǒng)。分層架構(gòu)是我們組織復(fù)雜代碼的關(guān)鍵，路由系統(tǒng)是將多個頁面壓縮在一個頁面的關(guān)鍵。其中avalon路由用到了兩個多帶帶獨立出來的類庫 mmRouter 和 mmHistory。

路由有什么作用呢？

路由其實可以理解成網(wǎng)站上不同的網(wǎng)頁地址，如果不是SPA的網(wǎng)站，瀏覽器的前進(jìn)后退，鏈接到了一個新的頁面，整個頁面重新刷新；但如果是SPA網(wǎng)站，因為整個頁面是不需要全部刷新的，網(wǎng)站的頁面也停留在當(dāng)前頁面，那么怎么解決瀏覽器的前進(jìn)后退問題呢，怎么解決需要定位到特定網(wǎng)頁地址的問題呢，所以SPA就引入了路由系統(tǒng)。下面我們看看路由是怎么實現(xiàn)的：

引入路由 用requriejs 引入avalon路由

mmRouter和mmHistory地址：https://github.com/RubyLouvre/mmRouter
用requirejs配置mmRouter和mmHistory在網(wǎng)站中的地址

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

avalon路由代碼

"/sub1/index"為路由地址, 當(dāng)用戶在頁面點擊這個地址的時候，觸發(fā)callback回調(diào)，每個路由可以多帶帶定義一個callback方法。在這個種子工程中，我都調(diào)用了同一個callback方法，就比較適合目錄動態(tài)生成，需要按需調(diào)用不同的頁面的情況。在這里執(zhí)行了callback回調(diào)之后， console.log(this.path)輸出了路徑的地址

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

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

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

    /*avalon路由方法 "/sub1/index"為路由地址, 當(dāng)用戶在頁面點擊這個地址的時候，觸發(fā)callback回調(diào)，
    每個路由可以多帶帶定義一個callback方法。在這個種子工程中，我都調(diào)用了同一個callback方法，就比較適合
    目錄動態(tài)生成，需要按需調(diào)用不同的頁面的情況*/
    avalon.router.get("/sub1/index", callback)
    avalon.router.get("/sub2/index", callback)
    avalon.history.start({
        basepath: "/avalon"
    })
    avalon.scan()
});

html頁面：
結(jié)構(gòu)比較簡單，我們就定義了兩個a 標(biāo)簽，地址前面加上#!, 這個是avalon特有的寫法，angularjs是#




    
    avalon工程
    


    
        
            導(dǎo)航1
        
        
            導(dǎo)航2

執(zhí)行結(jié)果

當(dāng)點擊導(dǎo)航1，或者導(dǎo)航2，分別在瀏覽器控制臺中輸出了/sub1/index和 /sub2/index

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

一個項目都會由好多個子頁面和js組成，就單頁面程序來講，你可以把js進(jìn)行合并，然后按需加載部分子頁面html. 也可以按需加載js和html . 我在這里用的是按需加載js, 再由js中的requirejs text 類庫來加載html文件。

index.html增加子頁面替換標(biāo)簽

在首頁index.html中增加這段代碼

， avalon中ms-include-src是用來加載模板用的




    
    avalon工程
    


    
        
            導(dǎo)航1
        
        
            導(dǎo)航2

修改main.js中導(dǎo)航回調(diào)函數(shù)

    //導(dǎo)航回調(diào)
    function callback() {
        var jspath = "modules"; //這里改成您自己的網(wǎng)站地址 ,這個是js路徑的變量
        var pagepath = "";       //這個是網(wǎng)頁的變量

        //這段代碼的作用是按照路由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

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


    第一個頁面

執(zhí)行結(jié)果

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

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

云服務(wù)器 GPU云服務(wù)器按需加載按需加載javascript webpack按需加載單頁面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78582.html

發(fā)表評論

登陸后可評論

0條評論

fanux

男|高級講師

我要關(guān)注我要私信

TA的文章

2021藍(lán)橋杯你值得擁有

閱讀 2676·2021-11-18 10:02
怎么遠(yuǎn)程登錄云主機-云主機怎么遠(yuǎn)程操作？

閱讀 3446·2021-09-22 15:50
寫在35歲，過去現(xiàn)在和未來

閱讀 2370·2021-09-06 15:02
【靜態(tài)頁面架構(gòu)】CSS之盒子模型

閱讀 3591·2019-08-29 16:34
手機端用rem+scss做適配

閱讀 1754·2019-08-29 13:49
前端面試問題（持續(xù)更新）

閱讀 1285·2019-08-29 13:29
解決ios safari中按鈕圓角問題

閱讀 3650·2019-08-28 18:08
antd源碼解讀（二）Tooltip組件解析

閱讀 2969·2019-08-26 11:52

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

***avalon* 單頁面程序（種子工程）之一用requirejs引入*avalon***

【轉(zhuǎn)】如何從前端工程師到前端架構(gòu)師

**發(fā)布基于 Avalon2 的 UI 組件庫與 SPA 腳手架**

webpack2正式版

webpack+vue項目實戰(zhàn)（三，配置功能操作頁和組件的按需加載）

發(fā)表評論

0條評論

fanux

男|高級講師

TA的文章

2021藍(lán)橋杯你值得擁有

怎么遠(yuǎn)程登錄云主機-云主機怎么遠(yuǎn)程操作？

寫在35歲，過去現(xiàn)在和未來

【靜態(tài)頁面架構(gòu)】CSS之盒子模型

手機端用rem+scss做適配

前端面試問題（持續(xù)更新）

解決ios safari中按鈕圓角問題

antd源碼解讀（二）Tooltip組件解析

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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