我需要在canvas元素的顶部构建一个自定义窗口小部件。这是针对一个非常具体的问题域（以集成方式处理音频和文本），因此使用现有的小部件集是不可能的。
生成的应用程序以Zooming User Interface为中心，我们的自定义小部件将放在其上。
从头开始编写小部件集时，要注意哪些标准方法，陷阱和设计模式？
我认为这个领域的很多宝贵经验都不会出现在canvas元素和HTML5中，因为它相对年轻。但是，当然，任何专注于canvas和javascript的答案都会得到额外的独角兽点。
我还想象在这个领域的许多经验来自于相当沉重的OO方法。 GOF-book广泛地处理GUI。他们的方法在多大程度上适用于更加功能导向的语言，如javascript？
答案 0 :(得分：1)
也许我没有满足您的要求，但我可以分享我在使用canvas和javascript的类似开发中的经验。
我逻辑上将代码划分为3个部分（来自我的场景的MVC）：初始设置，包括数据收集，事件监听器（鼠标移动，点击，滚轮等），绘图功能。该架构运行良好，因为我不必修改它添加功能。
我使用编程的主要通用规则：良好的代码设计，文档代码，不做技巧（js提供了很多技巧），测试你在做什么。
我使用单一模式（http://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript）使用JOP“原样”使用OOP。谷歌闭包库帮助我正确记录代码 - 因为我需要在高级模式（https://developers.google.com/closure/compiler/docs/api-tutorial3）编译它，但即使没有任何框架，你可以在js中编写好的结构化代码。 所以你最后一个问题的答案是“是的，你甚至可以用像js这样糟糕的结构化语言来做到这一点”。
我发现的主要问题是测试它，你只能手动完成，我的意思是设置一个自动工具，对我来说还不够。