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 模式吧！”

“你开心就好。”