資訊專欄INFORMATION COLUMN
簡介
URL結(jié)構(gòu)、組成、query、hash、axios數(shù)組傳遞錯誤、HTTP 請求
伴隨著微信消息的提示音 小四 發(fā)來一段代碼說 不知道為什么請求不到頁面數(shù)據(jù)：
axios.get("users", {
params: { ids: [1, 2, 3] }
})
小二一看大概率是 query 中數(shù)組傳遞方式引起的，由于后端實(shí)現(xiàn)解析數(shù)組 ids:[5, 6, 100] 可能有以下幾種方式：
bracket: ids[]=1&ids[]=2&ids[]=3
index: ids[0]=1&ids[1]=2&ids[3]=3
comma: ids=1,2,3
none: ids=1&ids=2&ids=3
小四分別測試后便把問題解決了，這也讓小二想起 小熊貓哥哥 在開發(fā)的時候，也遇到過這個問題網(wǎng)上一搜發(fā)現(xiàn)別人用 qs 庫中的 stringify 直接代碼一試沒報錯能運(yùn)行，不管它的原理是什么，現(xiàn)在想想挺可怕的。
雖然天天和 URL 打交道但并不是所有人都懂它。現(xiàn)原形對于為什么代碼能運(yùn)行也不是所有人都會去深究它。
利用 URL() 對象可以快速的把一個 url地址 打回原形：
const url = new URL("http://www.pushme.top/users?sort_by=asc#page=userlist")
console.log(url)
{
hash: "#page=userlist"
host: "www.pushme.top"
hostname: "www.pushme.top"
href: "http://www.pushme.top/users?sort_by=asc#page=userlist"
origin: "http://www.pushme.top"
password: ""
pathname: "/users"
port: ""
protocol: "http:"
search: "?sort_by=asc"
searchParams: URLSearchParams {}
username: ""
}
沒想到吧 小小的一段 url地址 里面居然有這么多屬性，在這里主要會講解的 hash 和 search。
推薦打開控制臺把腳本運(yùn)行一下，這樣閱讀的時候就不需要上下對照查看了。host 和 hostname
眼尖的同學(xué)肯定發(fā)現(xiàn)了 host 和 hostname 居然一模一樣這是為什么呢？
回憶一下開發(fā)經(jīng)常在見到的 localhost:8080，這里出現(xiàn)了端口號 8080 而平時使用訪問一些網(wǎng)站的時候卻沒有帶上端口號。這是因為 url地址 會默認(rèn)端口號為 80，所以你仔細(xì)看看會發(fā)現(xiàn)上面 port 的值為空。
而 host 和 hostname 的區(qū)別便是有 port 的時候 host 會包含端口號，而 hostname 不會包含。
protocol 和 originprotocol 指的便是 協(xié)議 最常見的有 http 和 https，當(dāng)然現(xiàn)在瀏覽器再不輸入?yún)f(xié)議時會自動幫你加上，不過在 URL() 不帶上協(xié)議可是會報錯的哦。origin 則為 protocel 和 host 拼接組成。
search 和 searchParams 基礎(chǔ)?search=a 中 query 以第一個?開始至行尾或#結(jié)束。用于向后端傳遞一些數(shù)據(jù)，數(shù)據(jù)使用 & 進(jìn)行分隔，值使用 = 分隔。通過一段代碼來理解一下：
const query = "id=1&sort=asc&hello=world";
// 對 & 分割取得數(shù)據(jù)對
const data = query.split("&").reduce((data,keyValue) => {
const [ key, value ] = keyValue.split("=");
return (data[key] = value, data);
}, {});
// 輸出 {id: "1", sort: "asc", hello: "world"}
console.log(data);
這就是 query 最基礎(chǔ)的數(shù)據(jù)對的組合方式，當(dāng)然開頭的四種 數(shù)組 的表達(dá)方式需要進(jìn)行另外的處理，無外乎就是對 key 的收集 和 value 的判斷。不過這部分基本上后端的框架都幫我們處理好了，前端也可以使用 qs、query-string、qss 等庫來完成。
題外話：這幾個庫代碼都挺少的，值得一讀說不定有新收獲。加號與空格
每天使用的 百度 和 谷歌 中不知道大家有沒有主要到這幾個細(xì)節(jié)：
輸入 https://www.baidu.com/s?wd=小二+pushmetop 搜索框中出現(xiàn)的是小二 pushmetop，地址欄中url地址的 + 神奇的變成了 空格。
輸入 https://www.baidu.com/s?wd=小二 pushmetop 搜索框中出現(xiàn)的是小二 pushmetop，地址欄中url地址的 空格 的變成 %20。
輸入 https://www.baidu.com/s?wd=小二%2Bpushmetop 搜索框中出現(xiàn)的是小二+pushmetop，地址欄中url地址的 %2B 的變成 +。
具體原因可以查看 維基百科 關(guān)于 保留字符的百分號編碼 。
URL 編碼在 掘金 等網(wǎng)站點(diǎn)擊鏈接都會快速的閃現(xiàn)類似 http://www.pushmetop.com?redirect=xxxxx 的 url地址，會發(fā)現(xiàn) redirect 對應(yīng)的重定向地址會是一堆夾帶 % 的亂碼這是為什么呢？
讓我們假設(shè)需要跳轉(zhuǎn)的鏈接是 www.test.com?hello=world&id=1,把整個鏈接拼接起來則為：
http://www.pushmetop.com?redirect=www.test.com?hello=world&id=1
根據(jù)一開始的定義 解析值 和 預(yù)期值 完全不同了：
{
"redirect": "www.test.com?hello=world",
"id": "1"
}
{
"redirect": "www.test.com?hello=world&id=1"
}
為了解決這個問題便誕生了 URL編碼 來解決問題：
encodeURIComponent() 和 decodeURIComponent() 推薦使用。
encodeURI() 和 decodeURI() 對比前者不會對 "; / ? : @ & = + $ , #" 這些字符編碼。
escape() 和 unescape() 不推薦使用。
let redirect = "www.test.com?hello=world&id=1";
redirect = encodeURIComponent(redirect);
let url = `http://www.pushmetop.com?redirect=${redirect}`;
url = new URL(url)
// 輸出: www.test.com?hello=world&id=1
console.log(url.searchParams.get("redirect"))
hash
#hash 中 fragment 以 # 為開始 行尾 為結(jié)束。在 回到頂部 中有提到過利用hash錨點(diǎn)來進(jìn)行跳轉(zhuǎn)，如果大家注意觀察的話會發(fā)現(xiàn) hash 的改變不會引起頁面的刷新。
在 Angular.js、Vue Router 等庫中，會利用在 html5 中提供了 history 的一系列操作，來幫助我們不刷新頁面管理 url。但是在一些舊的瀏覽器上并不兼容時，會利用 hash 不會主動觸發(fā)瀏覽器 reload 的特性來修改 location.hash 來管理路由。 當(dāng)然 hash 的另外一個特點(diǎn)是可以被保存為書簽，也是一大優(yōu)點(diǎn)。
hash 的小妙用也可以像 query 那樣利用 & 和 = 來存取數(shù)據(jù)，當(dāng)然你也可以定制屬于你的規(guī)則。
href 和 pathnamehref 為整個 url地址。而 pathname 屬性包含 URL 的整個路徑部分。它跟在 host （包括 port）后面，排在 query 或 hash 組成部分的前面且被 ASCII 問號（?）或哈希字符（#）分隔。
username 和 passwordusername 和 password 在日常使用中很少用，它們可以合稱為 auth。該字符串跟在 protocol 和雙斜杠（如果有）的后面，排在 host 部分的前面且被一個 ASCII 的 at 符號（@）分隔：
http://username:[email protected]/test/blah?something=123結(jié)尾
本來只是想討論 hash 和 search ，結(jié)果全都過一遍，今天就辛苦大家了。
一起成長在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點(diǎn)個 點(diǎn)贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103118.html
showImg(https://segmentfault.com/img/remote/1460000018825131); 簡介 SEO、robot.txt、搜索引擎優(yōu)化 在浩海的互聯(lián)網(wǎng)世界中： 互聯(lián)網(wǎng) 宛如 宇宙 站點(diǎn) 宛如 星系 網(wǎng)頁 宛如 星球 網(wǎng)頁內(nèi)容 宛如 生靈萬物 而在互聯(lián)網(wǎng)世界漫游的搜索引擎爬蟲小蜘蛛，就好比一搜穿梭在宇宙里的星際漫游器，想想是不是還挺浪漫的。對于不同的星系有著...
showImg(https://segmentfault.com/img/remote/1460000018709378?w=900&h=500); 簡介 短路運(yùn)算、逗號運(yùn)算、簡化條件語句、初始化小技巧 昨天一個同學(xué)在 URL 大爆炸 問了我一個問題：這是什么寫法 (data[key] = value, data) 。平時在寫文章的時候會把這些技巧稍微提示一下，認(rèn)為大家都知道這些技巧，引起了小二的...
簡介 SEO、鏈接、a 標(biāo)簽、HTTP 狀態(tài)碼、link 標(biāo)簽、alternate、canonical 唐朝有個小伙叫韋固喜歡在河邊玩，一天遇到一個老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道系石頭做什么呢？老伯伯說我在給當(dāng)婚人牽線，這對石頭是一對夫妻。小伙問道：那我的妻子是誰呢？老伯伯說：就是村頭看菜園子的女孩兒。 小伙就好氣，本小伙玉樹臨風(fēng)、風(fēng)流倜儻怎么可以和菜園窮丑丫頭一起呢？第二...
簡介 SEO、鏈接、a 標(biāo)簽、HTTP 狀態(tài)碼、link 標(biāo)簽、alternate、canonical 唐朝有個小伙叫韋固喜歡在河邊玩，一天遇到一個老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道系石頭做什么呢？老伯伯說我在給當(dāng)婚人牽線，這對石頭是一對夫妻。小伙問道：那我的妻子是誰呢？老伯伯說：就是村頭看菜園子的女孩兒。 小伙就好氣，本小伙玉樹臨風(fēng)、風(fēng)流倜儻怎么可以和菜園窮丑丫頭一起呢？第二...
showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡介 benchmark、基準(zhǔn)測試、jsPerf 在 優(yōu)雅插入數(shù)組 一文中大家最多的評論就是 能不能加個基準(zhǔn)測試。小二不是不喜歡加基準(zhǔn)測試而是現(xiàn)在硬件設(shè)備的性能越來越快了，有時候一些操作不是性能問題的主要原因，當(dāng)然這不是我們不寫出好代碼的理由。 書寫...
閱讀 2823·2023-04-25 15:01
閱讀 3088·2021-11-23 10:07
閱讀 3371·2021-10-12 10:12
閱讀 3461·2021-08-30 09:45
閱讀 2200·2021-08-20 09:36
閱讀 3590·2019-08-30 12:59
閱讀 2439·2019-08-26 13:52
閱讀 937·2019-08-26 13:24
