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

概述 【前端框架撸起来——根组件】根组件是前端框架的入口，整个应用程序只有一个全局的根组件的实例。根组件可以提供根节点的路由、跳转登录页、退出系统、跳转后台主页、跳转错误页等功能。
组件的定义根组件的类名定义成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）这个方法是登录组件登录成功后，可通过根组件实例调用此方法显示后台首页。