盤點前端開發(fā)中那些用得少卻很實用的功能

lcodecorex 發(fā)布于2019-08-30 15:44 / 486人閱讀

摘要：瀏覽者點擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務(wù)器，用來發(fā)送，等驗證信息時不會有瀏覽器不支持，和用戶禁用的煩惱。

盤點一些用得不多卻非常有用的前端知識，靠個人收集，如有缺漏，請同學(xué)們一起補充

一、DocumentFragment文檔碎片
當(dāng)我們用JS的DOM創(chuàng)建很多節(jié)點時，在加入節(jié)點到DOM樹上時，節(jié)點需要一個個渲染，這樣節(jié)點數(shù)較多時就會影響瀏覽器的渲染效率，這個時候我們將創(chuàng)建的節(jié)點都放在DocumentFragment這樣的節(jié)點上，然后把插入至DOM，只需要完成一次渲染就可以達到之前很多次的效果。把DocumentFragment節(jié)點插入文檔樹時，插入的不是DocumentFragment自身，而是它的所有子孫節(jié)點。這使得DocumentFragment成了有用的占位符，暫時存放那些一次插入文檔的節(jié)點，類似vue中的template。

 // 效率上 createElement < innerHTML < documentFragment
 var ul = document.createElement("ul");
 var flag = document.createDocumentFragment();
 for(var i=1; i<101; i++){
     var li = document.createElement("li")
     li.innerHtml = `我是第${i}個li`
     flag.appendChild(li)
 }
 ul.appendChild(flag)
 document.body.appendChild(ul)

二 a標(biāo)簽herf屬性中的Javascript:偽協(xié)議
偽協(xié)議不同于因特網(wǎng)上所真實存在的如http://,https://,ftp://,而是為關(guān)聯(lián)應(yīng)用程序而使用的.如:tencent://(關(guān)聯(lián)QQ),data:(用base64編碼來在瀏覽器端輸出二進制文件),還有就是javascript:
我們可以在瀏覽地址欄里輸入"javascript:alert("JS!");",點轉(zhuǎn)到后會發(fā)現(xiàn),實際上是把javascript:后面的代碼當(dāng)JavaScript來執(zhí)行,并將結(jié)果值返回給當(dāng)前頁面類似,我們可以在a標(biāo)簽的href屬性中使用javascript偽協(xié)議。
以下四種寫法作用相同，阻止了a標(biāo)簽的默認行為，即點擊a標(biāo)簽后不會發(fā)生跳轉(zhuǎn)了。void是javascript的操作符，意思是只執(zhí)行表達式，但沒有返回值,不會在當(dāng)前文檔處裝入任何內(nèi)容，void(0)計算為0，則在JavaScript上沒有任何效果。

三、src屬性中的data：偽協(xié)議

data表示取得數(shù)據(jù)的協(xié)定名稱，image/png 是數(shù)據(jù)類型名稱，base64 是數(shù)據(jù)的編碼方法，逗號后面就是這個image/png文件base64編碼后的數(shù)據(jù)。目的是將一些小的數(shù)據(jù)，比如小頭像，小圖標(biāo)，通過編碼后直接嵌入到網(wǎng)頁中，從而不用再從外部文件載入。

四、HTML5中的 data-* 自定義屬性
大家都知道html標(biāo)簽可以自定義屬性，并通過getAttribute/setAttribute方法對自定義屬性進行讀取和寫入，但是混亂無管理的自定義屬性讓html5下定決心推出data-*的方式來管理自定義屬性，并自帶一套讀寫方法。

//read
 Click Here 

var test = document.getElementById("test")
console.log(test.dataset.age) // 24

//write
 Click Here 

var test = document.getElementById("test")
test.dataset.age = 18
console.log(test.dataset.age) // 18

以上操作可以用getAttribute/setAttribute完全代替，dataset內(nèi)容只是attribute的一個子集，最大的好處是我們可以把所有自定義屬性在dataset對象中統(tǒng)一管理。

五、input輸入框的type="hidden"屬性
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者點擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務(wù)器，用來發(fā)送cookie，token等驗證信息時不會有瀏覽器不支持，和用戶禁用cookie的煩惱。

<持續(xù)更新中...>