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

“你开心就好。”