在 JavaScript 中创建自定义 UI 框架的最佳实践 [关闭]

Posted 2023-02-22

【中文标题】在 JavaScript 中创建自定义 UI 框架的最佳实践 [关闭]

【英文标题】：Best practice to create Custom UI framework in JavaScript [closed]

【发布时间】：2013-07-03 09:06:15

【问题描述】：

我想在 javascript 中为 Web 应用程序（如 Google Docs ui）创建一个自定义 UI 框架（不要与使用 php、Python 等语言部署的 Web 应用程序混淆）。但是，在阅读了几本关于 Web 开发的书籍之后，我了解到最好的网站是这样分层的：

html 结构 CSS 中的演示文稿 JavaScript 中的行为

所以有几种方法可以创建我自己的 HTML 文档并在 JavaScript 中控制它。然而，在这种方法中，HTML 和 CSS 将混合在一起，就像在 extJS UI 的情况下一样。我现在很困惑，我需要有经验的开发人员来解答如何编写这种框架。

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

【问题讨论】：

你能说明你为什么要创建这个框架吗？我的意思是这个框架将如何帮助你减少代码？可用性？功能？跨浏览器问题？公开 API？

它应该具有良好的功能，减少用户端的代码生成并支持跨浏览器问题。此外，它还应该考虑浏览器的内部内存消耗，并以最少的处理时间来呈现 ui 功能。

我不知道你是否有资源来创建这样的东西，即使是像谷歌这样的大公司也必须在 Angular 上花费数年时间，它仍然不完美......

这里的要求与资源无关。因此，请与您的 cmets 相关。

为什么要重新发明***？已经有一些框架可以帮助构建 Web 应用程序 UI，Backbone.js 和 Angular.js 仅举几例

【参考方案1】：

很抱歉，这个答案非常长，有时似乎有些离题，但请记住，这个问题不是很具体。如果它得到改进，或者变得不那么普遍，那么我很乐意删除多余的部分，但在那之前，请耐心等待。除了我自己的想法和研究之外，这在某种程度上是对这里其他答案的汇编。希望我的胡言乱语至少对回答这个问题有所帮助。

框架的一般提示

框架需要大量工作，因此不要白白浪费所有时间。 更聪明地工作，而不是更努力地工作。 一般来说，在创建框架时，您应该记住以下几点：

不要重新发明***：有很多很棒的框架，如果您创建的框架与另一个框架做的事情完全相同，那么您就浪费了很多时间。当然，了解另一个库内部发生的事情是使您自己的库变得更好的好方法。引用@ShadowScripter，“知识-> 创新”。但是，不要尝试自己重写 jQuery。 :) 解决问题：所有好的框架（和程序）都从他们试图解决的问题开始，然后设计一个优雅的解决方案来解决这个问题。因此，不要只是开始编写代码来“创建自定义 UI 框架”，而是想出一个你想要解决的特定问题，或者你想让它变得更容易的东西。 jQuery 使选择和操作 DOM 变得更加容易。 Modernizr 帮助开发人员识别浏览器支持的功能。了解您的框架的用途将使其更有价值，甚至可能使其有机会变得流行。 分叉，不要重写：如果您要解决的问题已经由另一个框架部分解决，那么分叉该框架并对其进行修改以完全满足您的需求。建设他人的作品并不可耻。 优化和测试：这很简单，但在您的网站上发布 1.0 版之前，请在每种可能的情况下测试功能的每个部分，以确保它不会在生产中崩溃和烧毁。此外，另一个不费吹灰之力的方法是（在测试后）缩小您的代码以获得性能优势。 DRY 和KISS：不要重复自己，保持简单，愚蠢。不言自明。 坚持稳定：（这主要是我个人的看法）除非你试图在 Chrome 31 中创建一个专门针对 HTML5 的框架，否则使用实验性功能和不稳定的代码会使你的框架变慢，不兼容较旧的浏览器，更难开发。 开源：（我的另一个观点）像谷歌这样的大公司需要花费数年时间才能投入数千美元来创建框架（例如 AngularJS），因此公开您的源代码是一个绝妙的主意。拥有一个为您的项目做出贡献的开发人员社区将加快开发速度，并使最终产品更快、无错误、更好。当然，如果你要卖掉它，那就另当别论了……

有关制作库时的最佳做法的更多信息，请查看以下链接：

Javascript Library Design Javascript Module Pattern: In Depth Best Practices in Javascript Library Design Building a Javascript Library

---

框架类型

如上所述，您需要考虑的第一件事是您希望框架提供什么功能。这是list of types of frameworks/libraries（感谢@prong 提供链接）。 如需更全面的列表，请参阅 jster，它有 1478 个库，分为 8 个类别，每个类别都有几个子类别。

DOM（操作）相关 GUI 相关（小部件库） 图形/可视化（Canvas 或 SVG 相关） Web 应用程序相关（MVC、MVVM 或其他） 纯 Javascript/AJAX 模板系统 单元测试 其他

正如您从链接中看到的那样，每个类别中已经有几十个库和框架，因此没有太多空间来开发新的东西。话虽如此，我不想让你气馁——谁知道呢，你可以创建下一个引导程序或 jQuery。所以，这里有一些关于每种框架类型的资源。

注意：你不能说任何类型都比其他类型更好，它们只是为不同的目标而设计。这就像比较苹果和橘子。

DOM (manipulation) related 这些类型的库旨在与网站的 DOM 进行交互、修改和控制。以下是他们所做的一些事情：

在 DOM 中选择元素 ($("div#id .class")) 在 DOM 中添加/删除元素 ($("div#id .class").remove()) 编辑 DOM 中元素的属性 ($(div#id .class).height("30px")) 编辑 DOM 中元素的 CSS ($(div#id .class).css("property","value")) 为 DOM 中发生的各种事件添加侦听器 ($(div#id .class).click(callback))

其中最引人注目的当然是 jQuery，它拥有所有 Javascript 库中最大的用户群之一。然而，it is by no means perfect，如果你的库想要竞争，最好的办法是让它在 jQuery 失败的领域中表现出色——速度、碎片和“意大利面条”代码。 （最后两个并不完全在您的控制范围内，但您当然可以做一些事情来让用户更轻松地使用最新版本，并保持他们的代码可维护）

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 库，通常与服务器端库和/或数据库配对（尽管并非总是如此），旨在与服务器建立连接并异步获取数据。第二，“Pure Javascript”旨在让 Javascript 更容易编程，作为一种语言，提供有用的功能和编程结构。

Template Systems 这也可能是您要创建的框架类型。这个想法是提供开发人员可以使用的组件。模板框架和小部件框架之间有一条细线（twitter bootstrap，最流行的模板框架之一，交叉很多）。虽然小部件框架只是提供了一堆可以放入网站的小元素，但模板框架除了使网站看起来不错之外，还为网站提供了结构（例如响应式列）。

Unit Testing 这种类型的框架旨在让开发人员测试或系统地确保其代码的正确性。很无聊，但也很实用。

Other 这种类型的框架用于真正特定的目的，并不真正适合任何其他类别。例如，MathQuill 设计用于在网页中以交互方式呈现数学。它并不真正适合任何其他类别。然而，这些类型的框架并不是坏的或无用的，它们只是独一无二的。一个完美的例子是Modernizr，一个用于检测浏览器对特性的支持的库。虽然它实际上没有任何直接的竞争对手，不能归入任何其他类别，而且任务非常小，但它运作良好，因此非常受欢迎。

More Types 还有很多其他类型的库。以下是 JSter 将其 1478 个库放入的类别（我没有列出子类别，因为这需要半小时才能复制下来）：

要领 用户界面 多媒体 图形 数据 发展 实用程序 应用程序

【讨论】：

+1 获得好的答案。如果没有其他答案，我将奖励您的答案。

我不太确定“重新发明***”的说法。我的意思是，从中获得一些好处。如果有的话，您将了解如何制作***的细节……然后可能会继续为***制作轮胎。无论如何+1 :)

@ShadowScripter 如果要重做的库只有 5 行代码，那么是的，重新发明***没问题，所以“你将了解如何制作***的细节。 "然而，这对于像 jQuery 这样的大型程序来说是不切实际的。

@ShadowScripter 另外，继续你的比喻，真的有必要了解如何制造车轮才能制造轮胎吗？我同意你应该知道***是如何工作的，但我认为你不需要知道如何制作它。无论如何，这对我来说太抽象了:)。我的观点是，没有必要仅仅为了稍微改进而重写整个库。在此基础上构建而不是完全重新设计是更好地利用您的时间。

@cloudcoder2000 这是一个很好的观点。 我试图表达的观点是：知识 -> 创新

【参考方案2】：

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

backbone、angular、ember 和 knockout 等 JavaScript 框架为应用提供了类似 MVC 的结构。

YUI、bootstrap 和 Foundation 等 UI 框架提供了一致的 HTML 和 CSS 基础。

jQuery UI、Fuel UX 和 Kendo UI 等小部件库提供现成的小部件。

还有成熟的框架提供全面的功能，例如 Google Closure 工具、Dojo 和 Dijit。

这个Wikipedia 列表非常概括，这里是comparison。

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

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

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

遵循 DRY 和 KISS 规则。只解决目前没有人解决的问题。

【讨论】：

+1 为您解答。但是我在这里问创建此类库的最佳方法是什么？我的意思是在图书馆的设计（我不是指网页设计方法）方法方面，哪种方法比其他方法更好？

实际上这会损害您的框架，除非您当然负担得起。

【参考方案3】：

幸运的是，已经有一个很好的解决方案：Google Closure Library。这就是谷歌使用的。它展示了混合 HTML、CSS 和 JS 的方法。我不会说它是完美的，但我相信它是目前最好的之一。它的架构原则依赖于经过验证的基于组件和 OOP 概念，并附带一个用于 Javascript 的静态编译器。在烘焙自己的解决方案之前，绝对值得学习。

【参考方案4】：

我想说 cloudcoder2000 的回答很好地总结了它。我只是在写这个答案，因为它在评论部分看起来不正确：P

---

如果你正在考虑制作另一个框架，我的建议是停止思考。

首先找出当前实现中最困扰您的事情，然后尝试找出可以改进它的方法。为现有项目做出贡献，几乎所有项目都是开源的。此外，您实际上并不需要成为 JS-ninja 才能进入他们的行列。拿起叉子，开始吧。完成后，如果您觉得自己的代码足够好，请告知原始 repo 的维护者您已经进行了改进，并正在寻找将其合并到项目中。

请记住，我根本不会阻止您解决问题。

我只是要指出，有这么多 许多 框架，如果你继续为其中一个做出贡献而不是追求完全的荣耀并实施一个框架会更好吗？自己的完整框架？制作一个框架很难，但让人们对你的框架感兴趣是困难的。真的真的很难，即使是谷歌！只有在 Angular 获得了一个非常好的文档（这本身花费了 Angular 传道者的相当长的时间和资源）之后，它才聚集了如此多的精力。所以，我只是说，与其创建自己的纪念碑，也许向他人伸出援助之手会更有价值。

但最重要的是，由于您刚刚开始，我认为您不会有太多设计框架的经验，或者在这些设计术语中思考甚至。如果您为现有项目做出贡献，它将具有巨大的价值。然后，您将收集关于事物如何构建的知识和经验。 那么，你会更有信心。 那么，你可以继续做你自己的框架了！ 然后您将更有能力处理庞大的项目，例如设计框架。 然后，我的朋友，你会做出一些值得无数开发者花费时间的东西吗？

【参考方案5】：

简答

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

---

长答案

优秀的架构师总是会回答“视情况而定”。你不可能有一个单一的框架同时享受所有其他人的好处并且没有任何缺点。总会有取舍。

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

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

【参考方案6】：

我必须恭敬地不同意cloudcoder2000，

我从小就被告知不要重新发明***，但为什么呢？

在过去的 3.5 年中，我使用 javascript/html/css 重新发明了几乎所有的 Web 控件。从极其复杂；例如网格、富文本编辑器、树视图、对话框。来的很简单，就像一个进度条，下拉。我获得的是对 html/js/css 的更好理解。

没有痛苦，就没有收获。我对这些年来所做的事情感到非常高兴，因为我比其他人学到的更多。

我认为，我重新发明的一些控件比流行的控件要好得多，例如telerik、jquery mobile、extJS。例如，我的树视图是完全可定制的，可以构建非常复杂的树。

所以，我鼓励你重新发明***，你肯定会得到比你预期更多的东西。而且，从一开始，你就需要学习流行控件的源代码，并重新发明它们。当您发现自己能够使控件变得更好时，您会非常高兴。

然后是创建HTML控件的技巧：

1.使用jquery；

2.为简单的控件编写jquery插件（jQuery.prototype...），为复杂的控件定义类；

3. 将 css 与 html 和 js 文件分开。在js中定义html模板，不要使用html文件，这样使用控件比较困难。

问候，

狮子座

【讨论】：

+1 为您的建议。谢谢你的想法。

嗨 Leo，我是 Web 开发的初学者。过去 3 年我一直在做 windows 窗体应用程序。我想在 js/html/css 中“重新发明***”。你能建议从哪里开始吗？

这里是一个例子：jquerygrid.codeplex.com

【参考方案7】：

为了在您的 UI 设计中获得最佳性能，您需要使用轻量级 JavaScript 框架（如 Angular 或 Backbone）、用于 UI 的 Twitter Bootstrap、用于基本脚本加载的 AJAX，并在您的应用中使用 gzip 压缩以使其轻量级并帮助 UI渲染速度更快。

【讨论】：

我不想要一些现成的框架。我想看看最好的框架设计（不要与网页设计混淆）方法。为了创造我的。