一個(gè)神奇的小工具，讓URL地址都變成了"ooooooooo"
發(fā)現(xiàn)一個(gè)很有創(chuàng)意的小工具網(wǎng)站，如封面圖所示功能很簡(jiǎn)單，就是將一個(gè)URL地址轉(zhuǎn)換為都是 ooooooooo 的樣子，通過(guò)轉(zhuǎn)換后的地址訪問(wèn)可以轉(zhuǎn)換回到原始地址，簡(jiǎn)單流程如下圖所示。轉(zhuǎn)換的邏輯有點(diǎn)像短鏈平臺(tái)一樣，只不過(guò)這個(gè)是將你的URL地址變的很長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)，但是看著都是 ooooooooo，很好奇是如何實(shí)現(xiàn)的，所以查閱了源碼，本文解讀其核心實(shí)現(xiàn)邏輯，很有趣且巧妙的實(shí)現(xiàn)了這個(gè)功能。
前置知識(shí)點(diǎn)
在正式開始前，先了解一些需要學(xué)習(xí)的知識(shí)點(diǎn)。因?yàn)樯婕暗絻蓚€(gè)地址其實(shí)也就是字符串之間的轉(zhuǎn)換，會(huì)用到一些編碼和解碼的能力。
「將字符轉(zhuǎn)為utf8數(shù)組」，轉(zhuǎn)換后的每個(gè)字符都有一個(gè)特定的唯一數(shù)值，比如 http 轉(zhuǎn)換后的 utf8 格式數(shù)組即是 [104, 116, 116, 112]。
toUTF8Array(str) {
var utf8 = [];
for (var i = 0; i < str.length; i++) {
var charcode = str.charCodeAt(i);
if (charcode < 0x80) utf8.push(charcode);
else if (charcode < 0x800) {
utf8.push(0xc0 | (charcode >> 6),
0x80 | (charcode & 0x3f));
}
else if (charcode < 0xd800 || charcode >= 0xe000) {
utf8.push(0xe0 | (charcode >> 12),
0x80 | ((charcode >> 6) & 0x3f),
0x80 | (charcode & 0x3f));
}
else {
i++;
charcode = ((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff)
utf8.push(0xf0 | (charcode >> 18),
0x80 | ((charcode >> 12) & 0x3f),
0x80 | ((charcode >> 6) & 0x3f),
0x80 | (charcode & 0x3f));
}
}
console.log(utf8, 'utf8');
return utf8;
}上面是編碼，對(duì)應(yīng)下面的則是解碼，「將utf8數(shù)組轉(zhuǎn)換為字符串」，比如 [99, 111, 109] 轉(zhuǎn)換后的 utf8 格式數(shù)組即是 com。
Utf8ArrayToStr(array) {
var out, i, len, c;
var char2, char3;
out = "";
len = array.length;
i = 0;
while (i < len) {
c = array[i++];
switch (c >> 4) {
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
// 0xxxxxxx
out += String.fromCharCode(c);
break;
case 12: case 13:
// 110x xxxx 10xx xxxx
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}「將 Number 對(duì)象以 4 進(jìn)制的形式表示為字符串」，toString 用的比較多，但是里面?zhèn)魅雲(yún)?shù)的場(chǎng)景比較少，這個(gè)參數(shù) radix 是一個(gè)可選的參數(shù)，用于指定轉(zhuǎn)換的進(jìn)制數(shù)，范圍為 2 ~ 36，如果未傳入該參數(shù)，則默認(rèn)使用 10 進(jìn)制。
n.toString(4)「在字符串左側(cè)填充指定字符，直到字符串達(dá)到指定長(zhǎng)度」。基本語(yǔ)法為 str.padStart(targetLength [, padString])。
- targetLength：必需，指定期望字符串的最小長(zhǎng)度，如果當(dāng)前字符串小于這個(gè)長(zhǎng)度，則會(huì)在左側(cè)使用 padString 進(jìn)行填充，直到字符串達(dá)到指定長(zhǎng)度。
- padString：可選，指定用于填充字符串的字符，默認(rèn)為 " "（空格）。
str.padStart(4, '0')URL 編碼/解碼
下面正式開始URL編碼的邏輯，核心的邏輯如下：
- 轉(zhuǎn)換為utf8數(shù)組
- 轉(zhuǎn)換為4進(jìn)制并左側(cè)補(bǔ)0到4位數(shù)
- 分割轉(zhuǎn)換為字符串?dāng)?shù)組
- 映射到o的不同形式
- 再次拼接為字符串，即轉(zhuǎn)換完成后的URL
// 獲取utf8數(shù)組
let unversioned = this.toUTF8Array(url)
// 轉(zhuǎn)換為base 4字符串
// padstart非常重要！否則會(huì)丟失前導(dǎo)0
.map(n => n.toString(4).padStart(4, "0"))
// 轉(zhuǎn)換為字符數(shù)組
.join("").split("")
// 映射到o的不同形式
.map(x => this.enc[parseInt(x)])
// 連接成單個(gè)字符串
.join("")上面有兩個(gè)關(guān)鍵點(diǎn)解釋一下，首先映射到o的不同形式這個(gè)是什么意思呢？其實(shí)轉(zhuǎn)換后的o并不是一種“o”，而是4種，只不過(guò)我們?nèi)庋劭吹降男Ч芟瘢ㄟ^(guò) encodeURI 轉(zhuǎn)換后的字符可以看出來(lái)。
encodeURI('o-ο-о-?')
// o-%CE%BF-%D0%BE-%E1%B4%8F這里其實(shí)也解釋了為什么上面為什么是轉(zhuǎn)換為4進(jìn)制和左側(cè)補(bǔ)0到四位數(shù)。因?yàn)樯厦娲a定義的 this.enc 如下，因?yàn)榭偣仓挥兴姆N“o”，4進(jìn)制只會(huì)產(chǎn)生0，1，2，3，這樣就可以將轉(zhuǎn)換后的utf8字符一一對(duì)應(yīng)上這幾種特殊的“o”。
enc = ["o", "ο", "о", "?"]最后的效果舉例轉(zhuǎn)換 http 這個(gè)字符：
- 轉(zhuǎn)換為utf8數(shù)組：[ 104, 116, 116, 112 ]
- 轉(zhuǎn)換為4進(jìn)制并左側(cè)補(bǔ)0到4位數(shù)：['1220', '1310', '1310', '1300']
- 分割轉(zhuǎn)換為字符串?dāng)?shù)組：['1', '2', '2', '0', '1', '3', '1', '0', '1', '3', '1', '0', '1', '3', '0', '0']
- 映射到o的不同形式：[ 'ο', 'о', 'о', 'o', 'ο', '?', 'ο', 'o', 'ο', '?', 'ο', 'o', 'ο', '?', 'o', 'o' ]
- 再次拼接為字符串，即轉(zhuǎn)換完成后的URL：οооoο?οoο?οoο?oo
到此整個(gè)轉(zhuǎn)換編碼的過(guò)程就結(jié)束了，看完后是不是覺(jué)得設(shè)計(jì)的很不錯(cuò)，編碼完后就是解碼，解碼就是將上面的過(guò)程倒序來(lái)一遍，恢復(fù)到最原始的URL地址。這里要注意一點(diǎn)的是每次解析4個(gè)字符且parseInt以4進(jìn)制的方式進(jìn)行解析。
// 獲取url的base 4字符串表示
let b4str = ooo.split("").map(x => this.dec[x]).join("")
let utf8arr = []
// 每次解析4個(gè)字符
// 記住添加前導(dǎo)0的填充
for (let i = 0; i < b4str.length; i += 4)
utf8arr.push(parseInt(b4str.substring(i, i + 4), 4))
// 返回解碼后的字符串
return this.Utf8ArrayToStr(utf8arr)最后
到此就核心實(shí)現(xiàn)代碼就分享結(jié)束了，看完是不是感覺(jué)并沒(méi)有很復(fù)雜，基于此設(shè)計(jì)或許可以延伸出其他的字符效果，有興趣的也可以試試看。將轉(zhuǎn)碼后的地址分享給你的朋友們一定會(huì)帶來(lái)不一樣的驚喜，下面是我轉(zhuǎn)換的一個(gè)AI小工具地址，點(diǎn)擊看看效果吧~
官網(wǎng)地址：「ooooooooooooooooooooooo.ooo」
ooooooooooooooooooooooo.ooo/ooooοооoο?οoο?οoο?ooο?o?o?ооoо??oо??οоο?οоo?oо?оοо?оοоoοοо?оοоo?οооoοоοοοо?оοоο?oо?оοоοоο?οοοо?о
