当前位置 博文首页 > 文章内容

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

    作者:21344 栏目:未分类 时间:2021-11-25 22:07:26

    概述

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

    组件的定义

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

    bkbky