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

fanux 發布于2019-08-19 17:30 / 1303人閱讀

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

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

路由有什么作用呢？

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

引入路由 用requriejs 引入avalon路由

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

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)輸出了路徑的地址

//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是#

執行結果

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

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

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

index.html增加子頁面替換標簽

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

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

修改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

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


    第一個頁面

執行結果

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

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

云服務器 GPU云服務器按需加載按需加載javascript webpack按需加載單頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78582.html

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

摘要：現在微軟終于痛定思痛決定放棄了不支持的安全更新，對我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構建一個單頁面程序介紹以下，是對自己的一個總結，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論謝謝。這篇文章是寫在公司項目結束之后的，因為我個人不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的唯一標準么，用的怎么樣，好不好用，在成熟實踐過的項目上能體...

solocoder 2019-08-19 17:27 評論0 收藏0
【轉】如何從前端工程師到前端架構師

摘要：之前人家寫過的彈出層，富文本編輯器，語法高亮插件你一套也不能少，這樣你才能接觸到之前碰不到的原生與知識點。通過引入雙向綁定與分層架構，完全脫離進行前端開發。原文：http://www.cnblogs.com/rubylouvre/p/3658441.html 作者：司徒正美偶的《javascript框架設計》終于出版歷時兩年多，我的書終于付梓出版了。應各方面的要求，寫軟文一篇...

ShowerSun 2019-08-19 14:40 評論0 收藏0
發布基于 Avalon2 的 UI 組件庫與 SPA 腳手架

摘要：使用前端框架開發信息管理系統有三年了，最近半年花了些心血將這三年的積累凝聚起來，誕生了兩個開源項目和。，中文名安逸，是基于的端組件庫。有用于數據展示的組件用于數據提交的組件用于消息提示的與組件組件和用戶輸入組件等，并且還在不斷完善中。使用 Avalon 前端框架開發信息管理系統有三年了，最近半年花了些心血將這三年的積累凝聚起來，誕生了兩個開源項目 ms-bus 和 ane。 ms-b...

Sike 2019-08-21 15:52 評論0 收藏0
webpack2正式版

摘要：正式版正式版，簡單方便的構建單頁和多頁用用。下一步是完善單元測試，代碼覆蓋率報告如果大家有更好的想法及建議請提。開啟測試并生成覆蓋率報告。頁面的其他資源文件，通過引入單元測試日后調整，待開發樣式使用可添加替換預處理。 webpack2正式版 webpack2正式版，簡單方便的構建單頁和多頁用用。（啟用tree-shaking新技術）地址：avalon-webpack-start 這個啟...

WilsonLiu95 2019-08-21 15:06 評論0 收藏0
webpack+vue項目實戰（三，配置功能操作頁和組件的按需加載）

摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。 1.前言上篇文章（webpack+vue項目實戰（二，開發管理系統主頁面）），實現了，側邊欄的一個操作，點擊側邊欄的一些操作，最重要的就是路由的切換。看了上一篇的伙伴也不難發現，除了點擊側邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 評論0 收藏0