Web組件 – 構(gòu)建商業(yè)化應(yīng)用的基石

概述

Web Components（Web 組件）規(guī)范是一個(gè)新興的技術(shù)集合，允許您在前端Web應(yīng)用程序中定義已封裝的自定義HTML元素。 使用Web Components，您可以創(chuàng)建自己聲明的API來(lái)定義UI，從而創(chuàng)建您自己的商業(yè)化應(yīng)用程序。

本文介紹了Web組件技術(shù)及其在新一代純前端控件集 WijmoJS 中的應(yīng)用。

Web組件核心技術(shù)

Web組件的核心技術(shù)由以下四個(gè)標(biāo)準(zhǔn)組成：

• 自定義元素

• Shadow DOM

• HTML模板

• HTML導(dǎo)入

自定義元素

自定義元素允許您創(chuàng)建自己的HTML元素，可以像標(biāo)記HTML代碼一樣使用標(biāo)記。

使用自定義元素，您可以：

• 以聲明方式向標(biāo)記添加元素。

• 使用自定義屬性定義其初始值，并使這些值自動(dòng)傳播到相應(yīng)的屬性值。

• 使用標(biāo)準(zhǔn)Element.addEventListener方法訂閱自定義事件。

純前端控件集 WijmoJS 作為自定義元素

通過(guò)WijmoJS build 462，我們引入了 Web Components互操作用法，允許您將 WijmoJS 控件用作自定義元素。例如，您可以使用以下HTML添加包含列和過(guò)濾器的輕量前端表格控件FlexGrid：

<wjc-flex-grid id="grid">
    <wjc-flex-grid-filter></wjc-flex-grid-filter>

    <wjc-flex-grid-column binding="country" header="Country" width="*"/>
    <wjc-flex-grid-column binding="date" header="Date"/>
    <wjc-flex-grid-column binding="downloads" header="Downloads"/></wjc-flex-grid>

有了這個(gè)標(biāo)記，你可以一方面使用傳統(tǒng)的DOM API在JavaScript代碼中操作它，另一方面可以在HTML元素上使用訪問(wèn)控制特定的API。

例如：

• 選擇FlexGrid元素：let grid = docement.getElementById（'grid'）;

• 調(diào)用表格方法：grid.autoSizeColumns（）;

• 訂閱表格事件：grid.addEventListener（'updatedView'，（e）=> {doSomething（）;}）;

這是一個(gè)Web Components Intro示例，可用于獲取有關(guān)WijmoJS Web Components互操作用法的更多詳細(xì)信息。

若使瀏覽器在本機(jī)離線工作，Web組件就要實(shí)現(xiàn) ES2015（ES6）代碼。為了實(shí)現(xiàn)這一點(diǎn)，WijmoJS 在build 462中添加了兩個(gè)npm圖像，wijmo-es2015-commonjs-min和wijmo-es2015-esm-min，它們分別包含CommonJS和ESM模塊格式的WijmoJS ES6代碼。

Web組件的商業(yè)化應(yīng)用

無(wú)論是使用純JavaScript還是使用框架實(shí)現(xiàn)應(yīng)用程序，都可以從Web組件的使用中受益。

純JavaScript中的Web組件

使用純JavaScript中的Web組件，您將獲得一個(gè)聲明，自定義可維護(hù)的HTML標(biāo)記，而不用添加一堆這樣的神秘元素定義：

<div id=”statGrid”/><div id=” inpSales”/>

使用WijmoJS 控件的 Web組件后，您還可以聲明下面的標(biāo)記：

<wjc-flex-grid>
      <wjc-flex-grid-column binding=”date” header=”Date”/>
      <wjc-flex-grid-column binding=”sales” header=”Sales”></wjc-flex-grid><wjc-input-number step=”1” format=”c2”/>

這段代碼可用于無(wú)法以聲明方式表示的特殊處理上。也就是說(shuō)，您可以在正確的位置定義內(nèi)容 - 標(biāo)記中的UI及其在JavaScript代碼中的行為。

此標(biāo)記目前在Chrome和Safari中原生使用，并且可以在使用Polyfills技術(shù)的其他瀏覽器中使用。

前端框架中的Web組件

用在 Angular，React 和 Vue 等前端框架中，Web Components會(huì)帶來(lái)更多擴(kuò)展，如屬性、方法和綁定事件。Web Components 提供了為框架顯式而創(chuàng)建的本地組件幾乎相同的易用×××。允許您在不同的框架中重用由它們創(chuàng)建的相同組件和行為庫(kù)，而不會(huì)犧牲其易用性。

我們?cè)贏ngular示例中添加了WijmoJS 的 Web組件，演示了它在Angular中的工作原理。

例如，以下HTML標(biāo)記創(chuàng)建了 WijmoJS 的 InputNumber和LinearGauge控件，這些控件可用來(lái)顯示和更新相同的模型屬性。

注意：在實(shí)現(xiàn)這種雙向綁定行為時(shí)，我們沒(méi)有使用任何JavaScript代碼隱藏行和第三方庫(kù)：

<wjc-input-number [value]="theValue" (value-changed)="theValue = $event.target.value"/>
<wjc-linear-gauge [value]="theValue" (value-changed)="theValue = $event.target.value"/>

使用Web組件是否要考慮瀏覽器兼容性？

Web Components適用于所有瀏覽器。目前，您可以在Chrome和Safari中本地運(yùn)行Web Components，而不應(yīng)用任何Polyfill。

FireFox支持特定開(kāi)發(fā)者模式下的Web組件。當(dāng)然，這種支持很快會(huì)應(yīng)用到實(shí)際使用版本中?，F(xiàn)在，您也可以使用webcomponentsjs庫(kù)中的webcomponents-lite.js polyfill在此瀏覽器中運(yùn)行Web Components。

當(dāng)然，Edge和 IE 中也可以使用。您可以通過(guò)運(yùn)行ES5代碼并應(yīng)用webcomponentsjs庫(kù)中的custom-elements-es5-adapter.js polyfill以及為FireFox指定的polyfill來(lái)在Internet Explorer中運(yùn)行Web組件。

WijmoJS互操作用法和Web組件的未來(lái)？

我們已經(jīng)在WijmoJS Web Components互操作用法方面解決了幾個(gè)問(wèn)題。首先是添加更多的示例，特別是在React，Vue和Polymer等不同框架中添加如何演示W(wǎng)eb組件的使用示例。如果您需要在其他框架也添加上述示例，可以聯(lián)系您的技術(shù)顧問(wèn)。

總結(jié)

高度用戶自定制一直是純前端控件集WijmoJS的產(chǎn)品特色之一。因此，我們同樣為WijmoJS控件添加了對(duì)Shadow DOM的支持和原生CSS樣式支持的兩種模式，Shadow DOM 允許控件可以通過(guò)CSS變量（a.k.a.自定義屬性）進(jìn)行自定義，當(dāng)然這只是一種可選功能（可由全局屬性切換），此技術(shù)的當(dāng)前狀態(tài)在控件定制中施加了嚴(yán)重限制。如果開(kāi)發(fā)人員喜歡更靈活的自定制方式，也可以使用沒(méi)有Shadow DOM的傳統(tǒng) WijmoJS Web組件。