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

known發表於2021-11-25
前端框架元件

概述

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

元件的定義

根元件的類名定義成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: https://gitee.com/known/kui
Github: https://github.com/known/kui

相關文章