你應(yīng)該花一些時(shí)間來設(shè)計(jì)一下你的URL地址結(jié)構(gòu)。在讀完本文之后，如果有一件事情是我希望你記住的話，那就是花一些時(shí)間來設(shè)計(jì)你的URL地址的結(jié)構(gòu)。不要把它留給你的框架來決定，不要聽天由命，依賴運(yùn)氣。要仔細(xì)地考慮，認(rèn)真摸索出一種經(jīng)驗(yàn)。

URL的設(shè)計(jì)是一個(gè)很復(fù)雜的問題，我不能說有什么“正確”的解決方案——其挺類似于其他方面的設(shè)計(jì)的，有好的URL設(shè)計(jì)，有糟糕的URL設(shè)計(jì)，在這兩者之間的情況也個(gè)個(gè)不同——它是主觀的。

不過這并不意味著不存在用于創(chuàng)建出非常好的URL的最佳做法。我希望我這些年來學(xué)到的一些URL設(shè)計(jì)的最佳做法能夠給你留下深刻的印象，并且我會(huì)解釋為什么我認(rèn)為使用新的HTML5?javascript的history?API來工作是一件很令人興奮的事情。

為什么需要對(duì)你的URL進(jìn)行一番設(shè)計(jì)

URL欄已經(jīng)成為了現(xiàn)代瀏覽器的一個(gè)主要吸引人的地方了，且它再也不僅是一個(gè)URL欄那么簡單——你可以輸入部分的URL，然后瀏覽器就像是會(huì)使用黑魔法似的召喚出了你正要查找的確切的完整地址。當(dāng)我在我的URL欄中輸入了resque?issues時(shí)，得到的第一個(gè)結(jié)果是https://github.com/defunkt/resque/issues。

URL是全球統(tǒng)一的，它們可用在Chrome、Safari、Internet?Explorer、cURL、wget、你的iPhone、Android上，甚至?xí)粚懺诒愫炆?。它們就是web網(wǎng)絡(luò)的一種全球通用的語法。但是不要把這看成是理所當(dāng)然的。

任何一個(gè)定期訪問你的網(wǎng)站的半技術(shù)化的用戶都應(yīng)該能夠基于內(nèi)存中的URL結(jié)構(gòu)來瀏覽你的應(yīng)用的90%部分。為了能夠?qū)崿F(xiàn)這一點(diǎn)，你的URL必需是要注重實(shí)用性的，就幾乎仿佛它們就是數(shù)學(xué)方程式一樣——許多簡單的規(guī)則組合成一種策略性的方式，以此來獲得他們想要的頁面。

頂層的部分是最為重要的

URL最有價(jià)值的方面在于其頂層的部分。在我看來，在想法形成了之后，這就是接下來的任何啟動(dòng)都應(yīng)該最先要討論的事情，要遠(yuǎn)在任何的技術(shù)討論之前，要遠(yuǎn)在任何的代碼編寫之前。這一頂層部分將會(huì)改變形成你的網(wǎng)站功能的基礎(chǔ)。

我是不是有些夸張了？看起來可能會(huì)是這樣——但是以后會(huì)有1,000,000 個(gè)用戶，想想它會(huì)帶來多大的影響。想一下Facebook推出用戶名是多么重大的一件事?？捎玫腢RL就像是不動(dòng)產(chǎn)，而頂層的部分就是體現(xiàn)在外面的最好的資產(chǎn)。

另一個(gè)快速提示——每當(dāng)你構(gòu)建一個(gè)新的站點(diǎn)時(shí)，考慮一下這一組不實(shí)用的URL的黑名單列表（或許可從Quora的URL中了解到一點(diǎn)糟糕的URL設(shè)計(jì)）

命名空間是一種很棒的擴(kuò)展URL的工具

命名空間可以作為一種很棒的建立實(shí)用的URL結(jié)構(gòu)的方式，這種結(jié)構(gòu)在后續(xù)的使用中很容易被記住。我在這里說的命名空間指的是什么？我的意思是，URL中指明了不同內(nèi)容的那部分。一個(gè)例子：

https://github.com/defunkt/resque/issues

在上面的URL中，defunkt/resque 就是命名空間。為什么這會(huì)有用？這是因?yàn)樵谶@一個(gè)URL之后的任何部分都突然變成了一個(gè)新的頂層部分，因此你可以去到任何的一個(gè)《user》/《repo》 ， 然后加上/issues或者可能是/wiki，取得相同的頁面，但是是在不同的命名空間下。

保持命名空間的清晰，不要一開始就把一些內(nèi)容放在/feature/《user》/《repo》下，一些放在/《user》/《repo》/feature下。對(duì)于命名空間來說，要發(fā)揮效用就必須是統(tǒng)一的。

查詢串是很棒的過濾和排序的手段 

---

關(guān)于查詢串web有著一個(gè)混亂的過去，我見過各式各樣的事情，從每個(gè)網(wǎng)頁都使用同一個(gè)URL加上不同的查詢參數(shù)的網(wǎng)站，到一個(gè)查詢串參數(shù)都不用的網(wǎng)站，各種情況都有。

我喜歡把查詢串想象成URL的旋鈕——其調(diào)整你的當(dāng)前視圖，把它按照你的喜好來進(jìn)行微調(diào)，這就是為什么它們用在排序和過濾這些行為上會(huì)如此之棒。堅(jiān)持一種統(tǒng)一的模式（比如說sort=alpha&dir=desc?），你就會(huì)把通過URL欄進(jìn)行的排序和過濾變得簡單易記。

關(guān)于查詢串還有最后一件事情：在沒有附加查詢串的情況下，頁面應(yīng)該是有效的，其可能給出的是一個(gè)不同的頁面，但沒有查詢串的URL應(yīng)該是要呈現(xiàn)出頁面的。

英文網(wǎng)站的非ASCII?URL是很糟糕的 

---

這個(gè)世界是一個(gè)復(fù)雜的地方，充滿著?üml?ts?, ?ê?yés!和各種令人畏懼的字符?。這些字符在任何英文網(wǎng)站的URL中都是不會(huì)有一席之地的。使用英文的鍵盤輸入這些字符很復(fù)雜，很多時(shí)候延展成瀏覽器中的一些混亂的字符（有在url中見過xn--n3h嗎？這是一個(gè)?）。

URL是為人設(shè)計(jì)的——而非為搜索引擎設(shè)計(jì)的 

---

我是在這一行業(yè)中成長起來，學(xué)會(huì)了如何玩搜索引擎（好吧，就是Google）的把戲，以此來從我的聯(lián)盟營銷中賺錢。因此關(guān)鍵詞堆砌URL的做法對(duì)我來說并不陌生。像下面這樣來來結(jié)束一個(gè)URL的情況相當(dāng)常見：

http://guitars.example.com/best-guitars/cheap-guitars/popular-guitar

就SEO的目的來說，使用這種URL的效果會(huì)很好，幸運(yùn)的是，2003年Google的颶風(fēng)式的更新消除了這類URL的任何排名優(yōu)勢(shì)。遺憾的是，專業(yè)的SEO行業(yè)被強(qiáng)取豪奪給圍繞著，因此其可能還會(huì)建議你使用許多你盡可能想得到的關(guān)鍵字來堆砌你的URL

記住另外的一些要點(diǎn)：

1. 下劃線只有一個(gè)糟字可言，堅(jiān)持使用破折號(hào)。

2. 使用短的、完整的并且是大家都知道的單詞。如果某個(gè)部分中有一個(gè)破折號(hào)或是一個(gè)特殊的字符的話，這個(gè)詞就有可能太長。

URL是提供給人用的，為使用的人設(shè)計(jì)它們。

URL是一種協(xié)議 

---

URL是一種協(xié)議，在一個(gè)可預(yù)見的位置盡可能長久地供應(yīng)某些東西。一旦你的首個(gè)訪問者點(diǎn)擊了URL，那么你就隱式地進(jìn)入了這樣的一種協(xié)議中，即如果他們記住了來過該頁面或是點(diǎn)擊了刷新按鈕話，那么他要看到相同的東西。

在已經(jīng)向公眾推出之后就不要再改變你的URL，如果你絕對(duì)有必要改變你的URL的話，加上重定向——這不那么會(huì)引起驚慌。

任何事物都應(yīng)該有一個(gè)URL 

---

在一個(gè)理想的環(huán)境中，你的網(wǎng)站上的任何一個(gè)單獨(dú)的屏幕顯示都應(yīng)該得出一個(gè)URL，這一URL可被拷貝和粘貼來在另一個(gè)選項(xiàng)卡或是瀏覽器中再次產(chǎn)生相同的屏幕內(nèi)容。公平地說，這并不是完全有可能的。除非是新近使用了一些新的HTML5瀏覽器的history?Javascript?API。值得注意的是，有兩個(gè)新的方法：

onReplaceState — 該方法代替了瀏覽器歷史中的當(dāng)前URL，并讓后退（back）按鈕不受影響。

onPushState – 該方法把一個(gè)新的URL壓入到瀏覽器的歷史中，代替URL欄中的URL，并把它加入到瀏覽器的歷史棧中（影響到后退按鈕）。

何時(shí)使用onReplaceState?以及何時(shí)使用onPushState

這些新方法允許我們改變URL欄中的整個(gè)路徑，而不僅是錨元素。隨著這一新的強(qiáng)大功能而來的是一種新的設(shè)計(jì)責(zé)任——我們需要摸索出后退按鈕的使用經(jīng)驗(yàn)。

為了確定使用哪一個(gè)方法，問你自己這樣的一個(gè)問題：這一行為產(chǎn)生了新的內(nèi)容呢？抑或是相同內(nèi)容的不同顯示？

1. 產(chǎn)生了新的內(nèi)容——你應(yīng)該使用onPushState（例如：分頁鏈接）

2. 產(chǎn)生了相同內(nèi)容的不同顯示——你應(yīng)該使用onReplaceState（例如：排序和過濾）

使用你自己的判斷，不過這兩個(gè)規(guī)則應(yīng)該會(huì)符合你80%的情況?？紤]一下，當(dāng)你點(diǎn)擊后退按鈕時(shí)，你希望看見什么，然后做到你所希望的。

鏈接的行為就應(yīng)該像一個(gè)鏈接 

---

諸如《a》和《button》之類的鏈接元素有著許多很棒的內(nèi)建功能。如果你中鍵點(diǎn)擊或是命令點(diǎn)擊它們的話，它們會(huì)打開一個(gè)新的窗口。當(dāng)你懸停在其之上時(shí)，你的瀏覽器會(huì)在狀態(tài)欄中告訴你它的URL地址。在用到onReplaceState和onPushState時(shí)，不要破壞了這一行為。

1. 把AJAX請(qǐng)求的位置嵌放在錨元素的href屬性中。

2. 在人們中鍵點(diǎn)擊或是命令點(diǎn)擊它們時(shí)，從Javascript的點(diǎn)擊處理程序中返回true值。

這是一個(gè)相當(dāng)簡單的做法，在你的單擊處理程序內(nèi)部使用一個(gè)快速的條件判斷。下面是一個(gè)jQuery兼容的例子片段：

$(‘a.ajaxylink’).click(function(e){
//?API?瀏覽器不支持history?API的后備
if?(!(‘replaceState’?in?window.history))?return?true

// 確保是中鍵的、控制的和命令的正常點(diǎn)擊行為
if?(e.which?== 2 ||?e.metaKey?||?e.ctrlKey){
return?true
}

// 做一些很棒的事情，然后改變URL
window.history.replaceState(null, “New?Title”, ‘/some/cool/url’)
return?false
})

特定于POST行為的URL需要廢除

在過去，開發(fā)社區(qū)很愛創(chuàng)建一些不能被再次使用的URL，我喜歡把它們稱為特定于POST行為（POST-specific）的URL——這是一些會(huì)在你提交了一個(gè)表單之后出現(xiàn)在你的地址欄中的URL，但是當(dāng)你嘗試著拷貝和粘貼這些url到新的選項(xiàng)卡中時(shí)，你就會(huì)得到一個(gè)錯(cuò)誤的地址。

這類UR完全沒有存在的借口，特定于Post行為的URL是用于重定向和API的——而非給最終用戶的。

一個(gè)很棒的例子 

---

1. 用戶生成的URL部分只用ASCII字符（defunkt、resque）。

2. “pull”是“pull?request”的簡短版本——單個(gè)單詞，很容易關(guān)聯(lián)到來源詞。

3. 拉請(qǐng)求（pull?request）號(hào)局限的范圍為defunkt/resque?（此處是從1開始）。

4. 錨指向一個(gè)滾動(dòng)位置，內(nèi)容不會(huì)被擋住。

知識(shí)點(diǎn)精萃：URL還有許多不同的格式——找出patch和diff的版本看看。

一個(gè)時(shí)代的開始 

---

我希望隨著新的Javascript?API的使用的增多，設(shè)計(jì)者和開發(fā)者會(huì)花一些時(shí)間來設(shè)計(jì)一下URL。這對(duì)于任何網(wǎng)站的可用性來說都是一個(gè)很重要的部分，但我卻見到太多忽略了這一點(diǎn)的URL了。盡管重新設(shè)計(jì)網(wǎng)站的外觀和感覺很容易，但重新設(shè)計(jì)URL的結(jié)構(gòu)卻要難得多。

但我也很激動(dòng)，這些年來我有觀察到URL的改變。有時(shí)是硬鏈接被犧牲在了AJAX這一祭壇上，有時(shí)是犧牲性能來為用戶生成真實(shí)的URL。最終我們會(huì)來到這樣的一個(gè)時(shí)間點(diǎn)上，到那時(shí)，我們既可以得到部分頁面渲染的性能和可用性優(yōu)勢(shì)，同時(shí)又獲得設(shè)計(jì)有條理的和精煉的URL的經(jīng)驗(yàn)。

對(duì)這一帖子的內(nèi)容有問題或是建議嗎？給我發(fā)郵件，拜托有禮貌一些 、講道理一些，我會(huì)回應(yīng)的，也許甚至?xí)堎N到本站點(diǎn)上。

想問我什么，發(fā)郵件到kneath+ask@gmail.com 就可以了。

來源：http://article.yeeyan.org/view/213582/200363