在上一次OpenUI5会议上，SAP确认他们正在从MVC模型转向组件基础设施。其中一个想法是使用WebComponents/自定义元素和React组件。它是定义新HTML元素的HTML5标准。在2014年我和polyfils一起玩的时候，我有幸对它有了更深入的了解。这和市场上的规则大不相同。在那些日子里，大数据的趋势，我使用了很多JQuery和Angular 1.x，它们有着神奇的绑定，但不幸的是性能有问题。在这个时候，Angular指令为我们提供了一些封装的可能性，类似于WebComponents。WebComponents标准，在shadow/light-DOM中使用封装的/模块化的DOM（一开始只在Chrome中工作），是不同的，但是它对于开发大型前端应用程序是非常需要的。

最早使用定制元素的框架之一是Polymer。2015年，我在一次开源会议上介绍了WebComponents，作为我们未来的发展方向。

现在自定义元素是Angular、Polymer、React、Vue、Lit元素的一部分，更多信息。

所有文档都可以在这里找到：

https://developers.google.com/web/fundamentals/web-components/

https://developer.mozilla.org/en-US/docs/Web/Web\u Components/Using\u custom\u元素

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating\和\触发\事件

UI5

这是我第一次用UI5写东西2015年，一切都在JS。与UI5相比，Angular或Polymer的一切都更加自然（即使是抽象的），也更加现代。当UI5有1,5mb时，框架有大约200-500kb。当人们拥有有限的网络时，这是一个问题。然后SAP改进框架以供使用组件.js. SAP开始向框架部件添加异步加载程序。XML视图/片段变得非常流行。我喜欢这个解决方案，但是仍然不可能用合适的方式写一些重用的东西。全局范围有问题。我想写更多的视图/控制器。我试图在我的项目中创建自己的lib。从相当长的一段时间以来，框架有了很多改进，新云，并朝着非常好的方向发展。我们可以编写可重用的组件，用更智能的解决方案减少代码。在过去的几年里，我看到了许多积极的变化。UI5在一开始可能会有所不同，但当你了解了它的背后是什么，核心是如何工作的，很多事情就变得很清楚了。

从前端来看，我也有机会与Angular、Polymer、React、JQuery一起工作。这就是为什么我混合了不同的解决方案，来自不同的框架。

目录：

https://github.com/abagat0/UI5WebComponent

我基于高阶组件（更多信息请点击此处https://reactjs.org/docs/higher-order-components.html) . 它的特性，我正在创建更高的组件，通过改变行为来管理其他组件，这取决于发送的数据/状态。在过去的React中有一种叫做mixin的特性。由于性能不佳，它被高阶组件所取代。

这是反应高阶组件的实现

我的UI5下面组件.ts.render方法的最后一行是调用自定义元素实例并传递带有数据的属性（类似于render函数中的react）。我将分别传递属性，以便对更改和更简单的更新进行观察。只有在TestComponent类中声明的属性（在本例中是pro和message）才会附加到自定义元素。此外，云市场，我正在传递将自定义元素实例与ui5组件连接起来的componentId。

以下是不同框架中的备选方案：

在我的解决方案中有两个类。一个是扩展UIWebComponent的测试组件，第二个是UI5CustomElement。当UI5呈现组件容器时，将所需的所有设置传递给自定义元素，以使其按要求的方式工作更高的成分"来自UI5。它是自定义元素的管理。主逻辑（额外属性、压力处理程序等…）是用组件.ts（测试组件）。

我在中添加了WebComponents的链接索引.html如果我们想支持IE，我们还必须添加到shady DOM的链接（参见浏览器支持和shadow DOM doc）。

UIWebcomponent类负责创建自定义HTML元素。Webcomponent类只能在浏览器中定义一次。

我的想法是在组件及其自定义元素实现之间建立强大的连接。双方互相交谈。这有助于组件更新。我通过作为属性传递的组件将它们连接起来。

组件.ts知道哪个自定义元素是它的html实例，因为它是在whenDefined promise resolver中设置的，并保存到customElement属性

UI5CustomElement知道哪个组件.ts是它的逻辑，因为它在属性中接收组件id。在组件实例的构造函数中调用UI5，并保存自己的上下文属性

组件.ts属性设置器不仅更新组件道具，还更新自定义元素中的属性。SAP允许重写getter和setter（请参阅更多）。这就是说，当模型中的属性发生更改（绑定附加到属性上）或我们正在更改属性时，所有属性都会自动反映到具有方法setAttribute的自定义元素：

下面是属性列表：

property pro和message在中声明组件.ts班级。Rest来自UIWebComponent: