要做类似https://github.com/jgallen23/routie的功能,单页app就是需要处理前进后退和view的route[需要兼容ie6]http://millermedeiros.github.io/crossroads.js/https://github.com/asual/jquery-addresshttps://github.com/cowboy/jquery-bbq好久没更新了https://github.com/browserstate/history.js好复杂的感觉记得几年前自己做的一个项目是监听hash来实现的,现在再次遇到这个需求找了一下,发现还是之前的库[crossroads,bbq],history.js居然2000多行还不支持Opera11,MercuryiOS想问大家推荐一些好用的route的思路,以及为啥一个前端url监听搞的这么复杂,这么多年过去了居然没有相对清晰好用的方案难道非要逼我抄一个https://github.com/RubyLouvre/mmRouter/吗[每次遇到这样的解决方案问题,发现司徒大的东西还是很实用滴~~]
2 回答
湖上湖
TA贡献2003条经验 获得超2个赞
还不快来试试我的?Q.js是一个炒鸡轻量的前端单页路由框架。轻量、快速、极简https://github.com/itorr/q.js为了更好的利用缓存以及更少的后端支援,Q.js放弃了HTML5State,通过#!格式的urlhach重现了url路由功能。无JavaScript库依托,可随意搭配使用源代码不及百行压缩后834byte支持IE6+ChromeSafariFF未做情况判定,使用Q.js必然会注册window.Q万物之死始我们先来一段简单的HelloWorldhtml
打开例子后,浏览器会从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一般是这样的htmlCSS一般是这样的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代码分类 以上。
月关宝盒
TA贡献1772条经验 获得超5个赞
貌似实现不了追加拼接的URL。比如:分类有多个的情况。catgory1=acatgory2=bcatgory3=c能变成这样吗?view?catgory1=a&catgory2=b&catgory3=c