你應該花時間來設計你的URL結構。 在你看完這篇文章以后，我唯一期望的是你能花點時間設計你的URL結構。

網址設計是一個復雜的問題。 我不能說有什么“正確”的解決辦法。 好的URL設計，壞URL設計，它們都會因為每個人的主觀判斷而不同。但是，這并不意味著沒有創建優秀的URL的方法。 我希望分享給你這些年積累的關于如何創建好的URL的方法，并使這些URL能和最新的HTML5中的瀏覽器歷史Javascript API很好的一起工作。

為什么你需要設計你的URL？

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

URL 可以用在很多地方，他可以在Firefox, Chrome, Safari, Internet Explorer, cURL, wget, iPhone, Android甚至手寫。它們是互聯網最通用的語法。不要讓它隨隨便便。網站內90%的頁面需要通過網址進行訪問，為了能讓用戶正常訪問，你的網址必須做大務實，它們就像是一個數學問題，通過一些簡單的規則讓訪客獲取想要的頁面。

網址根目錄（level section）是非常珍貴的

對于任何一個URL而言，它最用價值的方面是在他的根目錄（level section），我的觀點是她必須在你寫任何代碼前確定下來，他會確定你網站最后是怎么組織起來的。當你想建立新的站點的時候，一定要想好哪些根目錄的網址是需要保留的。

命名空間是一個非常有用的拓展網址方案

命名空間是一個建立容易記憶的良好網址結構的方案。那命名空間是什么意思呢？下面是一個例子：

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

在上面的URL中，defunkt/resque是命名空間。為什么這個是有用的？因為任何跟在命名空間后面的部分都將成為level section。在可以在任何/后面跟上/issues或/wiki來生成頁面。

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

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

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

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

非ASCII字符出現在網址中

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

URL是為人設計的，不是為搜索引擎設計的

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

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

這樣的URL在Google2003年修改算法前對SEO很有效，但是一些SEO教程上現在還是叫你將關鍵詞寫入URL。他們錯了，忽略他們。

除此之外，你還需要記住以下兩點：

• 下劃線很不好，請在URL中使用中劃線。
• 在URL中使用一些短的、通俗的詞，如果一段URL中有中劃線會特殊的字符，那它可能有些長。

URL是為人使用的，也是為人設計的。

一個URL就是一個協議

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

任何頁面都需要有個URL

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

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

什么是有使用onReplaceState和onPushState

這兩個新的方法可以改變瀏覽器中的訪問歷史，有了這個新的特征，我們需要為頁面設計后退頁面。在使用前需要問自己：這個動作是否需要產生新的內容或用不同的方法顯示相同的內容。

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

通過自己的判斷，想想你需要實現怎樣的效果。

鏈接需要看上去像個鏈接

很多生成鏈接的方法如、，如果你點擊它們它們會打開新的頁面，當你將鼠標放在標簽時，你的瀏覽器狀態欄就會告訴你URL地址是什么。在使用onReplaceState and onPushState時不要破壞這樣的規則。

• 當進行AJAX請求時，顯示當前的請求地址。
• 當使用Javascript打開過程中返回true。

上面的說的可以非常容易的實現，下面是使用jQuery的一個例子：

$('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后的網站需要被遺棄

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

一個非常好的URL示例

1. 在生成URL的時候僅使用ASCII字符（defunkt,resque）。
2. “push“是”push request”的簡稱-簡單、簡潔且有關聯。
3. 請求號碼是基于defunkt/resque（從1開始）。
4. 錨點指向內容的具體位置。

一個新的開始

我期望更多的人使用新增的Javascript API，網站策劃人員和開發人員可以花更多的時間在設計URL上。URL是網站可用性的重要組成部分，但是很多人會忽視它的存在。給一個網站重新設計界面是件和容易的事情，但是重新設計網址結構卻非常的困難。

 

本文地址：http://www.fjlhjv.cn/c/201251167.html

分享到：

---

【刷新頁面】【加入收藏】【打印此文】 【關閉窗口】

• 上一篇：二維碼數據格式詳解
• 下一篇：點擊熱力圖的技術如何實現