前端框架撸起来——根组件
概述
【前端框架撸起来——根组件】根组件是前端框架的入口,整个应用程序只有一个全局的根组件的实例。根组件可以提供根节点的路由、跳转登录页、退出系统、跳转后台主页、跳转错误页等功能。
组件的定义
根组件的类名定义成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
推荐阅读
- android第三方框架(五)ButterKnife
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Jsr303做前端数据校验
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- Spring|Spring 框架之 AOP 原理剖析已经出炉!!!预定的童鞋可以识别下发二维码去看了
- 构建App(一)(框架与结构)
- laravel框架泛解
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01