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

【问题标题】：Duplicate dijit widget instead of recreating it复制 dijit 小部件而不是重新创建它
【发布时间】：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）。
你能做一个小提琴吗？

标签： dojo widget clone duplication

【解决方案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，并遵循第一个链接（参考文档）中的示例

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

【讨论】：