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

資訊專欄INFORMATION COLUMN

自定義標(biāo)簽的編碼

chaosx110 / 3027人閱讀

摘要：，，優(yōu)化樣式插入自定義標(biāo)簽官方示例思考自定義標(biāo)簽的使用減少了我們頻繁編寫一堆冗余深層嵌套的代碼，提高了速率。

customElements.define

在MDN官方文檔中，如果你想要使用自定義標(biāo)簽，可以使用customElement類中define方法（IE7以下瀏覽器不支持），
使用：customElements.define("myselfTagName", myselfClass, extendsObj);
參數(shù)：

myselfTagName: 自定義標(biāo)簽名
myselfClass: 自定義標(biāo)簽的類對(duì)象，（主要功能在這里實(shí)現(xiàn)，一般在自定義標(biāo)簽綁定變量、事件、指令或者是渲染條件）
extendsObj: 內(nèi)置并繼承的元素（包裹著自定義標(biāo)簽的對(duì)象，一般不使用，畢竟誰(shuí)會(huì)閑的無(wú)聊把基本標(biāo)簽封裝成自定義標(biāo)簽然后填充一堆屬性，語(yǔ)義化也說(shuō)不通?。?/pre>
attachShadow

官方文檔對(duì)于shadow  DOM解釋很模糊，簡(jiǎn)單的說(shuō)就是DOM的"一體雙魂"，擁有同樣的函數(shù)和方法，但是Shadow DOM比被附加DOM更多的功能，前者具有獨(dú)自的作用域，并且與外界DOM分隔。（這個(gè)作用就是shadow DOM的核心功能，它可以使你編寫的DOM與css與其他區(qū)域互不影響，相當(dāng)于vue中css樣式的作用）；
shadow DOM彌補(bǔ)了customElements缺少隔離作用域（DOM和css作用域）的缺陷。


shadom DOM Root的創(chuàng)建方法： this.attachShadow({mode: "open"});


this: shadom DOM對(duì)象
mode: 開啟js調(diào)用shadow DOM

代碼示范

coding.... 莫道征途路漫漫



  
    
    Pop-up info box — web components
  
  
    
Pop-up info widget - web components


    

      

        
        
      

    

  
  



官方示例
MDN CODE

思考

自定義標(biāo)簽的使用減少了我們頻繁編寫一堆冗余、深層嵌套的代碼，提高了速率。然而，如果我們看頁(yè)面源碼會(huì)發(fā)現(xiàn)customElements.define不會(huì)消除自定義標(biāo)簽，自定義標(biāo)簽如果綁定了大量的數(shù)據(jù)、事件、敏感信息，頁(yè)面上又完全顯示出來(lái)，這就增加前端頁(yè)面的不安全性。如何保證開發(fā)者即使用自定義標(biāo)簽又不會(huì)編譯自定義標(biāo)簽從而導(dǎo)致DOM的過度掛載和數(shù)據(jù)的泄漏（不建議remove自定義標(biāo)簽，頻繁操作DOM太消耗內(nèi)存了），值得思考...

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

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

相關(guān)文章

  • 自定義標(biāo)簽的編碼

    摘要：，，優(yōu)化樣式插入自定義標(biāo)簽官方示例思考自定義標(biāo)簽的使用減少了我們頻繁編寫一堆冗余深層嵌套的代碼，提高了速率。 customElements.define 在MDN官方文檔中，如果你想要使用自定義標(biāo)簽，可以使用customElement類中define方法（IE7以下瀏覽器不支持），使用：customElements.define(myselfTagName, myselfClass, ...

    ernest.wang 評(píng)論0 收藏0

  • HTML編碼規(guī)范建議

    摘要：示例強(qiáng)制對(duì)中規(guī)定允許省略的閉合標(biāo)簽，不允許省略閉合標(biāo)簽。示例圖片強(qiáng)制禁止的取值為空。示例提交取消取消提交建議當(dāng)使用進(jìn)行表單提交時(shí)，如果條件允許，應(yīng)使原生提交功能正常工作。示例建議模板代碼應(yīng)以保證單個(gè)標(biāo)簽語(yǔ)法的正確性為基本原則。 這段時(shí)間在整理前端部分代碼規(guī)范，初步想法是從HTML、CSS、Javascipt、項(xiàng)目文件目錄四部分是整理。之前已經(jīng)整理完了CSS編碼規(guī)范，有興趣可以了解下 1...

    sunnyxd 評(píng)論0 收藏0

  • 機(jī)器學(xué)習(xí)“特征編碼”的經(jīng)驗(yàn)分享：魚還是熊掌？

    摘要：特征編碼類型本篇，我們主要說(shuō)一下分類型特征的編碼方式。下面，我們要對(duì)這個(gè)變量進(jìn)行編碼，在中有現(xiàn)成的獨(dú)熱編碼方法，代碼如下原來(lái)的變量被拆分為兩個(gè)單獨(dú)的變量，這兩個(gè)變量就是原來(lái)的分類特征值有電梯和無(wú)電梯。 作者：xiaoyu 微信公眾號(hào)：Python數(shù)據(jù)科學(xué) 知乎：python數(shù)據(jù)分析師 showImg(https://segmentfault.com/img/remote/146000...

    trilever 評(píng)論0 收藏0

  • 機(jī)器學(xué)習(xí)“特征編碼”的經(jīng)驗(yàn)分享：魚還是熊掌？

    摘要：特征編碼類型本篇，我們主要說(shuō)一下分類型特征的編碼方式。下面，我們要對(duì)這個(gè)變量進(jìn)行編碼，在中有現(xiàn)成的獨(dú)熱編碼方法，代碼如下原來(lái)的變量被拆分為兩個(gè)單獨(dú)的變量，這兩個(gè)變量就是原來(lái)的分類特征值有電梯和無(wú)電梯。 作者：xiaoyu 微信公眾號(hào)：Python數(shù)據(jù)科學(xué) 知乎：python數(shù)據(jù)分析師 showImg(https://segmentfault.com/img/remote/146000...

    JinB 評(píng)論0 收藏0

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

0條評(píng)論

chaosx110

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<