我想在JavaScript中为Web应用程序（如Google Docs ui）创建自定义UI框架（不要与使用PHP，Python等语言部署的Web应用程序混淆）。但是，在阅读了几本关于Web开发的书籍之后，我了解到最好的网站分层如下：
因此，有几种方法可以创建自己的HTML文档并在JavaScript中控制它。然而，在这种方法中，HTML和CSS将混合使用，就像extJS UI一样。我现在很困惑，我需要经验丰富的开发人员如何编写这种框架的答案。
答案 0 :(得分：21)
我很抱歉这个答案非常长，有时可能看起来有些偏离主题，但请记住，这个问题不是很具体。如果它被改进，或者不那么通用，那么我很乐意去除多余的部分，但在那之前，只要忍受我。除了我自己的想法和研究之外，这在某种程度上是对其他答案的汇编。希望我的ramblings至少对回答这个问题有所帮助。
框架是一项繁重的工作，所以不要把所有的时间都花在一起。 工作更聪明，而不是更难。一般来说，在创建框架时应该记住这些事情：
有关制作库时的最佳做法的更多信息，请查看以下链接：
如上所述，您需要考虑的第一件事是您希望框架提供哪些功能。这是list of types of frameworks/libraries（感谢@prong的链接）。 有关更全面的列表，请参阅jster，其中包含1478个库，分为8个类别，每个类别都有多个子类别。
正如您从链接中看到的那样，每个类别中已经有数十个库和框架，因此没有太多新的空间。话虽如此，我不想劝阻你 - 谁知道，你可以创建下一个bootstrap或jQuery。所以，这里有一些关于每种框架的资源。
注意：您不能说任何类型都比其他类型更好，它们只是针对不同的目标而设计的。这就像比较苹果和橘子一样。
<强> DOM (manipulation) related
这些类型的库旨在与网站的DOM交互，修改和控制。以下是他们所做的一些事情：
$("div#id .class")）$("div#id .class").remove()）$(div#id .class).height("30px")）$(div#id .class).css("property","value")）$(div#id .class).click(callback)）其中最值得注意的当然是jQuery，它拥有任何Javascript库的最大用户群之一。但是，it is by no means perfect，如果您的图书馆想参与竞争，那么最好的办法就是让它在jQuery失败的领域 - 速度，碎片和＆＃34; spaghetti＆＃34;码。 （最后两个并不完全在您的控制之中，但您可以采取一些措施使用户更容易使用最新版本，并保持其代码可维护）
<强> GUI-related (Widget libraries) 我认为这可能是您希望创建的框架类型。这些类型的库提供小部件（日期选择器，手风琴，滑块，标签等），交互（拖放，拖放，排序等）和效果（显示，隐藏，动画等）。对于这些，人们正在寻找数量 - 最好的框架有几个有用的小部件/效果，运作良好。这是一个案例，它越多越好，越多越好。当然，如果它运作正常。
<强> Graphical/Visualization (Canvas or SVG related) 这些库的目的是控制页面上的动画，特别是在HTML5 Canvas上。这些功能为游戏，交互式图表和其他动画提供动画和精灵。同样，成功的图形库有许多精灵/动画。例如，kineticjs有超过20种不同的精灵可用。但是，请确保数量不会影响性能和整体质量。
<强> Web-application related (MVC, MVVM, or otherwise)
基本上，我们的想法是为用户提供一个布局，以便将代码放入其中，通常将模型（数据）与视图（用户看到的内容）分开，并使用小型控制器在这两者之间提供接口。这称为MVC。虽然它绝不是唯一基于框架的软件模式，但它最近变得非常流行，因为它使开发变得更加容易（这就是Rails如此受欢迎的原因）。
<强> Pure Javascript- AJAX 这应该是两个类别。第一个AJAX库通常与服务器端库和/或数据库（虽然并非总是）配对，旨在与服务器建立连接并异步获取数据。第二个，＆＃34; Pure Javascript＆＃34;旨在使Javascript更容易编程，作为一种语言，提供有用的功能和编程结构。
<强> Template Systems 这也可能是您要创建的框架类型。我们的想法是提供开发人员可以使用的组件。模板框架和窗口小部件框架之间有一条细线（twitter bootstrap是最流行的模板框架之一，它经常交叉）。虽然小部件框架只是提供了一些可以放在网站中的小元素，但模板框架为网站提供了结构（例如响应列），并使其看起来很好。
<强> Unit Testing 这种类型的框架旨在让开发人员测试或系统地确保其代码的正确性。非常无聊，但也非常有用。
<强> Other 这种类型的框架用于非常特定的目的，并不适合其他任何类别。例如，MathQuill用于在网页中以交互方式呈现数学。它并不适合任何其他类别。但是，这些类型的框架并不坏或无用，它们只是独一无二的。一个完美的例子是Modernizr，一个用于检测浏览器对功能的支持的库。虽然它确实没有任何直接的竞争对手，但是不能将其放入任何其他类别中，并且执行一项非常小的任务，它的效果非常好，因此非常受欢迎。
<强> More Types
还有许多其他类型的库。以下是类别（我没有列出子类别，因为这需要半个小时才能复制），JSter将他们的1478个库放入：
答案 1 :(得分：7)
这取决于你真正想要的东西。需要做的第一个区别是Javascript UI框架（提供应用程序的结构），HTML UI框架（演示文稿）和Widget Libs。
Javascript框架（例如backbone，angular，ember和knockout为应用提供类似MVC的结构。
UI框架（如YUI，bootstrap和Foundation）提供了一致的HTML和CSS基础。
小部件库（如jQuery UI，Fuel UX和Kendo UI）提供现成的小部件。
还有完善的框架可以全面提供各种功能，例如Google Closure工具，Dojo和Dijit。
这个Wikipedia列表总结了它，这里是comparison。
为了找到创建框架的最佳方法，首先要问这个问题：上述任何框架/库是否可以解决我的全部或部分问题/要求？
如果某些事情解决了所有问题，您可以立即使用它。
如果某些问题部分地解决了您的问题，您可以从扩展/分配该项目/框架开始。
遵循DRY和KISS规则。只解决现在没人解决的问题。
答案 2 :(得分：3)
幸运的是，已经有了一个很好的解决方案：Google Closure Library。这就是谷歌使用的。它展示了混合HTML，CSS和JS的方法。我不会说这是完美的，但我相信它是目前最好的之一。它的架构原则依赖于经过验证的基于组件和OOP的概念，并伴随着Javascript的静态编译器。在烘焙自己的解决方案之前，绝对值得学习。
答案 3 :(得分：3)
我想说cloudcoder2000的答案总结得很好。我只是写这个答案，因为它在评论部分似乎不正确：P
如果您正在考虑制作另一个框架，我的建议就是停止思考。
首先找到当前实施中的事情，让您感到困扰最，并尝试找到如何改进它。有助于现有项目，几乎所有项目都是开源的。而且，你真的不需要成为JS-ninja来进入他们中间。拿叉子，然后开始吧。一旦你完成了，并且觉得你的代码足够好，让原始repo的维护者知道你已经做了改进，并且正在寻找将它合并到项目中。
请记住，我并不打算让你解决这个问题。
我只是指出那里有那么多 MANY 框架，如果你继续前进并为其中一个做出贡献而不是为了完全的荣耀并实施一个完整的框架自己？制定框架很难，但让人们对您的框架感兴趣的是 HARD。真的很难，即使是谷歌！只有一次Angular得到了一份非常好的文件（这本身花了相当长的时间，以及Angular福音传道者的资源），它已经聚集了很多动力。所以，我只是说，不是创建自己的纪念碑，也许是向别人伸出援手将是一件更有价值的工作。
最重要的是，因为你刚刚开始，我推测你没有太多设计框架的经验，或者在那些设计术语中思考甚至。如果您为现有项目做出贡献，它将具有巨大价值。然后，您将收集关于如何构建的知识和经验。 那么，你会更自信。 然后，您可以继续制作自己的框架！ 那么你将更有能力解决诸如设计框架之类的庞大项目。 然后，我的朋友，你会为无数开发者做一些值得花时间的东西。
答案 4 :(得分：1)
简短回答
构建一个瘦的DOM，只关注JS代码以提高它的效率。
答案很长
一位优秀的建筑师总是回答“这取决于”。你不可能有一个单一的框架，享受所有其他的好处，并没有任何缺点，一次性。总是需要权衡。
为了创建一个非常轻量级的框架，您可能需要最轻的DOM（HTML）结构。但是，拥有一个瘦的DOM可能会花费更多的JS代码。所以你可能会尝试编写最有效的代码。您可以启动here。
毋庸置疑，您应该保持 open-close 原则，并将样式表与HTML分开，仅使用类而不使用内联样式。我建议使用less。它使实现更快，结果是纯css，因此您不会遇到任何性能问题。
答案 5 :(得分：1)
我必须恭敬地不同意cloudcoder2000，
从小就被告知不要重新发明轮子，但为什么呢？
在过去的3。5年中，我使用javascript / html / css重新发明了几乎所有的网页控件。从极其复杂;例如网格，富文本编辑器，树视图，对话框。很简单，像进度条，下拉菜单。我获得的是更好地理解html / js / css。
没有痛苦，没有收获。我对这些年来所做的事情感到非常高兴，因为我学到的东西比其他人多。
我认为，我重新发明的一些控件比流行的控制要好得多，比如telerik，jquery mobile，extJS。例如，我的树视图是完全可自定义的，可以构建非常复杂的树。
所以，我鼓励你重新发明轮子，你肯定会比你想象的更多。但是，从一开始，您需要学习流行控件的源代码，并重新发明它们。当你发现自己能够更好地控制时，你会非常高兴。
1。使用jquery;
2. 为简单控件编写jquery插件（jQuery.prototype ...），同时为复杂控件定义类;
3。将hss与html和js文件分开。在js中定义html模板，不要使用html文件，这会使控件难以使用。
此致
利奥
答案 6 :(得分：0)
为了在UI设计中获得最佳性能，您需要使用轻量级JavaScript框架（如角度或主干），用于UI的Twitter Bootstrap，用于基本脚本加载的AJAX以及在应用中使用gzip压缩以使其轻量级并帮助UI渲染速度更快。