前端框架撸起来——根组件(Front end frame rolled up – root assembly)

概述

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

组件的定义

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

————————

summary

The root component is the entrance of the front-end framework. The whole application has only one global instance of the root component. The root component can provide functions such as routing of the root node, jump to the login page, exit the system, jump to the background home page, jump to the error page, etc.

Definition of components

The class name of the root component is defined as app and has two parameters: ID and config.

//id     为应用的根节点的id,即index.html文件中div的id
//config 为应用的全局配置对象
function App(id, config) {
    var _elem = $('#' + id);//根节点
}

Create route

Here, we create the routing object of the application root node. Before routing navigation, we can add login verification in the before of the route and add the common logic after component rendering in the after of the route. Before component routing, we need to pass the user information logged in by the system to each component for direct access within the component.

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);
}

Background homepage (admin)

This method is to call this method through the root component instance to display the background home page after the login component is successfully logged in.

//user 为登录用户信息
this.admin = function (user) {
    _setUser(user);//存储当前登录用户
    _route({ component: new Admin() });//导航到后台首页组件
}

Login

Call this method to jump to the login page.

this.login = function () {
    _route({ component: new Login(config) });//导航到登录组件
}

Logout

Calling this method will clear the user information and navigate to the login page.

this.logout = function () {
    _setUser(null);//清除用户信息
    _showLogin();//显示登录页面
}

Instance of root node

An application only needs to instantiate the root component app once. It can inject the functions that need to realize personalized requirements in the framework through the config parameter, such as configuring the name of the application, the path of the resource file, etc.

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

In the next chapter, we implement the login component login of the framework.

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