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

还不快来试试我的？Q.js是一个炒鸡轻量的前端单页路由框架。轻量、快速、极简https://github.com/itorr/q.js　为了更好的利用缓存以及更少的后端支援，Q.js放弃了HTML5State，通过#!格式的urlhach重现了url路由功能。无JavaScript库依托，可随意搭配使用源代码不及百行压缩后834byte支持IE6+ChromeSafariFF未做情况判定，使用Q.js必然会注册window.Q万物之死始我们先来一段简单的HelloWorldhtmlQ.reg('home',function(){document.getElementById('m').innerHTML='HalloWorld';});Q.init({index:'home'/*首页地址*/});打开例子后，浏览器会从http://simple.com/跳转到http://simple.com/#!home，并且在页面显示HalloWorld。如此，您的第一个通过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中体现文章唯一IDQ.js关键字模式时，参数之间通过/分割，请根据顺序进行URL规划javascriptQ.reg('article',function(aid){if(!aid)returnalert('传入参数不正确，请确认您访问的地址。');console.log('打开了文章，文章唯一ID为:'+aid);/*JavaScript代码*/});注册之后访问页面#!article/123即可触发article页面回调，并传入参数1"123"Q.js不判断传入数据类型，请务必在回调中确认数据格式翻页可文章页传值方式基本一致，在这里不重述分类页分类页其实和文章页很相似、只是参数一变成了分类名称，内容较多时需要传递下当前页码分类页有一个固定的格式需要在URL中体现分类唯一名称可能会有页码信息依据上面的要求，我们依旧使用关键字注册模式，注册一个名为category的url预设两个参数分类唯一名称cstr，页码pagejavascriptQ.reg('category',function(cstr,page){if(!cid)returnalert('传入参数不正确，请确认您访问的地址。');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首页关于友情链接CSS一般是这样的CSSnav{line-height:2em;}nava{display:inline-block;vertical-align:top;padding:0.5em;}nava.active{background:#369;color:#FFF;}这时候我们需要在每次URL变更时，通过JavaScript动态修改nav中的activeclass的位置，以修改样式。javascript/*这段伪代码依托iTorr.js仅作参考*/varnavchange=function(L){/*每次有url变更时都会触发pop回调*//*L为当前回调函数名称（目前仅支持关键字回调情况）*/vara;//临时变量if(a=$('nava.active'))//如果存在这个DOMa.className='';//修改它的ClassNameif(a=$('nava[href="#!'+L+'"]'))//如果存在这个DOMa.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.popjavascriptQ.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代码分类以上。

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

2回答