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

概述

Web Components - An Introduction and Practical Usage

Web Components（Web 組件）規範是一個新興的技術集合，容許您在前端Web應用程序中定義已封裝的自定義HTML元素。 使用Web Components，您能夠建立本身聲明的API來定義UI，從而建立您本身的商業化應用程序。

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

Web組件核心技術

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

• 自定義元素
• Shadow DOM
• HTML模板
• 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在JavaScript代碼中操做它，另外一方面能夠在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組件的商業化應用

不管是使用純JavaScript仍是使用框架實現應用程序，均可以從Web組件的使用中受益。

純JavaScript中的Web組件
使用純JavaScript中的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及其在JavaScript代碼中的行爲。

此標記目前在Chrome和Safari中原生使用，而且能夠在使用Polyfills技術的其餘瀏覽器中使用。

前端框架中的Web組件

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

咱們在Angular示例中添加了WijmoJS 的 Web組件，演示了它在Angular中的工做原理。

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

注意：在實現這種雙向綁定行爲時，咱們沒有使用任何JavaScript代碼隱藏行和第三方庫：

<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組件。

關於純前端控件集 - WijmoJS

快如閃電，觸控優先。純前端控件集 WijmoJS，爲您的企業應用提供更加靈活的操做體驗，在全球率先支持 AngularJS，並提供性能卓越、零依賴的 FlexGrid 和金融圖表等多個控件，爲您提供易用、輕鬆的操做體驗，全面知足開發所需。