14

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

  1. HTML 中的结构
  2. CSS 中的演示文稿
  3. JavaScript 中的行为

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

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

7 回答 7

24

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

框架的一般提示

框架是一项繁重的工作，所以不要白白浪费这些时间。更聪明地工作，而不是更努力地工作。一般来说，在创建框架时应该记住以下几点：

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

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

框架类型

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

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

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

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

DOM（操作）相关
这些类型的库旨在与网站的 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 库中最大的用户群之一。然而，它绝不是完美的，如果你的库想要竞争，最好的办法就是让它在 jQuery 失败的领域中表现出色——速度、碎片和“意大利面条”代码。（最后两个并不完全在您的控制范围内，但您可以做一些事情来让用户更容易使用最新版本，并保持他们的代码可维护）

GUI 相关（Widget 库） 我认为这可能是您要创建的框架类型。这些类型的库提供小部件（日期选择器、手风琴、滑块、选项卡等）、交互（拖放、排序等）和效果（显示、隐藏、动画等）。对于这些，人们正在寻找数量——最好的框架有几个很好用的小部件/效果。这是一种“越多越好”的情况，当然，如果它工作正常的话。

图形/可视化（Canvas 或 SVG 相关） 这些库的目的是控制页面上的动画，特别是在 HTML5 Canvas 上。这些具有游戏、交互式图表和其他动画的动画和精灵。同样，成功的图形库有很多很多的精灵/动画。例如 kineticjs 有超过 20 种不同的精灵可用。但是，请确保数量不会影响性能和整体质量。

Web 应用相关（MVC、MVVM 或其他
）控制器提供这两者之间的接口。这称为MVC。虽然它绝不是唯一基于框架的软件模式，但它最近变得非常流行，因为它使开发变得更加容易（这就是Rails如此受欢迎的原因）。

Pure Javascript- AJAX 这应该真的是两类。第一个是 AJAX 库，通常与服务器端库和/或数据库配对（尽管并非总是如此），旨在与服务器建立连接并异步获取数据。第二，“纯 Javascript”旨在使 Javascript 更易于编程，作为一种语言，提供有用的功能和编程结构。

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

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

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

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

  • 要点
  • 用户界面
  • 多媒体
  • 图形
  • 数据
  • 发展
  • 实用程序
  • 应用
于 2013-12-31T22:50:49.707 回答
7

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

Javascript 框架，如骨干、角度、余烬和淘汰赛为应用程序提供了类似 MVC 的结构。

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

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

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

这个维基百科列表几乎总结了它，这里是比较。

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

如果某件事解决了所有问题，您可以立即使用它。

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

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

于 2013-12-31T00:07:00.073 回答
3

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

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

首先找到当前实现中最困扰你的东西，然后尝试找到如何改进它。为现有项目做出贡献，几乎所有项目都是开源的。此外，您并不需要成为 JS-ninja 才能进入他们的行列。拿起叉子，开始吧。一旦你完成了，并且觉得你的代码足够好，让原始仓库的维护者知道你已经做了改进，并且正在寻找将它合并到项目中。

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

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

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

于 2014-01-01T11:01:52.283 回答
3

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

于 2013-07-06T07:11:48.997 回答
1

简短的回答

构建一个瘦 DOM 并只关注 JS 代码以使其更高效。

长答案

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

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

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

于 2013-12-31T18:28:27.223 回答
1

我必须恭敬地不同意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 文件，这会使控件的使用变得困难。

问候，

狮子座

于 2014-01-02T01:56:24.837 回答
0

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

于 2013-12-31T12:23:01.250 回答