Web组件–构建商业化应用的基石-创新互联

概述

Web组件 – 构建商业化应用的基石

成都创新互联长期为近千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为宁江企业提供专业的成都网站设计、成都网站建设,宁江网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

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:


    

    
    
    

有了这个标记,你可以一方面使用传统的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标记,而不用添加一堆这样的神秘元素定义:

使用WijmoJS 控件的 Web组件后,您还可以声明下面的标记:


      
      

这段代码可用于无法以声明方式表示的特殊处理上。也就是说,您可以在正确的位置定义内容 - 标记中的UI及其在JavaScript代码中的行为。

此标记目前在Chrome和Safari中原生使用,并且可以在使用Polyfills技术的其他浏览器中使用。

前端框架中的Web组件

用在 Angular,React 和 Vue 等前端框架中,Web Components会带来更多扩展,如属性、方法和绑定事件。Web Components 提供了为框架显式而创建的本地组件几乎相同的易用×××。允许您在不同的框架中重用由它们创建的相同组件和行为库,而不会牺牲其易用性。

我们在Angular示例中添加了WijmoJS 的 Web组件,演示了它在Angular中的工作原理。

例如,以下HTML标记创建了 WijmoJS 的 InputNumber和LinearGauge控件,这些控件可用来显示和更新相同的模型属性。

注意:在实现这种双向绑定行为时,我们没有使用任何JavaScript代码隐藏行和第三方库:


使用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组件。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站题目:Web组件–构建商业化应用的基石-创新互联
分享URL:http://pwwzsj.com/article/cecods.html