你應(yīng)該花時(shí)間來設(shè)計(jì)你的URL結(jié)構(gòu)。 在你看完這篇文章以后，我唯一期望的是你能花點(diǎn)時(shí)間設(shè)計(jì)你的URL結(jié)構(gòu)。

網(wǎng)址設(shè)計(jì)是一個(gè)復(fù)雜的問題。 我不能說有什么“正確”的解決辦法。 好的URL設(shè)計(jì)，壞URL設(shè)計(jì)，它們都會(huì)因?yàn)槊總€(gè)人的主觀判斷而不同。但是，這并不意味著沒有創(chuàng)建優(yōu)秀的URL的方法。 我希望分享給你這些年積累的關(guān)于如何創(chuàng)建好的URL的方法，并使這些URL能和最新的HTML5中的瀏覽器歷史Javascript API很好的一起工作。

為什么你需要設(shè)計(jì)你的URL？

地址欄成為當(dāng)前瀏覽器的一個(gè)主要特性，他已經(jīng)不再是一個(gè)簡(jiǎn)單的地址欄了，你可以輸入部分URL就能找到完整的URL。當(dāng)我在地址欄中輸入resque issues時(shí)，第一個(gè)返回的鏈接是https://github.com/defunkt/resque/issues

URL 可以用在很多地方，他可以在Firefox, Chrome, Safari, Internet Explorer, cURL, wget, iPhone, Android甚至手寫。它們是互聯(lián)網(wǎng)最通用的語法。不要讓它隨隨便便。網(wǎng)站內(nèi)90%的頁(yè)面需要通過網(wǎng)址進(jìn)行訪問，為了能讓用戶正常訪問，你的網(wǎng)址必須做大務(wù)實(shí)，它們就像是一個(gè)數(shù)學(xué)問題，通過一些簡(jiǎn)單的規(guī)則讓訪客獲取想要的頁(yè)面。

網(wǎng)址根目錄（level section）是非常珍貴的

對(duì)于任何一個(gè)URL而言，它最用價(jià)值的方面是在他的根目錄（level section），我的觀點(diǎn)是她必須在你寫任何代碼前確定下來，他會(huì)確定你網(wǎng)站最后是怎么組織起來的。當(dāng)你想建立新的站點(diǎn)的時(shí)候，一定要想好哪些根目錄的網(wǎng)址是需要保留的。

命名空間是一個(gè)非常有用的拓展網(wǎng)址方案

命名空間是一個(gè)建立容易記憶的良好網(wǎng)址結(jié)構(gòu)的方案。那命名空間是什么意思呢？下面是一個(gè)例子：

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

在上面的URL中，defunkt/resque是命名空間。為什么這個(gè)是有用的？因?yàn)槿魏胃诿臻g后面的部分都將成為level section。在可以在任何/后面跟上/issues或/wiki來生成頁(yè)面。

為了命名空間的通用性，保持命名空間的簡(jiǎn)潔，不要將內(nèi)容加在前面或后面，類似/feature//或///feature.

查詢字符串對(duì)排序和過濾非常的有用

網(wǎng)站都有一些查詢字符串，很多網(wǎng)站使用多個(gè)查詢字符串。他們通常使用同一的模式來對(duì)頁(yè)面或內(nèi)容進(jìn)行排序或過濾（sort=alpha&dir=desc），他們可以是URL更加簡(jiǎn)單和易記。

需要記住的是，在URL上沒有帶任何查詢字符串時(shí)需要顯示一個(gè)不同的頁(yè)面。

非ASCII字符出現(xiàn)在網(wǎng)址中

非 ASCII字符不但難以輸入，而且還難以記憶。

URL是為人設(shè)計(jì)的，不是為搜索引擎設(shè)計(jì)的

在URl中堆砌關(guān)鍵詞的手法，并不罕見，比如下面的URL：

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

這樣的URL在Google2003年修改算法前對(duì)SEO很有效，但是一些SEO教程上現(xiàn)在還是叫你將關(guān)鍵詞寫入U(xiǎn)RL。他們錯(cuò)了，忽略他們。

除此之外，你還需要記住以下兩點(diǎn)：

• 下劃線很不好，請(qǐng)?jiān)赨RL中使用中劃線。
• 在URL中使用一些短的、通俗的詞，如果一段URL中有中劃線會(huì)特殊的字符，那它可能有些長(zhǎng)。

URL是為人使用的，也是為人設(shè)計(jì)的。

一個(gè)URL就是一個(gè)協(xié)議

一個(gè)URL是一個(gè)協(xié)議，你需要讓他保存做夠長(zhǎng)的時(shí)間。一旦有人點(diǎn)擊了你的URL，他們就是和你簽署有了一個(gè)協(xié)議，他們期望下次再打開這個(gè)網(wǎng)址的時(shí)候看到同樣的內(nèi)容。在你的URL公布出去以后，不要輕易的去修改它，如果你真的迫不得已要去修改它，那么請(qǐng)多原來的URL做跳轉(zhuǎn)。

任何頁(yè)面都需要有個(gè)URL

在理想的情況下，每個(gè)單獨(dú)的頁(yè)面都需要一個(gè)URL，這個(gè)URL在復(fù)制到別的瀏覽器的時(shí)候要還可以訪問。事實(shí)上這樣做是完全不可能的，直到新的HTML5瀏覽器歷史記錄Javascript API的出現(xiàn)，這里有兩種方法：

• onReplaceState — 這個(gè)方法取代了瀏覽器歷史記錄中的URL，使URL留下后退按鈕。
• onPushState – 這個(gè)方法能push一個(gè)新的URL到瀏覽器歷史記錄，用來更換瀏覽器中的歷史堆棧。

什么是有使用onReplaceState和onPushState

這兩個(gè)新的方法可以改變?yōu)g覽器中的訪問歷史，有了這個(gè)新的特征，我們需要為頁(yè)面設(shè)計(jì)后退頁(yè)面。在使用前需要問自己：這個(gè)動(dòng)作是否需要產(chǎn)生新的內(nèi)容或用不同的方法顯示相同的內(nèi)容。

1. 生成新的內(nèi)容-你應(yīng)該使用onPushState（如分頁(yè)鏈接）
2. 用不同的方法顯示相同的內(nèi)容-你應(yīng)該使用onReplaceState（如排序了過濾）

通過自己的判斷，想想你需要實(shí)現(xiàn)怎樣的效果。

鏈接需要看上去像個(gè)鏈接

很多生成鏈接的方法如、，如果你點(diǎn)擊它們它們會(huì)打開新的頁(yè)面，當(dāng)你將鼠標(biāo)放在標(biāo)簽時(shí)，你的瀏覽器狀態(tài)欄就會(huì)告訴你URL地址是什么。在使用onReplaceState and onPushState時(shí)不要破壞這樣的規(guī)則。

• 當(dāng)進(jìn)行AJAX請(qǐng)求時(shí)，顯示當(dāng)前的請(qǐng)求地址。
• 當(dāng)使用Javascript打開過程中返回true。

上面的說的可以非常容易的實(shí)現(xiàn)，下面是使用jQuery的一個(gè)例子：

$('a.ajaxylink').click(function(e){
  // Fallback for browser that don't support the history API
  if (!('replaceState' in window.history)) return true

  // Ensure middle, control and command clicks act normally
  if (e.which == 2 || e.metaKey || e.ctrlKey){
    return true
  }

  // Do something awesome, then change the URL
  window.history.replaceState(null, "New Title", '/some/cool/url')
  return false
})

POST后的網(wǎng)站需要被遺棄

過去很多開發(fā)人員喜歡生成不能再次使用的URL，這種URL也稱為Post-specific URLs，當(dāng)你提交一個(gè)表單的時(shí)候你不會(huì)發(fā)現(xiàn)地址欄中的URL會(huì)發(fā)生任何變化，當(dāng)你將復(fù)制URL重新打開后卻得到一個(gè)錯(cuò)誤的頁(yè)面。這樣的URL本身沒有任何錯(cuò)誤，他們的主要作用是進(jìn)行重定向和在API中使用，并不應(yīng)該給用戶使用。

一個(gè)非常好的URL示例

1. 在生成URL的時(shí)候僅使用ASCII字符（defunkt,resque）。
2. “push“是”push request”的簡(jiǎn)稱-簡(jiǎn)單、簡(jiǎn)潔且有關(guān)聯(lián)。
3. 請(qǐng)求號(hào)碼是基于defunkt/resque（從1開始）。
4. 錨點(diǎn)指向內(nèi)容的具體位置。

一個(gè)新的開始

我期望更多的人使用新增的Javascript API，網(wǎng)站策劃人員和開發(fā)人員可以花更多的時(shí)間在設(shè)計(jì)URL上。URL是網(wǎng)站可用性的重要組成部分，但是很多人會(huì)忽視它的存在。給一個(gè)網(wǎng)站重新設(shè)計(jì)界面是件和容易的事情，但是重新設(shè)計(jì)網(wǎng)址結(jié)構(gòu)卻非常的困難。

 

本文地址：http://www.hbjfpay.com/c/201251167.html

分享到：

---

【刷新頁(yè)面】【加入收藏】【打印此文】 【關(guān)閉窗口】

• 上一篇：二維碼數(shù)據(jù)格式詳解
• 下一篇：點(diǎn)擊熱力圖的技術(shù)如何實(shí)現(xiàn)