成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

盤點(diǎn)前端開(kāi)發(fā)中那些用得少卻很實(shí)用的功能

lcodecorex / 493人閱讀

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

盤點(diǎn)一些用得不多卻非常有用的前端知識(shí)，靠個(gè)人收集，如有缺漏，請(qǐng)同學(xué)們一起補(bǔ)充

一、DocumentFragment文檔碎片
當(dāng)我們用JS的DOM創(chuàng)建很多節(jié)點(diǎn)時(shí)，在加入節(jié)點(diǎn)到DOM樹(shù)上時(shí)，節(jié)點(diǎn)需要一個(gè)個(gè)渲染，這樣節(jié)點(diǎn)數(shù)較多時(shí)就會(huì)影響瀏覽器的渲染效率，這個(gè)時(shí)候我們將創(chuàng)建的節(jié)點(diǎn)都放在DocumentFragment這樣的節(jié)點(diǎn)上 ，然后把插入至DOM，只需要完成一次渲染就可以達(dá)到之前很多次的效果。把DocumentFragment節(jié)點(diǎn)插入文檔樹(shù)時(shí)，插入的不是DocumentFragment自身，而是它的所有子孫節(jié)點(diǎn)。這使得DocumentFragment成了有用的占位符，暫時(shí)存放那些一次插入文檔的節(jié)點(diǎn)，類似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}個(gè)li`
     flag.appendChild(li)
 }
 ul.appendChild(flag)
 document.body.appendChild(ul)

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

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



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


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


//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的一個(gè)子集，最大的好處是我們可以把所有自定義屬性在dataset對(duì)象中統(tǒng)一管理。


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




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

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116220.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    前端每周清單半年盤點(diǎn)之 Angular 篇
    
                                                     
    摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇

前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來(lái)發(fā)布的前端每周清單...
    
                                                   
                          
    
                                
    
                                    LeviDing
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    【長(zhǎng)期更新】盤一盤那些 uTools 高質(zhì)量插件，讓你的工作效率瞬間提升N倍！
    
                                                     
    摘要：參考增強(qiáng)神器，文檔搜索效率何止翻倍推薦系數(shù)圖片展示快速獲取文件文件夾名稱插件來(lái)源開(kāi)發(fā)者插件介紹如名，鼠標(biāo)選中文件或者文件夾，點(diǎn)擊鼠標(biāo)中鍵激活插件即可將文件文件夾名稱復(fù)制到剪切板。                                                                                                            ...
    
                                                   
                          
    
                                
    
                                    remcarpediem
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端-CSS3&H5
    
                                                     
    摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開(kāi)發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警

一勞永逸的搞定 flex 布局
尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
    
                                                   
                          
    
                                
    
                                    xiaolinbang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端每周清單半年盤點(diǎn)之 Node.js 篇
    
                                                     
    摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。對(duì)該漏洞的綜合評(píng)級(jí)為高危。目前，相關(guān)利用方式已經(jīng)在互聯(lián)網(wǎng)上公開(kāi)，近期出現(xiàn)攻擊嘗試爆發(fā)的可能。

前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡...
    
                                                   
                          
    
                                
    
                                    kid143
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<