8.6. JavaScript库和web表示框架

处理网页并不总是那么容易，尤其是当它不是您的主要专业知识时。用于布局页面，遍历元素，切换类等的代码可能会很快变得笨拙和肿。浏览器可以用不同的方式解释相同的HTML和JavaScript，调试页面可能是一个神秘的过程，涉及多个代码文件以及样式表和替代的复杂层次结构。

这些挑战没有神奇的解决方案；但是，如果您努力学习，一些JavaScript帮助程序库可以简化您的生活和代码。你的页面可能也会变得更加实用和吸引人。其中一些库主要提供后端功能，其他库专门提供前端元素，其他库同时提供这两种功能。

8.6.1. JavaScript库

许多web开发人员喜欢使用专门的JavaScript库，这些库的开发是为了简化常见的功能并抽象出web浏览器之间的一些特性。

例如，如果您随机选择几个web页面并查看源代码，很有可能会看到有人使用jQuery库。jQuery 提供简化页面上的DOM元素导航和操作的函数。例如，使用jQuery，您可以填充下拉列表或动态更改HTML元素的CSS类，而无需编写一堆HTML标记。

与jQuery类似的替代方案是Prototype 以及Dojo toolkit ，尽管后者还提供了一些UI元素，如菜单、按钮和图表。所有这些库都是为了简化JavaScript编码和减少处理浏览器之间差异的工作量而构建的。

8.6.2. Web表示框架

在上一课的示例中，您学习了如何将地图嵌入到网页中。在第7课演练中，还简要介绍了如何使用innerHtml属性操作DOM元素，从而更改页面上的标签。但是，如果你不花几百个小时研究网页设计，如何在地图上创建一个漂亮的页面呢？这就是web表示框架可以派上用场的地方。

Web表示框架由JavaScript库、样式表和“widgets”组成，它们共同为您提供了一些方便的构建块，用于构建美观的页面。其中一些包括标题、按钮、日历日期选择器、菜单等。

Web开发框架通常是经过设计的，以便您的页面在不同浏览器中以类似的方式工作。他们还可以让你的头开始，使你的网页容易本地化（即足够灵活，可以提供各种语言，如西班牙语，阿拉伯语，中文等）。

8.6.2.1. 实例

一个流行的web表示框架的例子是Bootstrap ，由Twitter开发团队在开源许可下发布。在第8课演练中，您将使用引导程序在应用程序上放置一个漂亮的页眉，并将页面分成多个部分。您还将获得引导样式表的好处。

与Bootstrap类似的框架包括`Groundwork <https://github.com/groundworkcss/groundwork> __，Zurb的ʻFoundation <https://foundation.zurb.com/>`__和Yahoo的`Pure <https ：//purecss.io/>`_。后者以前称为YUI（yoo'-ee），并且在网络世界中仍然经常看到此名称。花几分钟时间，并按照上面的一些链接查看这些框架提供的不同样式。

一些JavaScript库，如Dojo工具包和Sencha Ext JS 还提供了用于web设计功能的布局元素。项目jQuery UI 提供一组有用的用户界面元素，如按钮、菜单、日期选择器等。

您应该知道，web表示框架有时需要并使用jQuery或其他库来完成其功能。

8.6.2.2. 选择框架

在评估项目的web表示框架时，您可以考虑：

• 开始使用框架有多容易？

• 该框架上有多少在线示例，是否有活跃的社区发布到论坛上？

• 如果我不喜欢默认选项或示例，那么定制框架有多容易？

• 框架是托管在CDN上还是必须由我自己托管？不管怎样，如果你想定制或者精简框架的任何部分，托管你自己通常是必需的，但是它确实需要更多的工作。

• 这个框架的使用条款是什么，包括归属和许可要求？就像其他类型的软件一样，有自由和开放源码软件框架和专有框架。

Web演示框架可以帮助生成比您自己能够编写的更好的最终产品；然而，框架也引入了另一层次的复杂性。为了让其他库（如 Leaflet 或OpenLayers）以预期的方式工作，您可能必须重写框架的一些样式表。调试此类问题通常涉及到多个级别的样式表和大量的时间。如果你只需要一个非常简单的应用程序，你可以把框架放在一边，创建你自己的样式表，或者至少尝试为你需要的功能选择最简单的框架。