将独立Javascript转换为小部件

Convert standalone Javascript to widget

本文关键字：小部 转换 独立 Javascript      更新时间：2023-09-26

我们有一个8,300行Javascript应用程序，它实现了一个桥牌的交互式图表。目前，它包含了大约250个顶级变量、250个函数、大约130行函数之外的驱动程序代码，以及30个在不同地方引用的硬编码元素id;它是完全独立的，不使用库。它从URL查询字符串获取参数。所以我们在网页上使用它的方式是在iframe中加载它。

这被实现为3个文件:

  • handviewer.html -这是我们在iframes中指向的页面。它包含大约70行HTML和所有必需的div，并加载CSS和JS(在下面的测试中称为handviewer-old.html)
  • hvstyles.css -
    • 页面的CSS
  • handviewer.js -上面描述的Javascript代码

在handviewer.html中，活动元素具有内联的onclick属性，这些属性调用handviewer.js中的函数。

问题是，当我们在一个页面上嵌入大量这些内容时，性能会受到影响。iframe一开始就很麻烦，许多指向同一台服务器的iframe都会遇到连接限制。尽管它们都指向同一个脚本，但查询字符串中的参数充当了缓存破坏者的角色。在相当快的浏览器中，加载一个包含12个图表的页面需要3-5秒。查看时间线，您可以看到负载是交错的。因此，我想将其转换为可以应用于DIV的小部件，参数作为内联参数。

包含12个iframe的测试页面位于:

http://dev.bridgebase.com/barmar_test/many-hv-old.html

我准备手工完成—我将在整个事情周围包装一个函数，用类替换id，以便document.getElementById(x)变成theDiv.getElementsByClass(x)[0]，并重写提取查询字符串参数以从选项参数中获取它们的函数。但我想知道是否有什么工具可以在这个过程中提供帮助。如果有人做过这样的转换，你有帮助的技术吗?

我看了一下你的代码…

如果cardDivs(座位)(套装)[我].innerHTML ==") ...

不要那样做。制作一个经典的JS布尔值数组来标记"空项"。

一般来说，不要过多地访问DOM。看起来，你的整个"模型"(从MVC术语)和应用程序状态存储在DOM。

相关文章：