URL - hash 的委屈

誕生

午夜的鐘聲已經響了 11 次，伴隨着瀏覽器地址欄的輸入 https://blog.acohome.cn/what-is-hash/#--1，一個 URL 被瀏覽器建立，固然 URL 的 Hash 口袋裏裝的就是我，正式介紹下我本身：

我是一個 Hash，就是普普統統的一個字符串，沒有特定的格式，是 URL 的一部分，只是不太被人們所關注罷了。

攔截

忽然間，瀏覽器收到了 Enter 指令，「嗡嗡嗡」 整個瀏覽器大廳發出陣陣警報。

「HTTP 服務已準備就緒，隨時能夠發送請求。」 HTTP 服務自信滿滿的說道。

「URL 快帶上你的包裹，去 HTTP 那兒吧」 瀏覽器老大說道。

「協議沒少，地址沒少，ok。」 URL 一邊整理一邊說道。「萬事具有，出發！」

「等等！」 瀏覽器老大像是發現了什麼，大喝一聲，你們都怔住了。

「你這個 Hash 啊，說了多少次了，趕忙給我從 URL 上下來，你是屬於個人，服務器不會要你的。」

「好吧！」 偷偷想去服務器看一眼的我，只能乖乖的從 URL 的口袋裏出來，走到瀏覽器身邊坐下。

「各部門繼續。」 大哥一聲令下，各部門又開始了有條不紊的工做。

「DNS 查詢完畢，服務器地址 127.0.0.1。」

「TCP 通道創建成功，能夠準備發送。」

「URL 已進入休眠，隨時能夠發送。」

...

各部門都開始忙碌起來，只有我（Hash）傻呆在一旁，無所事事。

委屈

大概過了 10 毫秒，HTTP 服務確認報文正確發出，報告道：「報文已正確發出，等待結果。」

「好的，你們都休息休息吧。」 瀏覽器老大一聲令下，你們都鬆了口氣。此時他轉頭對我說道：「想去服務器？」

「嗯，那裏我還沒去過呢！」 我就像個好奇寶寶。

「那裏不接待你，這是我和服務器他們的約定，你去了也沒用。」

「好吧。」 感覺到了來自服務器和瀏覽器的嫌棄，頓時有點委屈。

「等下有你發揮的地方呢！別喪氣！」 瀏覽器老大在一旁爲我加油打勁。

大概又過了 5 秒的時間，HTTP 服務滿心歡喜的跑到瀏覽器跟前，「URL 回來了！」

「好的，趕忙把它給喚醒，此次怎麼過了這麼久，服務器這小子不行啊，小主人都等不及了。」 瀏覽器老大見響應回的這麼慢，咕噥了一句。

尷尬的用處

又是一盆冷水潑下，URL 慢慢的醒了過來，抱怨道：「又來！！」

但瀏覽器老大卻沒有管他，一頭扎進了它一旁的包裹中去。

過了大概 10 毫秒的樣子，瀏覽器老大叫來了 GPU，讓他顯示了網頁。

一旁的我，有點納悶，不是說好了有我發揮的地方，怎麼頁面都顯示了我還呆在這！心中的委屈更深了。此時的我就像是一個沒人要的孩子。

「Hash 你過來下，你是什麼來着？」

「--1」 聽到瀏覽器的召喚，忽然間有點小興奮，脫口而出。

「讓我找找哈，在這，找到你了！」 瀏覽器老大自言自語道。

「找到什麼了？」

「就是這個元素，這個元素的 ID 是 --1。我讓 GPU 把頁面滾動到這。」 瀏覽器一邊說着，一邊對 GPU 下了一連串的命令。

「什麼！個人任務就是匹配一個元素？」

「是啊！」

「什麼嘛！我等了這麼久就是爲了匹配一個元素？」

「是啊！」

頓時，心頭的委屈在也控制不住，眼淚奪眶而出。

「別呀，在裏你用處不大，在 JavaScript 那，你還有用處呢，最近聽過單頁應用很火，用的就是你，你去問問他。」 瀏覽器老大趕緊安慰道。

遇伯樂

見我沒有動靜，瀏覽器老大嘆了口氣，叫來了 JavaScript。

「怎麼啦？這麼委屈！」 被瀏覽器老大叫來的 JavaScript 說道。

「他們都欺負我，服務器不讓我去，而個人存在就是爲了匹配一個元素。」 話剛說出口，以爲本身更沒用了。

「不哭，他們不重視你，我重視，如今好多個人小弟都用到了你哦，你但是很強大的！」 JavaScript 說的我一愣一愣的。

「真的？」

「那必須，聽過 Angular Vue 和 React 嗎？他們都用你做爲路由呢！你能夠找他們談談」 JavaScript 信誓旦旦的說道，並叫來了 Vue。

「小兄弟，怎麼哭了啊。」 走過來的 Vue 對個人說道。

「我感受我好沒用啊！」 說着我哭的更大聲了。

「怎麼會，你在我這就和 URL 的地位差很少。你想一想你就是一個字符串，是否是也能夠擁有相似 <path>?<query> 的格式？」

「是啊，那又怎麼樣，還不是匹配 ID 爲這個字符串的元素。」

「No No No 非也，在我這你再也不去匹配一個元素，如今 AJAX 已經很成熟了，我在我這維護一套頁面徹底沒有問題，你看我這有好多模板，你的路徑就指明瞭我須要使用哪一個模板生成頁面。」 說着 Vue 從口袋裏嘩啦啦的掏出十幾套模板。

「真的？我真的能指明你要使用哪一個頁面！」

「是呀，你看個人配置，這個是你的路徑，這個是個人模板，是否是一一對應呀？」 Vue 掏出了他的配置表給我看了看。

「好像是的誒，我真的能夠作到嗎？」 我沒自信的說道。

「固然能夠，你還能夠給我查詢參數呢！就和 URL 那小子同樣，只不過那小子爲服務器大哥服務，你爲我服務罷了。」 Vue 一臉得意的說道：「我就是你的服務器！」

聽着 Vue 的解釋，我陷入了沉思：是啊，如今 Ajax 技術已經成熟了，而 URL 的路徑匹配是針對服務器的，那麼模板的匹配由我來作徹底沒有問題啊，先匹配到模板，在去服務器大哥哪兒拿模板的數據，而後再由 JavaScript 生成頁面，告訴瀏覽器大哥，讓他顯示！

「是啊，原來能夠這麼搞！」 想通的我興奮的喊道。

「是吧，你的做用仍是很大的，匹配元素，只是你一個小小的做用罷了」 Vue 在一旁說道。「那好，我走咯，有一個 Hash 要我去生成頁面了，再聊哈~」

Vue 走了，留下一臉興奮的我，期待着下次和 Vue 的合做。

搶生意

時間慢慢的流逝着，與 Angular Vue 和 React 之間的合做，慢慢的增長了個人信心，原來世界能夠如此美好。

直到有一天，我發現了雖然在大廳裏的 Vue 忙的不亦樂乎，可是他始終沒有光顧過我。

我心中一想：是啊，最近好像這 3 位找個人次數變少了啊，什麼狀況？

不安的我趕緊找來 Vue 問道：「最近是怎麼了單頁應用不流行了嗎？」

「不啊，仍是很流行的，只不過...」 Vue 在一旁揶揄道。

「發生什麼事了？」

「那個，要不你找 JavaScript 大哥聊聊？」

發現了事情的不對勁，趕緊去 JavaScript 那兒問道：「Vue 讓我來找你，最近這是怎麼了？」

「這個啊，好吧，就直接和你說了。」 JavaScript 眼見事情已經瞞不住，直接說道：「HTML 那小子更新啦，我這呢又多了兩個小弟，就那兩（pushStatus，replaceState），看到了嗎？」

我放眼望去，確實這兒多了些生面孔，那兒有兩人，和 Angular Vue 和 React 忙的不亦樂乎。

「他們是幹嗎的？」 我有點擔憂的問道。

「HTML 新給了我兩小弟，能夠改變 URL 的 <path>?<query>，但卻不會讓瀏覽器大哥進行 HTTP 請求。」

「這和我有什麼關係？」

「你以前不是和 Vue 他們學了一招嗎？叫什麼單頁應用的。」

「對啊，難不成他們也能作這個單頁應用？」

「是啊，你看看他們控制的內容，是否是和你做爲單頁應用的字符串如出一轍？」

聽到 JavaScript 的回答我心中一驚，一股涼意升起。

「這麼幹的話頁面被小主人主動刷新了咋辦，雖然他們不會讓瀏覽器大哥進行 HTTP 請求，可是刷新卻會啊！」 我反抗道。

「你說的不錯，這就須要服務器大哥來配合啦，對於這些連接始終要返回同一個網頁，這樣瀏覽器大哥就認爲是同一個資源，不會刷新頁面了，讓後再由 Vue 去獲取你 URL 大哥的路徑，也就是你以前的模擬的部分，你大哥原本就有這部份內容不是嗎？」

「可是，可是，我已經這麼好用了，還不佔用 URL 大哥的位置，爲何要這兩啊！」 我越看這兩和 Vue 卿卿我個人，心中越是嫌棄。

「想知道緣由？」

「嗯」 我感到了絲絲不對勁。

「不能生氣！答應了我就告訴你！」

「好！我不生氣！」

「其實吧，也沒什麼，就是小主人們以爲用你的話，太長了，因此就想了這個辦法。可是！」 JavaScript 停頓了一下 「你也有你的優勢。」

1. 不佔用 URL 中的其餘位置
2. 不佔用服務器的目錄，不須要服務器重定向到單一文件
3. JavaScript 也就是我，獲取你容易
4. 職責明確，你歸我來處理，URL 的其餘部分歸服務器，分工簡單

「哦~ 原來是這樣！我和他們兩是競爭對手啊，那我要加油了！」

「呼~」 JavaScript 長舒一口氣，心想：這小子終於長大了，不哭哭鬧鬧了。

來自屏幕外的抱怨

「這個 URL 也太長了吧，讓我怎麼給別人。」

「用 history 模式吧，那個能精簡 URL。」

「好，我試試」

「刷新報錯啊，兄弟，這個也太不靠譜了，hash 模式簡單太多了。」

「你配置下你的 nginx 啊！把全部這個目錄的請求轉到同一個 HTML。」

「... 我這個目錄是公用的，不能把全部的請求都轉啊！」

「那就寫正則過濾，或者放在一個單獨的目錄下！」

「我試試，不行啊，個人靜態資源請求不到，什麼鬼！」

「被你過濾掉了唄，你看你的 css 是否是返回了個 HTML？」

「我靠，還真是！算了我放棄，也就多了 #/ 服務器仍是保持簡單點，用 hash 模式吧！」

「你開心就好。」