湖上湖
TA貢獻2003條經(jīng)驗 獲得超2個贊
還不快來試試我的？Q.js是一個炒雞輕量的前端單頁路由框架。輕量、快速、極簡https://github.com/itorr/q.js 為了更好的利用緩存以及更少的后端支援，Q.js放棄了HTML5State，通過#!格式的urlhach重現(xiàn)了url路由功能。無JavaScript庫依托，可隨意搭配使用源代碼不及百行壓縮后834byte支持IE6+ChromeSafariFF未做情況判定，使用Q.js必然會注冊window.Q萬物之死始我們先來一段簡單的HelloWorldhtml
打開例子后，瀏覽器會從http://simple.com/跳轉(zhuǎn)到http://simple.com/#!home，并且在頁面顯示HalloWorld。如此，您的第一個通過Q.js實現(xiàn)的URL路由就工作了~接著我們再詳細說明下，如何讓Q.js工作的。注冊URL在Q.js中，提供關鍵字和正則表達式兩種注冊URL方式。關鍵字注冊URL在Q.js中效率最高、但需要按照關鍵字模式規(guī)劃URL，在前者不能滿足需求情況下可以使用正則注冊法~使用正則表達式注冊URL可能會不同程度的增加運行時間（極不明顯），在允許的情況下請優(yōu)先使用關鍵字注冊URL~接下來我們通過規(guī)劃一個blog的URL，來學習如何使用Q.js注冊URL。首頁我們先從首頁開始~在注冊之前我們分析一下注冊首頁URL都有哪些需求：1.首先首頁有一個固定格式2.在大部分情況下不需要在URL中體現(xiàn)參數(shù)傳遞3.是打開域名時的默認展示頁首先我們通過注冊一個固定頁面home，回調(diào)不期待傳值javascriptQ.reg('home',function(){console.log('打開了首頁');/*JavaScript代碼*/});通過以上代碼訪問#!home時，就會觸發(fā)后面的回調(diào)。在回調(diào)中我們修改頁面DOM實現(xiàn)頁面無刷新變換內(nèi)容。（這部分不在本篇文檔所述范疇）按照這樣的方法，同理我們也可以實現(xiàn)類似關于#!about、友情鏈接#!friend等等頁面的注冊。實現(xiàn)了首頁的URL注冊之后，我們要在打開網(wǎng)頁時默認跳轉(zhuǎn)到home頁。Q.js的啟動，由Q.init函數(shù)實現(xiàn)。=javascriptQ.init({index:'home'/*首頁地址如果訪問到不能訪問頁面也會跳回此頁*/});在init的啟動參數(shù)里面附帶index參數(shù)，這樣我們訪問頁面時就會默認打開#!home如果覺得#!home中的!不符合預期，這…也是可以改的~javascriptQ.init({key:'^_^',/*url里#和url名之間的分割符號默認為感嘆號*/index:'home'/*首頁地址不可訪問路徑也會跳回此地址*/});可以通過任意符合URI規(guī)范的字符串分割，甚至也可以設置為空。設置為空時，Google等現(xiàn)代搜索引擎可能無法按照路由地址實現(xiàn)索引。請謹慎設置文章頁和翻頁文章頁和首頁不太一樣、只有URL的一部分是相同的，需要通過URL中的不同部分區(qū)分不同文章頁，不是默認打開頁。文章頁有一個固定的格式需要在URL中體現(xiàn)文章唯一IDQ.js關鍵字模式時，參數(shù)之間通過/分割，請根據(jù)順序進行URL規(guī)劃javascriptQ.reg('article',function(aid){if(!aid)returnalert('傳入?yún)?shù)不正確，請確認您訪問的地址。');console.log('打開了文章，文章唯一ID為:'+aid);/*JavaScript代碼*/});注冊之后訪問頁面#!article/123即可觸發(fā)article頁面回調(diào)，并傳入?yún)?shù)1"123"Q.js不判斷傳入數(shù)據(jù)類型，請務必在回調(diào)中確認數(shù)據(jù)格式翻頁可文章頁傳值方式基本一致，在這里不重述分類頁分類頁其實和文章頁很相似、只是參數(shù)一變成了分類名稱，內(nèi)容較多時需要傳遞下當前頁碼分類頁有一個固定的格式需要在URL中體現(xiàn)分類唯一名稱可能會有頁碼信息依據(jù)上面的要求，我們依舊使用關鍵字注冊模式，注冊一個名為category的url預設兩個參數(shù)分類唯一名稱cstr，頁碼pagejavascriptQ.reg('category',function(cstr,page){if(!cid)returnalert('傳入?yún)?shù)不正確，請確認您訪問的地址。');if(!page)/*如果*/page=1;console.log('打開了分類頁面，分類名稱是:'+cstr);console.log('當前頁面：'+page);/*下面這段偽代碼依托iTorr.js僅作參考*//*根據(jù)分類唯一名稱和頁碼發(fā)起AJAX請求*/$.x('/api/category/'+cstr+'/page/'+page,function(d){console.log(d);/*在這里修改頁面DOM*/});});訪問#!category/photo會傳入photo到category的回調(diào)函數(shù)訪問#!category/photo/2會傳入photo和2到category的回調(diào)函數(shù)參數(shù)二不存在時，需要在回調(diào)函數(shù)內(nèi)進行處理~導航條有了這些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動態(tài)修改nav中的activeclass的位置，以修改樣式。javascript/*這段偽代碼依托iTorr.js僅作參考*/varnavchange=function(L){/*每次有url變更時都會觸發(fā)pop回調(diào)*//*L為當前回調(diào)函數(shù)名稱（目前僅支持關鍵字回調(diào)情況）*/vara;//臨時變量if(a=$('nava.active'))//如果存在這個DOMa.className='';//修改它的ClassNameif(a=$('nava[href="#!'+L+'"]'))//如果存在這個DOMa.className='active';//修改它的ClassName};Q.js提供了Q.pop事件，可以通過注冊Q.pop實現(xiàn)在每次URL變更時發(fā)生回調(diào)，Q.pop事件和其他URL事件不發(fā)生沖突，并在其他URL回調(diào)函數(shù)之前運行，請注意觸發(fā)時機。注冊和修改Q.pop有多種途徑?？梢苑旁趩雍瘮?shù)中注冊，比如：javascriptQ.init({/*...各種其他參數(shù)...*/pop:navchange//注冊pop函數(shù)});也可以通過關鍵字注冊javascriptQ.reg('pop',navchange);甚至可以直接修改Q.popjavascriptQ.pop=navchange請注意，使用Q.js請避免使用Q.js保留關鍵字為URL地址保留關鍵字包括：reg,pop,go,V到這里，我們的簡單的博客差不多就能用啦~還剩下一個正則注冊URL沒有說，正則注冊在關鍵字判定前進行判定，不論注冊前后，請注意判定順序。所以也因為這樣，我們關鍵字判定中的關鍵字部分可以用正則表達式注冊法替代。但是如果我們依舊想用保留關鍵字，用正則注冊法是這樣實現(xiàn)的javascriptQ.reg(/pop/,function(){console.log('pop事件');});正則注冊法需要在正則里指定可能傳入的值以上我們的博客URL規(guī)劃基本就已經(jīng)完成啦~如何實現(xiàn)更加豐富的url格式關鍵字注冊法雖然方便，但僅僅支持關鍵字/參數(shù)1/參數(shù)2/參數(shù)3這種格式，想要實現(xiàn)更多不科學的URL格式，可以通過正則注冊法~比如視頻網(wǎng)站的鏈接，由v開頭后面跟數(shù)字ID的情況，預期必然會有參數(shù)一并且為數(shù)字javascriptQ.reg(/v(\d+)/,function(vid){console.log('pop事件參數(shù)一：'+vid);});這樣訪問http://simple.com/#!v1234567就會傳遞值1234567給回調(diào)函數(shù)。我想在JavaScript里知道當前在哪個頁面如何實現(xiàn)？訪問Q.lash變量即可返回當前頁面關鍵字Q.lash目前僅可返回關鍵字注冊的URL，預計會在下次版本更新時增加正則支持。如何通過JavaScript跳轉(zhuǎn)到特定鏈接因為在Q.js中！關鍵字是可以被修改的，如果通過JavaScript實現(xiàn)URL跳轉(zhuǎn)，可以調(diào)用q.go函數(shù)JavaScriptQ.go('category/code');當然，大部分情況我們推薦使用HTML原生的a標簽link通過訪客觸發(fā)，進行跳轉(zhuǎn)HTML代碼分類以上。
