前端框架撸起来——组件和路由

番茄西红柿发布于2021-11-25 09:43 / 2861人阅读

摘要：如何实现模块化以及写出优雅的代码，接下来就是组件和路由的事情。本框架我们约定组件有三个方法。本框架暂不支持浏览器地址路由，有兴趣的同学可以自己实现。

框架只有一个html文件，html中只有一个id是app的div，如何点击一个按钮或者菜单来显示对应的页面呢？最初大家都是通过拼接html字符串，然后再绑定，这样写很不优雅，当系统功能模块庞大时，这样下来难以维护。如何实现模块化以及写出优雅的代码，接下来就是组件和路由的事情。

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

组件（Component）

组件是庞大系统的一个个小的零件，组件可以进行嵌套。系统有多个页面构成，页面有多个部件组成，页面和部件都可以称之为组件，他们都有共同的属性和方法。本框架我们约定组件有render、mounted、destroy三个方法。

1）组件的定义

function TestPage() {    //这里写组件的私有变量、共有属性和方法、私有方法    var component1 = new Component1();//私有变量component1    var timer;//计时器}

2）呈现方法（render）

//这里是呈现TestPage组件的方法//dom是根节点app，也可以是其他页面中的节点this.render = function(dom) {    $().html(Component1).appendTo(dom);//呈现一个div    component1.render(dom);//呈现嵌套组件component1}

3）挂载方法（mounted）

//这里是加载组件的后端接口数据this.mounted = function() {    component1.loadData();    timer = setInterval(function() {...}, 1000);}

4）销毁方法（destroy）

//这里是销毁组件的资源，例如一个setInterval的对象this.destroy = function() {    clearInterval(timer);}

5）组件完整代码

function TestPage() {    var component1 = new Component1();    var timer;        this.render = function(dom) {        $().html(Component1).appendTo(dom);        component1.render(dom);    }        this.mounted = function() {        component1.loadData();        timer = setInterval(function() {...}, 1000);    }        this.destroy = function() {        clearInterval(timer);    }}

路由（Router）

路由是不同组件之前的转换器，起到组件自由切换的作用。路由可以进行嵌套，即页面是最顶级的组件，渲染在根节点下面，页面内部区块也可以呈现不同的组件。本框架路由只提供两个方法，即导航和回退，其实路由可以扩展更多的方法，如根据name或者模板来路由，这里暂不实现。本框架暂不支持浏览器地址路由，有兴趣的同学可以自己实现。

1）路由的定义

//elem是路由的节点对象//option是路由的配置选项function Router(elem, option) {    //这里写路由的私有变量、共有属性和方法、私有方法    var _current = {};//存储当前路由对象}

2）导航方法（route）

//路由到指定的组件//item为路由对象，必须包含component属性this.route = function(item) {    //呈现前的验证，例如登录验证    if (!_option.before(item))        return;    //销毁当前组件    _destroyComponent();    //设置当前组件    _setCurrent(item);    //执行组件    var component = item.component;    if (component) {        _renderComponent(component);        _mountComponent(item, component);    }}

3）回退方法（back）

//回退到当前路由的上一个路由this.back = function() {    _this.route(_current.previous);}

4）路由完整代码

function Router(elem, option) {    //fields    var _option = option || {},        _elem = elem,        _current = {},        _this = this;    //methods    this.route = function (item) {        if (!_option.before(item))            return;        _destroyComponent();        _setCurrent(item);        var component = item.component;        if (component) {            _renderComponent(component);            _mountComponent(item, component);        }    }    this.back = function () {        _this.route(_current.previous);    }        //private    function _destroyComponent() {        var currComp = _current.component;        currComp && currComp.destroy && currComp.destroy();    }        function _setCurrent(item) {        if (!item.previous) {            item.previous = _current; //存储上一个路由        }        _current = item;    }        function _renderComponent(component) {        if (typeof component === string) {            _elem.html(component);//字符串组件        } else {            _elem.html();//清空节点            component.render(_elem);//呈现组件        }    }        function _mountComponent(item, component) {        setTimeout(function () {            _option.after && _option.after(item);//呈现后回调公共逻辑            component.mounted && component.mounted();//调用后台数据        }, 10);//延时执行，等dom呈现完成后    }}

下一章我们实现框架根组件App。

私有云混合云 js和前端框架的优势路由组件 js 组件框架前端组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/125098.html

手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，...

MonoLog 2019-08-26 13:43 评论0 收藏0
手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，收获了三...

graf 2019-05-21 19:33 评论0 收藏0
手摸手，带你用vue撸后台系列二(登录权限篇)

摘要：我们将登录按钮上绑上事件，点击登录之后向服务端提交账号和密码进行验证。所以前端和后端权限的划分是不太一致。侧边栏最后一个涉及到权限的地方就是侧边栏，不过在前完整项目地址：vue-element-admin 系列文章：手摸手，带你用vue撸后台系列一（基础篇）手摸手，带你用vue撸后台系列二(登录权限篇) 手摸手，带你用vue撸后台系列三 (实战篇) 手摸手，带你用vu...

不知名网友 2019-08-20 16:45 评论0 收藏0