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

2021-11-25 21:31:08 阅读：185 来源： 互联网

标签：function 框架登录前端 component item 组件路由

概述

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

组件的定义

根组件的类名定义成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() });//导航到后台首页组件
}

调用该方法可以跳转到登录页面。

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

标签：function,框架,登录,前端,component,item,组件,路由
来源： https://www.cnblogs.com/known/p/15604957.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9