前端框架撸起来——根组件

概述

根组件是前端框架的入口，整个应用程序只有一个全局的根组件的实例。根组件可以提供根节点的路由、跳转登录页、退出系统、跳转后台主页、跳转错误页等功能。

组件的定义

根组件的类名定义成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