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

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

相關文章