Javascript 在画布上编写自定义小部件集

我需要在canvas元素上构建一个自定义小部件集。这是针对一个非常特定的问题域（以集成方式处理音频和文本），所以使用现有的小部件集是不可能的

最终的应用程序围绕一个中心，我们的自定义小部件将放置在这个中心之上

从头开始编写小部件集时，需要注意哪些标准方法、陷阱和设计模式

我想，这个领域的许多宝贵经验将不会是画布元素，尤其是HTML5，因为它还相对年轻。但是，当然，任何专门关注画布和javascript的答案都会得到额外的独角兽分数

---

我还认为，这一领域的很多经验都来自于相当严格的OO方法。该系统广泛地处理GUI。他们的方法在多大程度上适用于面向功能的语言，如javascript？

也许我没有满足您的要求，但我可以分享我在类似的开发中使用canvas和javascript的经验

我从逻辑上将代码分为3部分（类似于我场景中的MVC）：数据收集的初始设置、事件侦听器（鼠标移动、单击、旋转等）、绘图功能。该体系结构运行良好，因为我不必通过添加功能来修改它

我使用的主要编程规则如下：良好的代码设计、编写代码文档、不做特技（js提供了很多特技）、测试您正在做的事情

我在OOP中使用javascript“原样”，使用单例模式（）；谷歌闭包库帮助我正确地记录代码——因为我需要在高级模式（）下编译它，但即使没有任何框架，也可以用js编写良好的结构化代码。 因此，最后一个问题的答案是“是的，即使在像js这样糟糕的结构化语言中也可以做到”

---

我发现的主要问题是测试它，你只能手动操作，我的意思是设置一个自动工具，对我来说是不够的。

添加“flash”标签可能是值得的，因为我认为这是一个在这个领域积累了数年经验的社区。