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

lcodecorex 發布于2019-08-30 15:44 / 480人閱讀

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

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

一、DocumentFragment文檔碎片
當我們用JS的DOM創建很多節點時，在加入節點到DOM樹上時，節點需要一個個渲染，這樣節點數較多時就會影響瀏覽器的渲染效率，這個時候我們將創建的節點都放在DocumentFragment這樣的節點上，然后把插入至DOM，只需要完成一次渲染就可以達到之前很多次的效果。把DocumentFragment節點插入文檔樹時，插入的不是DocumentFragment自身，而是它的所有子孫節點。這使得DocumentFragment成了有用的占位符，暫時存放那些一次插入文檔的節點，類似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標簽herf屬性中的Javascript:偽協議
偽協議不同于因特網上所真實存在的如http://,https://,ftp://,而是為關聯應用程序而使用的.如:tencent://(關聯QQ),data:(用base64編碼來在瀏覽器端輸出二進制文件),還有就是javascript:
我們可以在瀏覽地址欄里輸入"javascript:alert("JS!");",點轉到后會發現,實際上是把javascript:后面的代碼當JavaScript來執行,并將結果值返回給當前頁面類似,我們可以在a標簽的href屬性中使用javascript偽協議。
以下四種寫法作用相同，阻止了a標簽的默認行為，即點擊a標簽后不會發生跳轉了。void是javascript的操作符，意思是只執行表達式，但沒有返回值,不會在當前文檔處裝入任何內容，void(0)計算為0，則在JavaScript上沒有任何效果。

三、src屬性中的data：偽協議

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

四、HTML5中的 data-* 自定義屬性
大家都知道html標簽可以自定義屬性，并通過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內容只是attribute的一個子集，最大的好處是我們可以把所有自定義屬性在dataset對象中統一管理。

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

<持續更新中...>

云服務器 GPU云服務器實用功能 php實用功能前端技術主要有那些 linux防火墻有那些功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116220.html

前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
【長期更新】盤一盤那些 uTools 高質量插件，讓你的工作效率瞬間提升N倍！

摘要：參考增強神器，文檔搜索效率何止翻倍推薦系數圖片展示快速獲取文件文件夾名稱插件來源開發者插件介紹如名，鼠標選中文件或者文件夾，點擊鼠標中鍵激活插件即可將文件文件夾名稱復制到剪切板。 ...

remcarpediem 2021-09-02 15:41 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
前端每周清單半年盤點之 Node.js 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。對該漏洞的綜合評級為高危。目前，相關利用方式已經在互聯網上公開，近期出現攻擊嘗試爆發的可能。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡...

kid143 2019-08-21 11:59 評論0 收藏0