前端框架擼起來——根組件

• 2021 年 11 月 25 日
• 筆記
• 04 Web技術, 13 HTML5, 16 Javascript

概述

根組件是前端框架的入口，整個應用程式只有一個全局的根組件的實例。根組件可以提供根節點的路由、跳轉登錄頁、退出系統、跳轉後台主頁、跳轉錯誤頁等功能。

組件的定義

根組件的類名定義成App，有兩個參數：id和config。

//id     為應用的根節點的id，即index.html文件中div的id
//config 為應用的全局配置對象
function App(id, config) {
    var _elem = $('#' + id);//根節點
}

創建路由

這裡我們創建應用程式根節點的路由對象，在路由導航之前，我們可以在路由的 before 中添加登錄驗證，在路由 after 中添加組件渲染後的共用邏輯。在組件路由之前，我們要將系統登錄的用戶資訊傳遞給每個組件，供組件內部直接訪問。

var _router = new Router(_elem, {
    before: function (item) {
        var component = item.component;
        //如果組件不是Login且組件用戶不存在，則跳轉到登錄組件
        if (!(component instanceof Login) && !component.user) {
            _showLogin();
            return false;
        }
        return true;
    },
    after: function (item) {
        //這裡是組件渲染後的共用邏輯，例如一些jQuery插件的初始化寫在此處
    }
});

//下面是路由方法
function _route(item) {
    //給路由組件增加user屬性，取當前登錄用戶
    item.component.user = _getUser();
    _router.route(item);
}

後台首頁（admin）

這個方法是登錄組件登錄成功後，可通過根組件實例調用此方法顯示後台首頁。

//user 為登錄用戶資訊
this.admin = function (user) {
    _setUser(user);//存儲當前登錄用戶
    _route({ component: new Admin() });//導航到後台首頁組件
}

登錄系統（login）

調用該方法可以跳轉到登錄頁面。

this.login = function () {
    _route({ component: new Login(config) });//導航到登錄組件
}

退出系統（logout）

調用該方法，將清除用戶資訊並導航到登錄頁面。

this.logout = function () {
    _setUser(null);//清除用戶資訊
    _showLogin();//顯示登錄頁面
}

根節點的實例

一個應用程式只需要實例化一次根組件App，可以通過config參數注入框架中需要實現個性化需求的功能，例如配置應用程式的名稱，資源文件的路徑等等。

var app = new App('app', {
    AppName: 'Known UI',
    ImagePath: '/static/imgs'
});

下一章我們實現框架的登錄組件Login。

Gitee: //gitee.com/known/kui
Github: //github.com/known/kui