当前位置:主页 > 网络与CDN > 云服务器 >

共享带宽_香港_人工智能的研究

在上一次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:

  • 关注微信

猜你喜欢

微信公众号