简易的前端路由实现

zeyu 发布于2019-08-20 10:33 / 1495人阅读

摘要：前言在前端单页面应用里面路由是比较重要的部分现有的路由系统从简易的到等内置路由，功能一步步增强。那么这些系统原理是什么呢本文将分析并实现一份简易的路由以阐述其工作原理。

前言

在前端单页面应用里面,路由是比较重要的部分,现有的路由系统从简易的director.js到backbone,react等内置路由，功能一步步增强。那么这些系统原理是什么呢,本文将分析并实现一份简易的路由,以阐述其工作原理。

简易路由实现

以hash做示范，其运行机制如下:

储存hash与对应的回调函数,以key,value的形式存入对象cache中

设置监听函数onhashchange监听url的hash变化

一旦hash变化，则遍历cache对象,将属性key做正则处理,生成对应的正则,再将其拿去和hash做正则匹配,匹配到后执行相应的value/回调函数

回调函数中执行渲染ui的代码,进而更新页面

router.js

    function Router() {
    this.cache = {};
    //将url/callback 以key/value形式储存在cache内
    this.on = function (key, value) {
        var cache = this.cache;
        cache[key] = value;
    };
    //匹配hash对应的回调函数,并触发
    this.trigger = function (hash) {
        var cache = this.cache;
        for (var r in cache) {
            var reg = this.initRegexps(r);
            if (reg.test(hash)) {
                var callback = cache[r] || function () {
                    };
                var params = this.getParams(reg, hash);
                callback.apply(this, params);
            }
        }

    };
    //初始化 添加监听浏览器hashchange 以及dom loaded函数
    this.init = function () {
        window.addEventListener("hashchange", function () {
            var hash = location.hash.slice(1);
            router.trigger(hash);
        });
        window.addEventListener("load", function () {
            var hash = location.hash.slice(1) || "default";
            router.trigger(hash);
        })
    };
    /**
     *将cache内的key 做正则处理,并返回
     * 第一个正则 匹配诸如/,.+-?$#{}[]] 关键字  并在关键字前面加转译字符
     * 第二个正则 匹配() 标示()内部内容可有可无
     * 第三个正则 匹配: 在/后面可以由接受任意字符,直到遇到下一个/
     * 第四个正则 匹配* 在*后面可以由接受任意字符
     */
    this.initRegexps = function (route) {
        route = route.replace(/[/,.+-?$#{}[]]/g, "$&")
            .replace(/((.*?))/g, "(?:$1)?")
            .replace(/(/w?:w+)+/g, "/([^/]+)")
            .replace(/*w*/g, "([^?]*?)");

        return new RegExp("^" + route + "$");
    };

    //将匹配的正则返回,为回调函数提供参数
    this.getParams = function (reg, hash) {
        return reg.exec(hash).slice(1);
    }
}

index.html




    hash=aaaa/bcd 匹配/aaaa/:id


    hash=bbbb 匹配/bbbb(/:name)


    hash=bbbb/ffffd 匹配/bbbb(/:name)


    hash=cccc/s/d 匹配cccc/*

代码地址

点击查看本文完整代码

效果图

流程图

归纳

虽然本文实现比较简单，但很多框架的内部路由也是基于这种机制，只不过有基于对自身的特性做了一些优化。

最后

本文有什么不完善的地方,或者流程图有待改进的地方,敬请斧正。

云服务器 GPU云服务器 js简易留言板实现前端路由 js前端路由 url路由实现

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

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

简易Node中间层【只作为中间层】

摘要：方案选择基础框架请求服务代理转发其余日志处理，路由，后端模板引擎，异步语法自己选择了。初衷：我并不想改变团队原有开发模式，前端负责展现和界面路由，后端单纯负责API;要解决的问题：1.服务端渲染（部分界面【商品界面】需要使用服务器端渲染，但是管理类型界面并不需要服务器端渲染）；2.由于问题1的出现，所以我们需要服务器端渲染，需要控制路由，需要部分界面使用后端模板引擎。3.当然我不想写...

CntChen 2019-08-20 14:03 评论0 收藏0
vue+socket.io+express+mongodb 实现简易多房间在线群聊

摘要：项目简介主要是通过做一个多人在线多房间群聊的小项目来练手全栈技术的结合运用。编译运行开启服务，新建命令行窗口启动服务端，新建命令行窗口启动前端页面然后在浏览器多个窗口打开，注册不同账号并登录即可进行多用户多房间在线聊天。项目简介主要是通过做一个多人在线多房间群聊的小项目、来练手全栈技术的结合运用。项目源码：chat-vue-node 主要技术： vue2全家桶 + socket....

android_c 2019-06-26 17:25 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0