微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 好用的route hashchange 类似history.js 思路

黄舟 2017-04-10 14:32:06

[JavaScript讨论组]

882

要做类似 https://github.com/jgallen23/routie 的功能，单页app
就是需要处理前进后退和view的route[需要兼容ie6]
http://millermedeiros.github.io/crossroads.js/
https://github.com/asual/jquery-address
https://github.com/cowboy/jquery-bbq 好久没更新了
https://github.com/browserstate/history.js 好复杂的感觉

记得几年前自己做的一个项目是监听hash来实现的，现在再次遇到这个需求
找了一下，发现还是之前的库[crossroads,bbq],history.js居然 2000多行还不支持Opera 11 ，Mercury iOS

想问大家推荐一些好用的route的思路，以及为啥一个前端url监听搞的这么复杂，这么多年过去了居然没有相对清晰好用的方案

难道非要逼我抄一个 https://github.com/RubyLouvre/mmRouter/ 吗
[每次遇到这样的解决方案问题，发现司徒大的东西还是很实用滴~~]

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(2)

怪我咯2017-04-10 14:34:06 2楼

还不快来试试我的？

Q.js 是一个炒鸡轻量的前端单页路由框架。

轻量、快速、极简

https://github.com/itorr/q.js

　为了更好的利用缓存以及更少的后端支援，Q.js放弃了 HTML5 State，通过#!格式的 url hach 重现了 url 路由功能。

无 JavaScript 库依托，可随意搭配使用
源代码不及百行压缩后 834byte
支持 IE6+ Chrome Safari FF
未做情况判定，使用 Q.js 必然会注册 window.Q

万物之死始

我们先来一段简单的 Hello World

html<!DOCTYPE html>
<meta charset="UTF-8">



<p id="m"></p>



<script src="q.js"></script>


<script>
Q.reg('home',function(){
    document.getElementById('m').innerHTML='Hallo World';
});

Q.init({
    index:'home'/* 首页地址 */
});
</script>

打开例子后，浏览器会从 http://simple.com/ 跳转到 http://simple.com/#!home ，并且在页面显示 Hallo World。

如此，您的第一个通过 Q.js 实现的 URL 路由就工作了~
接着我们再详细说明下，如何让 Q.js 工作的。

注册URL

在 Q.js 中，提供关键字和正则表达式两种注册 URL 方式。
关键字注册 URL 在 Q.js 中效率最高、但需要按照关键字模式规划 URL，在前者不能满足需求情况下可以使用正则注册法~

使用正则表达式注册URL可能会不同程度的增加运行时间（极不明显），在允许的情况下请优先使用关键字注册 URL~

接下来我们通过规划一个 blog 的URL，来学习如何使用 Q.js 注册URL。

首页

我们先从首页开始~

在注册之前我们分析一下注册首页 URL 都有哪些需求：
1. 首先首页有一个固定格式
2. 在大部分情况下不需要在 URL 中体现参数传递
3. 是打开域名时的默认展示页

首先我们通过注册一个固定页面 home ，回调不期待传值

javascriptQ.reg('home',function(){
    console.log('打开了首页');
    /* JavaScript 代码 */
});

通过以上代码访问 #!home 时，就会触发后面的回调。

在回调中我们修改页面 DOM 实现页面无刷新变换内容。
（这部分不在本篇文档所述范畴）

按照这样的方法，同理我们也可以实现类似关于 #!about、友情链接 #!friend 等等页面的注册。

实现了首页的 URL 注册之后，我们要在打开网页时默认跳转到 home 页。

Q.js 的启动，由 Q.init 函数实现。=

javascriptQ.init({
    index:'home'/* 首页地址 如果访问到不能访问页面也会跳回此页 */
});

在 init 的启动参数里面附带 index 参数，这样我们访问页面时就会默认打开 #!home

如果觉得 #!home 中的 ! 不符合预期，这…也是可以改的~

javascriptQ.init({
    key:'^_^', /* url里#和url名之间的分割符号 默认为感叹号 */
    index:'home' /* 首页地址 不可访问路径也会跳回此地址 */
});

可以通过任意符合 URI 规范的字符串分割，甚至也可以设置为空。

设置为空时，Google等现代搜索引擎可能无法按照路由地址实现索引。请谨慎设置

文章页和翻页

文章页和首页不太一样、只有URL的一部分是相同的，需要通过URL中的不同部分区分不同文章页，不是默认打开页。

文章页有一个固定的格式
需要在URL中体现文章唯一ID

Q.js 关键字模式时，参数之间通过 / 分割，请根据顺序进行 URL 规划

javascriptQ.reg('article',function(aid){
    if(!aid)
        return alert('传入参数不正确，请确认您访问的地址。');

    console.log('打开了文章，文章唯一ID为:'+aid);
    /* JavaScript 代码 */
});

注册之后访问页面 #!article/123 即可触发 article 页面回调，并传入参数1 "123"

Q.js 不判断传入数据类型，请务必在回调中确认数据格式

翻页可文章页传值方式基本一致，在这里不重述

分类页

分类页其实和文章页很相似、只是参数一变成了分类名称，内容较多时需要传递下当前页码

分类页有一个固定的格式
需要在URL中体现分类唯一名称
可能会有页码信息

依据上面的要求，我们依旧使用关键字注册模式，注册一个名为 category 的 url 预设两个参数分类唯一名称 cstr ，页码 page

javascriptQ.reg('category',function(cstr,page){
    if(!cid)
        return alert('传入参数不正确，请确认您访问的地址。');

    if(!page)/* 如果 */
        page=1;

    console.log('打开了分类页面，分类名称是: '+cstr);
    console.log('当前页面：'+page);

    /* 下面这段伪代码依托iTorr.js 仅作参考 */
    /* 根据分类唯一名称和页码发起 AJAX 请求 */
    $.x('/api/category/'+cstr+'/page/'+page,function(d){
        console.log(d);
        /* 在这里修改页面DOM */
    });
});

访问 #!category/photo 会传入 photo 到 category 的回调函数
访问 #!category/photo/2 会传入 photo 和 2 到 category 的回调函数

参数二不存在时，需要在回调函数内进行处理~

导航条

有了这些 URL 之后，我们还需要一个导航条来提供页面之间的入口，
导航条需要在每次页面变更时修改导航条样式，指示当前打开的页面。

我们的 HTML 一般是这样的

html<nav>
    <a href="#!home" class="active">首页</a>
    <a href="#!about">关于</a>
    <a href="#!friend">友情链接</a>
</nav>

CSS 一般是这样的

CSSnav{line-height:2em;}
nav a{display:inline-block;vertical-align:top;padding:0 .5em;}
nav a.active{background:#369;color:#FFF;}

这时候我们需要在每次 URL 变更时，通过 JavaScript 动态修改 nav 中的 active class 的位置，以修改样式。

javascript/* 这段伪代码依托iTorr.js 仅作参考 */
var navchange=function(L){/* 每次有url变更时都会触发pop回调 */
    /* L 为当前回调函数名称（目前仅支持关键字回调情况） */

    var a;//临时变量
    if(a=$('nav a.active')) //如果存在这个DOM 
        a.className=''; //修改它的ClassName
    if(a=$('nav a[href="#!'+L+'"]')) //如果存在这个DOM 
        a.className='active';//修改它的ClassName
};

Q.js 提供了 Q.pop 事件，可以通过注册 Q.pop 实现在每次 URL 变更时发生回调， Q.pop 事件和其他 URL 事件不发生冲突，并在其他 URL 回调函数之前运行，请注意触发时机。

注册和修改 Q.pop 有多种途径。可以放在启动函数中注册，比如：

javascriptQ.init({
    /* ...各种其他参数... */
    pop:navchange //注册 pop 函数
});

也可以通过关键字注册

javascriptQ.reg('pop',navchange);

甚至可以直接修改 Q.pop

javascriptQ.pop=navchange

请注意，使用 Q.js 请避免使用 Q.js 保留关键字为 URL 地址
保留关键字包括：reg,pop,go,V

到这里，我们的简单的博客差不多就能用啦~

还剩下一个正则注册 URL 没有说，正则注册在关键字判定前进行判定，不论注册前后，请注意判定顺序。所以也因为这样，我们关键字判定中的关键字部分可以用正则表达式注册法替代。

但是如果我们依旧想用保留关键字，用正则注册法是这样实现的

javascriptQ.reg(/pop/,function(){
    console.log('pop事件');
});

正则注册法需要在正则里指定可能传入的值

以上我们的博客URL规划基本就已经完成啦~

如何实现更加丰富的 url 格式

关键字注册法虽然方便，但仅仅支持关键字/参数1/参数2/参数3 这种格式，想要实现更多不科学的 URL 格式，可以通过正则注册法~
比如视频网站的链接，由v开头后面跟数字ID的情况，预期必然会有参数一并且为数字

javascriptQ.reg(/v(\d+)/,function(vid){
    console.log('pop事件 参数一：'+vid);
});

这样访问 http://simple.com/#!v1234567 就会传递值 1234567 给回调函数。

我想在 JavaScript 里知道当前在哪个页面如何实现？

访问 Q.lash 变量即可返回当前页面关键字

Q.lash 目前仅可返回关键字注册的 URL，预计会在下次版本更新时增加正则支持。

如何通过JavaScript跳转到特定链接

因为在 Q.js 中！关键字是可以被修改的，如果通过JavaScript实现URL跳转，可以调用 q.go 函数

JavaScriptQ.go('category/code');

当然，大部分情况我们推荐使用 HTML 原生的 a 标签 link 通过访客触发，进行跳转

HTML<a href="#!category/code">代码分类</a>

以上。

赞 +0

添加回复

伊谢尔伦2017-04-10 14:34:06 1楼

貌似实现不了追加拼接的URL。

比如：分类有多个的情况。

catgory1=a catgory2=b catgory3=c

能变成这样吗？
view?catgory1=a&catgory2=b&catgory3=c

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>