Web Component組件化

2021-03-02 喬克前端

你可能聽過一些框架例如:Vue/React,你也可能會知道一些組件庫例如: Element-UI/Ant Design.

拿Vue舉例,每一個.vue文件就是一個組件,其中每一個.vue文件中都會有一個模板<template>,最終代碼會將這些模板壓縮打包在一起形成一個.html文件

拿Element來說,每一個組件就是一個Web Component,可以多個合用,多次復用!

對比來說,Web Component就像是一個.vue文件,可復用/拓展性強!

直接上手,我們來寫一個最基本的Web Component!

<el-dialog></el-dialog>

仿照Element-UI組件,我們自定義一個HTML標籤,這就是一個自定義元素.

這裡要注意:自定義元素名稱要求在其中使用破折號,不能只是一個單詞!


自定義元素有了,接下來我們要定義一個javascript類,用來擴展HTMLElement類.

<script>class ElDialog extends HTMLElement {  constructor() {    super();  }}</script>

以上代碼包括了:

1.定義一個ElDialog類繼承了HTML元素的特性

2.constructor()調用這個類

3.super()建立正確的原型鏈.

4.你可以在這裡使用javascript語法


Web文檔上自定義元素的控制者是CustomElementRegistry對象-該對象允許您在頁面上註冊自定義元素,返回有關已註冊哪些自定義元素的信息,等等.


要在頁面上註冊自定義元素,請使用CustomElementRegistry.define()方法.


window.customElements.define('el-dialog', ElDialog);

這樣一來,我們就完成了一個自定義元素的註冊了!

But~  這個自定義元素是空的, 我們向裡面加入內容

<body><el-dialog></el-dialog>    <script>class ElDialog extends HTMLElement {  constructor() {    super();      this.render();  }      render() {      this.obj = document.createElement('div')      this.obj.innerHTML = `      <div>    <div>這是一個標題</div>    <div>這是內容</div>      </div>      `      this.append(this.obj)  }}window.customElements.define('el-dialog', ElDialog);</script></body>

1.定義一個javascript函數render(),這個函數在javascript類創建時調用

2.這個函數創建了一個<div></div>元素

3.使用模板字符串向創建的這個div元素中插入了HTML元素,

4.this.append(this.obj): 將整個DOM結構插入了自定義元素實例

現在,你已經實現了基本的Web Component!

可是,這些數據是寫死的怎麼能行呢?

我們來實現動態數據:

<body>  <el-dialog title="這是動態標題" content="這是動態內容"></el-dialog>
<script> class ElDialog extends HTMLElement { constructor() { super(); let attr = this.attributes; this._data = { title: attr.title ? attr.title.value : '默認的標題', content: attr.content ? attr.content.value : '默認內容' } this.render() }
render() { this.obj = document.createElement('div') this.obj.innerHTML = ` <div> <div>${ this._data.title }</div> <div>${ this._data.content }</div> </div> ` this.append(this.obj) } } window.customElements.define('el-dialog', ElDialog);</script></body>

哇喔~~~現在數據已經動態渲染出來了,使用谷歌瀏覽器打開看一下,是不是很酷!

使用上面的DOM結構,你可能會感覺有點麻煩

別急~

上面我說過 Web Component就像是一個.vue文件,可復用/拓展性強!為什麼這麼說呢, 一起來看接下來的代碼~~~

<body>  <el-dialog  title="這是動態標題"  content="這是動態內容"  img="http://wuliwu.top/logo.png"  ></el-dialog>  <template id="myElDialog">    <style>      .box {        display: inline-block;        text-align: center;        border: 1px solid #dedede;        padding: 40px;      }
.title { font-size: 24px; color: #333; }
.content { font-size: 16px; color: #666; }</style> <div class="box"> <img> <div class="title"></div> <div class="content"></div> </div> </template>
<script> class ElDialog extends HTMLElement { constructor() { super();
var templateElem = document.getElementById('myElDialog'); var content = templateElem.content.cloneNode(true); content.querySelector('img').setAttribute('src', this.getAttribute('img')); content.querySelector('.title').innerHTML = this.getAttribute('title') content.querySelector('.content').innerText = this.getAttribute('content') this.appendChild(content); } }
window.customElements.define('el-dialog', ElDialog);</script></body>

哦呵! 出現了很熟悉的的東西<template>

模板標籤, 裡面有style樣式,有DOM結構

我們來看一下效果圖和DOM結構:

有模板<template>, 有樣式<style>, 有腳本<script>

哪裡需要哪裡調用,只需調用<el-dialog>自定義元素就行了

數據放在自定義元素的屬性值中, 是不是感覺和 vue 中的 slot 插槽類似?

將Web Component的代碼隱藏起來,DOM與外部DOM隔離,內部任何代碼都無法影響外部.

使用方法this.attachShadow()開啟Shadow DOM

<script>class ElDialog extends HTMLElement {  constructor() {    super();    var shadow = this.attachShadow( { mode: 'closed' } );
var templateElem = document.getElementById('myElDialog'); var content = templateElem.content.cloneNode(true); content.querySelector('img').setAttribute('src', this.getAttribute('img')); content.querySelector('.title').innerHTML = this.getAttribute('title') content.querySelector('.content').innerText = this.getAttribute('content') shadow.appendChild(content); }}
window.customElements.define('el-dialog', ElDialog);</script>

這樣,一個完整的Web Component組件就已經完成了, 是不是很簡單

Web組件是一套不同的技術,允許您創建可重用的自定義元素(其功能與其他代碼封裝在一起),並在Web應用程式中使用它們.

使用簡單, 能夠提升開發效率!


Firefox(版本63),Chrome和Opera中默認支持Web組件。

Safari支持許多Web組件功能,但少於上述瀏覽器。

但是我們依舊可以使用一些第三方庫實現支持!

接下來, 讓我們靜待佳音,相信在不久的將來Web Component將會普及!

相關焦點

  • AlloyTeam:致我們終將組件化的 Web (多圖)
    componentWillMount()  準備插入前componentDidlMount()  插入後componentWillUpdate() 準備更新前componentDidUpdate()  更新後componentWillUnmount
  • ECS之Component組件
    Entity之後,咱們來到了Component組件。Component是ECS架構的三個基本元素之一。Component組件中包含了遊戲或者應用的數據。Entity是組件集合的索引,System包含具體的邏輯行為。
  • Android徹底組件化(二)-Demo發布
    有感於此,我覺得很有必要設計一套完整的組件化方案,經過幾周的思考,反覆的推倒重建,終於形成了一個完整的思路,整理在我的第一篇文章中Android徹底組件化方案實踐。這兩個月以來,得到的Android團隊按照這個方案開始了組件化的拆分,經過兩期的努力,目前已經拆分兩個大的業務組件以及數個底層lib庫,並對之前的方案進行了一些完善。
  • Vue最重要的知識點:組件化開發
    再學一下vue中的組件化開發,包括全局、局部組件以及父子組件之間的通信。最後關於組件框架,後續在項目中遇到具體的需求再做說明。三、組件化開發組件的使用,比如說網易雲音樂就是一個典型的例子,多個頁面共用一個頭部導航欄,所以需要在不同的組件中共享導航欄組件。這就叫做組件化開發。
  • vue組件詳解—組件通信
    父組件可以直接在子組件的自定義標籤上使用v-on 來監昕子組件觸發的自定義事件,如:<div id="app9"><p>總數:{{total}}</p> <my-component9 @add="getTotal" @cut="getTotal"></my-component9></div>Vue.component
  • vue組件詳解—組件與復用
    一、什麼是組件組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。如:<div id="app1"><my-component></my-component></div>Vue.component('my-component',{
  • web components的一些知識點
    這次大致對web components這個東西,簡單的做下介紹。web components 概念有時候覆雜的HTML及相關的樣式會在多個地方用到,基於Vue及React我們可以將這個重複的內容封裝成一個組件,web components也是為了實現同樣的功能,但是它不依賴於現有的三大框架,直接通過原生HTML標籤實現。
  • 2021年你應該知道的9個網頁組件庫
    根據定義,所有web組件都是可互操作的,可以很好地與其他組件協作。自定義組件和小部件建立在網頁組件標準之上,可以跨現代瀏覽器工作,並且可以與任何與HTML一起工作的JavaScript庫或框架一起使用。那麼現在網上有哪些現成的網頁組件庫科研使用呢?下面為大家提供了9個不錯的組件庫,希望能對你有所幫助。1.
  • 解讀 vue-class-component 源碼實現原理
    內部主要依靠vue-class-component 實現,所以將重點放在對 vue-class-component 的解讀上。Vue 內部會調用 Vue.extend() 創建組件的構造函數,以便在模板中使用時,通過構造函數初始化此組件。
  • React 中高階函數與高階組件(上)
    前言React 中最大的一亮點,就是組件化開發模式,而編寫 React 組件,對於無狀態的組件,我們可以用函數式組件編寫,而複雜的組件(聰明組件/外層組件)可以用類class編寫組件在 React 中提到了高階函數與高階組件,一直以來,對它們都是持以仰望的,逼格高的詞調,常常把自己給整暈的
  • Android徹底組件化方案實踐
    一、模塊化、組件化與插件化項目發展到一定程度,隨著人員的增多,代碼越來越臃腫,這時候就必須進行模塊化的拆分。在我看來,模塊化是一種指導理念,其核心思想就是分而治之、降低耦合。而在Android工程中如何實施,目前有兩種途徑,也是兩大流派,一個是組件化,一個是插件化。  提起組件化和插件化的區別,有一個很形象的圖:
  • [開源推薦]面向組件的Web框架tapestry
    tapestry是面向組件的開源框架,程式設計師可以使用它在Java、Groovy、Scala中創建動態、健壯和高度可伸縮的Web應用程式。與現有的其他Web應用程式框架而言,應用tapestry會讓程式設計師從繁瑣的,不必要的底層代碼中解放出來。
  • 看了看react舊版本中的ReactCompositeComponent.js文件
    render(): 從this.props 或 this.state中獲取值去渲染組件結構componentWillMount(): 在組件最初創建並即將加載時調用。這可能會有副作用,但任何外部訂閱或數據必須在「componentWillUnmount」中清除componentDidMount(): 在組件加載完成並且有確定的DOM呈現時觸發,但是不保證DOM節點已經插入到Document中。
  • React源碼分析與實現(一):組件的初始化與渲染
    傳統上,web架構使用模板或者HTML指令構造頁面。react則處理構建用戶界面通過將他們份極為virtual dom,當然這也是react的核心,整個react架構的設計理念也是為此展開的。準備工作我們採用基線法去學習react源碼,所以目前基於的版本為stable-0.3,後面我們在逐步分析學習演變的版本。
  • 如何寫一個vue組件專題及常見問題 - CSDN
    <my-component v-model="foo" />如果該組件可以獨立運行,不依賴父組件時,還是給這個值起個名字吧<component-no-sync :childNeed="foo" />很多值需要傳入組件我們原先的父組件寫法:
  • web遊戲《小人國世界》6月2日開啟公測
    FLEX是什麼及與FLASH的關係的介紹Flex 是 Macromedia發布的presentation server(展現服務),它是java web大名鼎鼎的Macromedia Flash是強大的矢量動畫編輯工具,在作動畫起家之後,Flash一直在謀求rich internet application(ria富客戶端)的霸主地位,最有影響的是,已經推出了面向對象的編成腳本actions cript2.0,並且建立起類似於java swing的類庫和相應component(組件)。
  • 類java.awt.Component 的使用 (Java 2 Platform SE 6)
    add(Component component)          添加一個 component,其選項卡的默認值為調用 component.getName 返回的組件的名稱。add(Component component, int index)          在指定的選項卡索引位置添加一個 component,默認的選項卡標題為組件名稱。
  • 前端之React實戰-組件
    組件是React的核心概念,React 允許將代碼封裝成組件(component),然後像插入普通 HTML 標籤一樣,在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類。對React應用而言,你需要分割你的頁面,使其成為一個個的組件。也就是說,你的應用是由這些組件組合而成的。你可以通過分割組件的方式去開發複雜的頁面或某個功能區塊,並且組件是可以被復用的。
  • 動手創建一個微信小程序的組件
    json文件如下{ "usingComponents": { "component": "/component/component" }}即上方中設置該文件夾為組件文件夾命名有點不規範,應該命名為componentsComponent({ properties: { // 這裡定義了innerText屬性,屬性值可以在組件使用時指定
  • 學習vue源碼(3) 手寫Vue.directive、Vue.filter、Vue.component方法
    註冊組件時,還會自動使用給定的id設置組件的名稱。<!-- 註冊組件,傳入一個擴展過的構造器 -->Vue.component('my-component',Vue.extend({/*...*/}));<!