你應該花時(shí)間來(lái)設計你的URL結構。 在你看完這篇文章以后，我唯一期望的是你能花點(diǎn)時(shí)間設計你的URL結構。

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

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

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

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

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

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

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

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

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

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

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

查詢(xún)字符串對排序和過(guò)濾非常的有用

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

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

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

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

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

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

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

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

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

• 下劃線(xiàn)很不好，請在URL中使用中劃線(xiàn)。
• 在URL中使用一些短的、通俗的詞，如果一段URL中有中劃線(xiàn)會(huì )特殊的字符，那它可能有些長(cháng)。

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

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

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

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

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

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

什么是有使用onReplaceState和onPushState

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

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

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

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

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

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

上面的說(shuō)的可以非常容易的實(shí)現，下面是使用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)站需要被遺棄

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

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

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

一個(gè)新的開(kāi)始

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

 

本文地址：http://m.nwafulive.cn/c/201251167.html

分享到：

---

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

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