复制 dijit 小部件而不是重新创建它

Posted 2023-02-16

【中文标题】复制 dijit 小部件而不是重新创建它

【英文标题】：Duplicate dijit widget instead of recreating it

【发布时间】：2014-12-22 13:06:12

【问题描述】：

有没有一种方法可以复制或克隆 dijit 小部件？

基本上，想法是通过最小化小部件创建时间来提高页面渲染性能。

我们有一个单页网络应用程序，每当用户执行任何操作时，我们都不会重新加载整个页面。

事件流程如下，

主页由浏览器加载。它包含一个 dijit ContentPane，它充当主容器并使用各种其他 dijit 小部件（如文本框、选项卡、日期字段、增强网格等）显示整个页面。

用户执行操作（例如单击 dijit 按钮）

应用程序向服务器发送一个 ajax 调用，服务器处理按钮单击事件并生成下一页的 UI。

浏览器收到来自 ajax 调用的成功响应并调用 dijit ContentPane 的刷新方法。这会触发现有小部件的破坏，并创建新的小部件集并将其放置在适当的位置。 （而不是刷新整个页面）

用户再次执行某些操作并再次调用刷新方法，这会触发现有小部件的销毁，并创建新的小部件集并将其放置在适当的位置。

由于这种架构，浏览器必须销毁现有的小部件并一次又一次地重新创建它们。这会导致性能下降。

我们的想法是让一组小部件在浏览器上随时可用，克隆它们并放置在适当的位置并更新它们，而不是每次都重新创建。

【问题讨论】：

你到底为什么想要这个？我的页面有 100 多个小部件，但它仍在几秒钟内呈现。

Hey GuyT，我已经更新了这个问题的更多细节

我还使用 Dojo 开发了一个 SPA，性能在这里不是问题。我们不会刷新内容窗格，而是使用 tabcontainer。当我们关闭“屏幕”时，该选项卡将与该选项卡内的所有小部件一起被销毁（注意内存泄漏：删除所有连接等）。渲染屏幕需要多长时间？

渲染所有小部件并可供使用大约需要 5-6 秒。我注意到的是，在加载内容窗格并创建小部件时发生了太多的 DOM 节点操作事件（DOMSubtreeModified）。

你能做一个小提琴吗？

【参考方案1】：

是的，这可以通过名为 _AttachMixin 的东西来实现。

基本上，您的小部件需要将事件侦听器附加到 html 文档这一事实是无法回避的。不过可以删减的是 Dijit Widget 生命周期中生成 DOM 的时间。众所周知，简单的 Dijit 小部件（例如 dijit/form/Button）在 div 中的 div 中包含 div，在 div 中包含 div 等。

这里详细解释http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html

这是一个使用 Node.JS 作为后端的示例。 http://jamesthom.as/blog/2013/01/15/server-side-dijit

这是一个棘手的问题，而且这个概念没有得到非常彻底的解释。如果您有一个不是 Node.JS 的后端，您必须手动制作小部件字符串并将其作为响应传递给您的 AJAX，并遵循第一个链接（参考文档）中的示例

我们有很多应用程序的小部件在客户端很好地呈现。一种简单得多的方法是在需要时简单地显示/隐藏（而不是渲染和销毁）小部件。我假设您的应用程序的访问策略将关注 数据 而不是哪个人可以访问哪个小部件。