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

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

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

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

路由有什么作用呢？

路由其實(shí)可以理解成網(wǎng)站上不同的網(wǎng)頁(yè)地址，如果不是SPA的網(wǎng)站，瀏覽器的前進(jìn)后退，鏈接到了一個(gè)新的頁(yè)面，整個(gè)頁(yè)面重新刷新；但如果是SPA網(wǎng)站，因?yàn)檎麄€(gè)頁(yè)面是不需要全部刷新的，網(wǎng)站的頁(yè)面也停留在當(dāng)前頁(yè)面，那么怎么解決瀏覽器的前進(jìn)后退問(wèn)題呢，怎么解決需要定位到特定網(wǎng)頁(yè)地址的問(wèn)題呢，所以SPA就引入了路由系統(tǒng)。下面我們看看路由是怎么實(shí)現(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)用戶在頁(yè)面點(diǎn)擊這個(gè)地址的時(shí)候，觸發(fā)callback回調(diào)，每個(gè)路由可以多帶帶定義一個(gè)callback方法。在這個(gè)種子工程中，我都調(diào)用了同一個(gè)callback方法，就比較適合目錄動(dòng)態(tài)生成，需要按需調(diào)用不同的頁(yè)面的情況。在這里執(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)用戶在頁(yè)面點(diǎn)擊這個(gè)地址的時(shí)候，觸發(fā)callback回調(diào)，
    每個(gè)路由可以多帶帶定義一個(gè)callback方法。在這個(gè)種子工程中，我都調(diào)用了同一個(gè)callback方法，就比較適合
    目錄動(dòng)態(tài)生成，需要按需調(diào)用不同的頁(yè)面的情況*/
    avalon.router.get("/sub1/index", callback)
    avalon.router.get("/sub2/index", callback)
    avalon.history.start({
        basepath: "/avalon"
    })
    avalon.scan()
});

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




    
    avalon工程
    


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

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

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

按需加載js和子頁(yè)面html模板

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

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

在首頁(yè)index.html中增加這段代碼

， avalon中ms-include-src是用來(lái)加載模板用的




    
    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)站地址 ,這個(gè)是js路徑的變量
        var pagepath = "";       //這個(gè)是網(wǎng)頁(yè)的變量

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


    第一個(gè)頁(yè)面

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78582.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fanux

男|高級(jí)講師

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

TA的文章

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

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

閱讀 3526·2021-09-22 15:50
寫(xiě)在35歲，過(guò)去現(xiàn)在和未來(lái)

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

閱讀 3643·2019-08-29 16:34
手機(jī)端用rem+scss做適配

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

閱讀 1345·2019-08-29 13:29
解決ios safari中按鈕圓角問(wèn)題

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

webpack2正式版

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

發(fā)表評(píng)論

0條評(píng)論

fanux

男|高級(jí)講師

TA的文章

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

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

寫(xiě)在35歲，過(guò)去現(xiàn)在和未來(lái)

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

手機(jī)端用rem+scss做適配

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

解決ios safari中按鈕圓角問(wèn)題

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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

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