Table Of Contents

上一个主题

8.5. web上的WPS、Turf.js和空间数据处理

下一个主题

8.7. 演练:带 Leaflet 控件和引导框架的专题地图


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)以预期的方式工作,您可能必须重写框架的一些样式表。调试此类问题通常涉及到多个级别的样式表和大量的时间。如果你只需要一个非常简单的应用程序,你可以把框架放在一边,创建你自己的样式表,或者至少尝试为你需要的功能选择最简单的框架。

This work is licensed under a Creative Commons Attribution 4.0 International License