日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
看了QuarkDesign后，我去深入了解了WebComponents

?1.寫在前面

最近哈啰單車前端團(tuán)隊(duì)開源的Quark Design組件庫(kù)，號(hào)稱是下一代前端組件庫(kù)，可以同時(shí)在任意框架或無框架中使用。

江陰ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

那么，什么是Web Components？

2.什么是Web Components？

現(xiàn)今前端生態(tài)中框架層出不窮，在生產(chǎn)中為了提升效率和標(biāo)準(zhǔn)化組件，就會(huì)針對(duì)框架開發(fā)組件庫(kù)。但是各種框架之間是不兼容的，對(duì)此需要對(duì)應(yīng)開發(fā)適應(yīng)框架的組件庫(kù)，這樣也造成維護(hù)成本攀升。就如同物理界有電磁相互作用、強(qiáng)相互作用以及弱相互作用，需要單獨(dú)的物理理論來解釋這三種作用造成的物理現(xiàn)象，這樣讓眾多物理學(xué)家在朝著大統(tǒng)一理論前進(jìn)，而Web Components可以看作是現(xiàn)今UI組件庫(kù)"大統(tǒng)一理論"的一種解決方案。

Web Components與React、Vue?等框架中的組件類似，其實(shí)在Vue中也采用了很多基于Web Components?的設(shè)計(jì)。這是一個(gè)可復(fù)用的UI構(gòu)建模塊，封裝了所有渲染所需要的HTML、CSS?以及基于Javascript?的邏輯。最大的區(qū)別是，它不依賴于特定的JavaScript框架，而是利用瀏覽器原生提供的技術(shù)，這樣你的Web組件就與框架無關(guān)了。

3.Web Components的主要內(nèi)容

Web Components的主要內(nèi)容如下：

  • Custom Elements?：原生提供的API，用于可自定義Custom Elements和行為。
  • Shadow DOM：原生提供的API，用于封裝與主文檔DOM隔離的私有DOM，不受外部DOM的樣式和行為的影響。
  • Templates：
  • Attributes：
  • Slots：
  • Life cycle methods：

接下來，跟隨我的腳步在例子中逐個(gè)實(shí)現(xiàn)這些概念，逐個(gè)擊破理論。

4.Custom Elements

Custom Elements是Web Components?中的一個(gè)重要特性，可以提供給開發(fā)者將html的功能封裝為自定義標(biāo)簽，方便進(jìn)行復(fù)用。也就是說，Custom Elements?本質(zhì)上是用戶用于實(shí)現(xiàn)在html?中有效使用的，類似

、`
}
}

// 3、進(jìn)行自定義組件的注冊(cè)
customElements.define("one-button", OneButton)

// index.html
// 4、html中進(jìn)行使用

運(yùn)行展示：

5.Shadow DOM

Shadow DOM?與原生DOM的區(qū)別就是用戶自定義封裝的DOM，本質(zhì)上還是DOM元素。不同的是，Shadow DOM?可以將自定義的DOM片段與其他DOM進(jìn)行隔離，可以實(shí)現(xiàn)樣式不受外部DOM的影響，類似于使用iframe?內(nèi)嵌了一個(gè)html。也正是Shadow DOM的存在，能夠進(jìn)行DOM隔離、實(shí)現(xiàn)獨(dú)立的組件王國(guó)，使得自定義組件跨域框架的約束，不再耦合，確保在任何無框架和任何框架中正常使用。

如圖所示：

圖示來自MDN文檔

一些 Shadow DOM 特有的術(shù)語(yǔ)：

  • Shadow host：一個(gè)常規(guī) DOM 節(jié)點(diǎn)，Shadow DOM 會(huì)被附加到這個(gè)節(jié)點(diǎn)上。
  • Shadow tree：Shadow DOM 內(nèi)部的 DOM 樹。
  • Shadow boundary：Shadow DOM 結(jié)束的地方，也是常規(guī) DOM 開始的地方。
  • Shadow root: Shadow tree 的根節(jié)點(diǎn)。

Shadow DOM ?并不是新生事物，在原生

那么，就接著上面的例子一起來實(shí)現(xiàn)下：

// one-button.js
// 1、創(chuàng)建自定義組件的類
class OneButton extends HTMLElement{
    constructor(){
        super()
        // 2、創(chuàng)建shadow dom
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = ``
    }
}

// 3、進(jìn)行自定義組件的注冊(cè)
customElements.define("one-button", OneButton)

運(yùn)行得到：

在上面運(yùn)行結(jié)果中，實(shí)現(xiàn)的展示效果是一樣，但是渲染的dom節(jié)點(diǎn)卻有所不同，在使用shadow dom?實(shí)現(xiàn)的標(biāo)簽中會(huì)有#shadow-root字樣標(biāo)識(shí)。

接下來，我們給他們添加上樣式，進(jìn)行對(duì)比：




運(yùn)行結(jié)果：

在上面代碼片段中，在全局對(duì)button?標(biāo)簽進(jìn)行設(shè)置樣式，運(yùn)行結(jié)果表明并未影響到shadow dom中的樣式。

6.Template

見到template?模板，使用過vue框架的開發(fā)者就再熟悉不過了，template?標(biāo)簽本身不會(huì)在html?中進(jìn)行立即渲染，而是用于對(duì)待使用的代碼進(jìn)行標(biāo)記，在需要被使用的時(shí)候才會(huì)進(jìn)行渲染。也正是因?yàn)閠emplate?的特性，使得我們可以將一些可重復(fù)使用的代碼用template?進(jìn)行組織，通過javascript獲取它的引用，再添加到DOM中。

For Example：



在上面代碼片段中，可以看到在需要使用的時(shí)候?qū)⒛０鍍?nèi)容追加到shadow dom中，即模板內(nèi)容不會(huì)立即被渲染，而是在被調(diào)用后才會(huì)在頁(yè)面進(jìn)行渲染。

注意：

為什么這里使用Node.cloneNode() 方法添加了模板的拷貝到陰影的根結(jié)點(diǎn)上？

這是因?yàn)樵谔砑幽０鍍?nèi)容到shadow dom?時(shí)，后續(xù)可以添加樣式信息到模板的style標(biāo)簽上，也會(huì)將其封裝到自定義標(biāo)簽中，倘若直接將模板添加到原生DOM元素中不起作用的。

7.Slots

插槽由其name屬性標(biāo)識(shí)，并且允許您在模板中定義占位符，當(dāng)在標(biāo)記中使用該元素時(shí)，該占位符可以填充所需的任何 HTML 標(biāo)記片段。使用過vue框架的開發(fā)者，對(duì)這部分內(nèi)容再熟悉不過了。

運(yùn)行結(jié)果：

在上面片段中，在使用自定義標(biāo)簽的時(shí)候，如果?中沒有插入任何內(nèi)容，展示的將是hello onechuan?，倘若在在使用時(shí)插入了自定義內(nèi)容，則展示自定義內(nèi)容hello yichuan。

當(dāng)然，當(dāng)自定義組件中有多個(gè)地方使用插槽，可以通過給每個(gè)插槽命名進(jìn)行標(biāo)識(shí)，即：命名插槽。

類似于：vue中的mount。


    
    
        slot 這個(gè)我熟呀

運(yùn)行結(jié)果：

?connectedCallback

connectedCallback?方法會(huì)在自定義組件插入DOM的首次渲染時(shí)調(diào)用一次。此時(shí) shadow dom?已經(jīng)掛載到DOM樹上，對(duì)此可以通過connectedCallback?方法來訪問shadow dom上的屬性、子元素以及監(jiān)聽事件。倘若組件被移除或被移動(dòng)，將會(huì)再次被調(diào)用。


運(yùn)行結(jié)果：

在上面代碼片段中，看到在進(jìn)行渲染初始化后，會(huì)進(jìn)行執(zhí)行一次connectedCallback的內(nèi)容。

?attributeChangedCallback

監(jiān)聽custom element?自身屬性的增刪改，當(dāng)發(fā)生狀態(tài)改變時(shí)調(diào)用此方法，在使用前必須在一個(gè)observedAttributes() ?的靜態(tài)方法中定義要觀察的屬性。該方法返回一個(gè)屬性名稱的數(shù)組。一旦observedAttributes?返回了屬性值數(shù)組，則attributeChangedCallback方法會(huì)在每次該屬性變化時(shí)調(diào)用。

這個(gè)方法有三個(gè)參數(shù)：屬性名稱被改變，該屬性的舊值，以及更新的值。當(dāng)this.setAttribute()觸發(fā)時(shí)，屬性會(huì)被更新。

disconnectedCallback

當(dāng) custom element? 從文檔 DOM? 中刪除時(shí)，disconnectedCallback被調(diào)用。



8.寫在最后
在我們上述實(shí)現(xiàn)的自定義組件，可以在整個(gè)項(xiàng)目中重復(fù)使用。簡(jiǎn)而言之，在構(gòu)建Web Components時(shí)，步驟如下：
  • 首先，必須使用customElements.define()注冊(cè)自定義元素；
  • 構(gòu)造函數(shù)會(huì)調(diào)用，將節(jié)點(diǎn)添加到shadow dom中
  • 然后，進(jìn)行一次初始化，執(zhí)行connectedCallback方法；
  • 當(dāng)元素的屬性被更新時(shí)，它的attributeChangedCallback()被觸發(fā)；
  • 當(dāng)一個(gè)事件從元素中被移除時(shí)，disconnectedCallback()方法被調(diào)用以清理事件監(jiān)聽器。
  • shadow dom - 是DOM的一個(gè)封裝版本，用于防止CSS泄露。
  • Slots ?- 用于添加和訪問自定義元素組件的子元素，也有一種特殊的方式來訪問使用命名為Slot的子元素。


本文參考和整理了許多文檔資料，學(xué)而知不足，繼續(xù)前行。
9.參考文章
《Web Components Basic to Advanced》
《MDN文檔》
《重磅！哈啰 Quark Design 正式開源，下一代跨技術(shù)棧前端組件庫(kù)》
                                                

                                                文章標(biāo)題：看了QuarkDesign后，我去深入了解了WebComponents                                                

                                                轉(zhuǎn)載來源：http://www.dlmjj.cn/article/djddsss.html