Web元件 – 構建商業化應用的基石

概述

Web Components（Web 元件）規範是一個新興的技術集合，允許您在前端Web應用程式中定義已封裝的自定義HTML元素。 使用Web Components，您可以建立自己宣告的API來定義UI，從而建立您自己的商業化應用程式。

本文介紹了Web元件技術及其在新一代 純前端控制元件集 WijmoJS  中的應用。

Web元件核心技術

Web元件的核心技術由以下四個標準組成：

自定義元素Shadow DOMHTML模板HTML匯入

自定義元素

自定義元素允許您建立自己的HTML元素，可以像標記HTML程式碼一樣使用標記。

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

以宣告方式向標記新增元素。使用自定義屬性定義其初始值，並使這些值自動傳播到相應的屬性值。使用標準Element.addEventListener方法訂閱自定義事件。

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

通過WijmoJS build 462，我們引入了 Web Components互操作用法，允許您將  WijmoJS 控制元件 用作自定義元素。例如，您可以使用以下HTML新增包含列和過濾器的輕量前端表格控制元件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>

有了這個標記，你可以一方面使用傳統的DOM API在Java程式碼中操作它，另一方面可以在HTML元素上使用訪問控制特定的API。

例如：

選擇FlexGrid元素：let grid = docement.getElementById（'grid'）;呼叫表格方法：grid.autoSizeColumns（）;訂閱表格事件：grid.addEventListener（'updatedView'，（e）=> {doSomething（）;}）;

這是一個Web Components Intro示例，可用於獲取有關WijmoJS Web Components互操作用法的更多詳細資訊。

若使瀏覽器在本機離線工作，Web元件就要實現 ES2015（ES6）程式碼。為了實現這一點，WijmoJS 在build 462中新增了兩個npm影像，wijmo-es2015-commonjs-min和wijmo-es2015-esm-min，它們分別包含CommonJS和ESM模組格式的WijmoJS ES6程式碼。

Web元件的商業化應用

無論是使用純Java還是使用框架實現應用程式，都可以從Web元件的使用中受益。

純Java中的Web元件

使用純Java中的Web元件，您將獲得一個宣告，自定義可維護的HTML標記，而不用新增一堆這樣的神祕元素定義：

<div id=”statGrid”/>

<div id=” inpSales”/>

使用 WijmoJS  控制元件的 Web元件後，您還可以宣告下面的標記：

<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”/>

這段程式碼可用於無法以宣告方式表示的特殊處理上。也就是說，您可以在正確的位置定義內容 - 標記中的UI及其在Java程式碼中的行為。

此標記目前在Chrome和Safari中原生使用，並且可以在使用Polyfills技術的其他瀏覽器中使用。

前端框架中的Web元件

用在  Angular ， React  和  Vue  等前端框架中，Web Components會帶來更多擴充套件，如屬性、方法和繫結事件。Web Components 提供了為框架顯式而建立的本地元件幾乎相同的易用性功能。允許您在不同的框架中重用由它們建立的相同元件和行為庫，而不會犧牲其易用性。

我們在Angular示例中新增了 WijmoJS  的 Web元件，演示了它在Angular中的工作原理。

例如，以下HTML標記建立了 WijmoJS 的 InputNumber和LinearGauge控制元件，這些控制元件可用來顯示和更新相同的模型屬性。

注意：在實現這種雙向繫結行為時，我們沒有使用任何Java程式碼隱藏行和第三方庫：

<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中本地執行Web Components，而不應用任何Polyfill。

FireFox支援特定開發者模式下的Web元件。當然，這種支援很快會應用到實際使用版本中。現在，您也可以使用webcomponentsjs庫中的webcomponents-lite.js polyfill在此瀏覽器中執行Web Components。

當然，Edge和 IE 中也可以使用。您可以通過執行ES5程式碼並應用webcomponentsjs庫中的custom-elements-es5-adapter.js polyfill以及為FireFox指定的polyfill來在Internet Explorer中執行Web元件。

WijmoJS互操作用法和Web元件的未來？

我們已經在WijmoJS Web Components互操作用法方面解決了幾個問題。首先是新增更多的示例，特別是在React，Vue和Polymer等不同框架中新增如何演示Web元件的使用示例。如果您需要在其他框架也新增上述示例，可以聯絡您的技術顧問。

總結

高度使用者自定製一直是純前端控制元件集WijmoJS的產品特色之一。因此，我們同樣為WijmoJS控制元件新增了對Shadow DOM的支援和原生CSS樣式支援的兩種模式，Shadow DOM 允許控制元件可以通過CSS變數（a.k.a.自定義屬性）進行自定義，當然這只是一種可選功能（可由全域性屬性切換），此技術的當前狀態在控制元件定製中施加了嚴重限制。如果開發人員喜歡更靈活的自定製方式，也可以使用沒有Shadow DOM的傳統 WijmoJS Web元件。

關於 葡萄城 ：

賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟體研發服務，併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-2199297/，如需轉載，請註明出處，否則將追究法律責任。