用JavaScript创建自定义UI框架的最佳实践

我想用JavaScript为web应用程序（如Google Docs UI）创建一个自定义UI框架（不要与使用PHP、Python等语言部署的web应用程序混淆）。然而，在阅读了几本关于web开发的书籍后，我了解到最好的网站分层如下：

HTML中的结构

CSS中的表示

JavaScript中的行为

因此，有几种方法可以创建我自己的HTML文档并用JavaScript控制它。然而，在这种方法中，HTML和CSS是混合的，就像ExtJSUI一样。我现在很困惑，我需要有经验的开发人员提供一些关于如何编写这种框架的答案

• 如果HTML、CSS和JavaScript混合使用。
  • 优势是什么
  • 缺点是什么
• 还有其他方法吗
• 创建UI框架的通常类型是什么

---

幸运的是，已经有了一个很好的解决方案：。这就是谷歌所使用的。它展示了混合HTML、CSS和JS的方法。我不认为它是完美的，但我相信它是目前最好的之一。它的体系结构原则依赖于经过验证的基于组件和面向对象的概念，并附带了一个针对Javascript的静态编译器。在烘焙自己的溶液之前，这绝对值得研究。

这取决于你真正想要什么。第一个需要区分的是Javascript UI框架（为应用程序提供结构）、HTML UI框架（表示）和小部件库

、和等Javascript框架为应用程序提供了类似MVC的结构

UI框架如由比、Bootstrap和Fuffic提供了一致的HTML和CSS基础。 jQueryUI、FuelUX和KendoUI等小部件库提供了现成的小部件

还有一些成熟的框架可以提供全面的功能，比如googleclosure工具、Dojo和Dijit

这个列表大致概括了这一点，下面是答案

为了找到创建框架的最佳方法，首先要问这个问题：上面的任何框架/库都能解决我遇到的全部或部分问题/需求吗

如果某个东西解决了所有问题，您可以立即使用它

如果某件事部分解决了您的问题，您可以从扩展/分叉该项目/框架开始。

---

遵循干燥和亲吻规则。只解决一个至今无人解决的问题

为了在您的UI设计中获得最佳性能，您需要使用轻量级JavaScript框架，如angular或backbone，Twitter引导用于UI，AJAX用于基本脚本加载，并在应用程序中使用gzip压缩，以使其轻量级并帮助UI呈现得更快。

简短回答

构建精简的DOM，只关注JS代码以提高效率

---

长答案

一个好的架构师总是回答“这要看情况而定”。你不可能有一个单一的框架同时享受所有其他框架的好处而没有缺点。总有一个权衡

为了创建一个真正轻量级的框架，您可能需要最轻量级的DOM（HTML）结构。然而，拥有一个精简的DOM可能需要花费更多的JS代码。因此，您可能会尝试编写最高效的代码。你可以开始了

不用说，您应该保持开-关原则，并将样式表与HTML分开，只使用类，而不使用内联样式。我建议使用。它使实现更快，结果是纯css，因此您不会遇到任何性能问题

很抱歉，这个答案非常长，有时似乎有点离题，但请记住，这个问题不是很具体。如果它得到改进，或者变得不那么普遍，那么我将很乐意删除多余的部分，但在那之前，请容忍我。除了我自己的想法和研究之外，这是这里其他答案的汇编。希望我的漫谈至少对回答这个问题有所帮助

框架的一般提示 框架是一大堆工作，所以不要把所有的时间都白白浪费掉。更聪明地工作，而不是更努力。一般来说，在创建框架时，您应该记住以下几点：

不要重新发明轮子：有很多很棒的框架，如果你创建的框架与另一个框架做的事情完全一样，你就浪费了很多时间。当然，了解另一个库中发生的事情是使您自己的库变得更好的一个好方法。引用@ShadowScripter，“知识->创新。”但是，不要试图自己重写jQuery

解决问题：所有好的框架（和程序）都从试图解决的问题开始，然后设计一个优雅的解决方案来解决这个问题。因此，不要只是开始编写“创建自定义UI框架”的代码，而是提出一个您想要解决的特定问题，或者一些您想要简化的问题。jQuery使选择和操作DOM变得更容易。Modernizer帮助开发人员识别浏览器支持的功能。了解框架的用途将使其更有价值，甚至有可能使其流行起来

分叉，不要重写：如果你要解决的问题已经被另一个框架部分解决，那么分叉该框架并修改它以完全满足你的需要。建造别人的作品是没有羞耻感的

优化和测试：这是一件很简单的事情，但在网站上发布1.0版之前，请在每个可能的场景下测试该功能的每个部分，以确保它不会在生产中崩溃和烧坏。还有一个