标签：ora 程序 ref 表格控件 调用 san href ini 需要
概述
Web Components（Web 组件）规范是一个新兴的技术集合，允许您在前端Web应用程序中定义已封装的自定义HTML元素。 使用Web Components，您可以创建自己声明的API来定义UI，从而创建您自己的商业化应用程序。
本文介绍了Web组件技术及其在新一代纯前端控件集 WijmoJS 中的应用。
Web组件的核心技术由以下四个标准组成：
自定义元素
Shadow DOM
HTML模板
HTML导入
自定义元素允许您创建自己的HTML元素，可以像标记HTML代码一样使用标记。
使用自定义元素，您可以：
以声明方式向标记添加元素。
使用自定义属性定义其初始值，并使这些值自动传播到相应的属性值。
使用标准Element.addEventListener方法订阅自定义事件。
通过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代码。
无论是使用纯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技术的其他浏览器中使用。
用在 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 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 Components互操作用法方面解决了几个问题。首先是添加更多的示例，特别是在React，Vue和Polymer等不同框架中添加如何演示Web组件的使用示例。如果您需要在其他框架也添加上述示例，可以联系您的技术顾问。
高度用户自定制一直是纯前端控件集WijmoJS的产品特色之一。因此，我们同样为WijmoJS控件添加了对Shadow DOM的支持和原生CSS样式支持的两种模式，Shadow DOM 允许控件可以通过CSS变量（a.k.a.自定义属性）进行自定义，当然这只是一种可选功能（可由全局属性切换），此技术的当前状态在控件定制中施加了严重限制。如果开发人员喜欢更灵活的自定制方式，也可以使用没有Shadow DOM的传统 WijmoJS Web组件。
标签：ora 程序 ref 表格控件 调用 san href ini 需要
原文地址：http://blog.51cto.com/powertoolsteam/2152604
