了解HTMLAPI的指南

2020-10-16 19:46:28

API是Application Programming Interface(应用编程接口)的缩写,广泛用于服务器间通信的编程。API允许两个服务/服务器相互交互,而不需要知道每个服务/服务器的具体实现方式。API是计算机科学中的一个基本概念-抽象-的一个关键设计方面。

有人认为HTML5作为一种标记语言没有编程接口;相反,这些API是带有格式化HTML响应的JavaScriptAPI。这是因为API通常是为服务器-服务器接口编写的。这种混淆可能与W3C定义的HTML5规范主要涵盖HTML语义元素有关。所涵盖的大多数HTML5API功能都被视为高级HTML,而不是API。WHATWG(Web超文本应用程序技术工作组)是涵盖HTML5API规范的文档。当您查看WHATWG文档时,您会注意到几乎没有提到JavaScript,并且JavaScript知识并不是理解HTML5API的首要内容。

在HTML API中,定义和协议在HTML本身中,工具在HTML中查找配置。HTMLAPI通常由可以在现有HTML上使用的特定类和属性模式组成。

前端开发人员倾向于浏览HTML5API,而不是构建JavaScript UI库来替换其功能。本文将介绍一些HTML5API-它们的特性、意图、用法和限制。

地理定位API允许Web服务检索地理用户信息。因为位置跟踪会损害安全和隐私,除非用户同意并允许浏览器访问这一位信息,否则用户的位置是不可用的。一旦获得同意,通常用户单击“允许”对话框,然后才能检索位置信息以供进一步使用。地理信息对某些应用程序非常有用,这些应用程序在很大程度上依赖于了解用户的当前位置,例如医疗急救服务、健身应用程序、地图服务,甚至市场营销都可以从了解用户的附近获得极大的好处。HTML5地理位置API在启用了GPS和位置信息的设备(如移动设备)上提供更准确的位置。然后,它以一组纬度和经度坐标的形式提供。地理位置API使用像getCurrentPosition()这样的方法,它返回用户的当前位置。它也是一种允许在地图上显示位置的方法,就像Google Maps一样。WatchPosition()方法返回用户的当前位置,并在用户移动时继续更新该位置。这是一种有益的方法,因为它提供了此API的动态实现,为程序员提供了更高级别的灵活性。用于停止watchPosition()方法的clearWatch()方法用于取消位置跟踪。用户到达目的地后,此API方法将停止持续更新位置信息。地理位置的限制包括:

对位置更新几乎没有控制,因为这些更新是由GPS自己管理的。此外,定位精度有时会受到无线ISP(互联网服务提供商)的影响。

拖放(DND)功能是一个简单的过程,允许用户将元素从屏幕的一个部分拖到另一个部分。它只允许HTML元素是可拖动的。此API功能允许程序员创建简单的在线游戏,如虚拟国际象棋,您可以在屏幕棋盘上拖放棋子。拖放过程非常简单。

DND的HTML5实现是由Microsoft在其IE5.0实现中发起的,后来被其他浏览器采用。DND实现使用DOM事件模型和各自的拖动事件。要使元素可拖动,它的“Draggable”属性必须设置为“true”。

像ondragstart、ondragover和ondrop这样的其他功能是在用户开始拖动对象、鼠标在拖动区内移动以及可拖动元素已被释放时触发事件的集合。让原生HTML5API处理拖放,确保对特定环境的完全支持,并最大限度地减少过程中的意外事件/行为。它的限制之一是没有中点拖动控件。

这个API是游戏规则的改变者,因为它允许Web应用程序将用户信息存储在浏览器存储内部。将数据本地存储在计算机浏览器上,无需首先通过互联网传输即可检索数据,这给应用程序带来了巨大的优势。在HTML5 web存储API之前,前端开发者无法实现数据的本地存储,用户数据必须存储在cookie中,即使cookie是基于服务器的,需要随每个HTTP请求一起发送。Web存储API是软件工程师存储大量很少更改的数据的首选,通过Internet传输将耗费宝贵的时间和资源。与Cookie相比,Web存储显然还有其他优势,例如可用存储空间和安全问题,使Web存储成为首选。HTML5Web存储API提供了两种在操作和范围上不同的独特机制-本地存储和会话存储。本地存储将用户的数据永久存储在网站上。即使重新打开或刷新浏览器,用户详细信息也不会清除。从该存储中清除数据是有意的,并通过清除缓存文件来完成。它使用localStorage对象。另一方面,会话存储临时存储数据。关闭或刷新浏览器时,数据将消失。它使用sessionStorage对象。

Web Speech API由两个主要部分组成-语音合成(也称为文本到语音或TTS)和语音识别。Web语音API在浏览器中的实现为通过语音命令(如语音搜索、语音导航和文本听写)进行交互提供了大量机会。该接口目前仍是浏览器前缀,仅限于Chrome和Firefox。它还使用Google服务器端API来处理语音。由于Web Speech API的后端进程,它只有在用户的浏览器在线时才可用。实例化此API的中央控制器接口是SpeechRecognition,它使用onstart、onresult、onend、Continue和lang等方法和事件。此接口的一个缺点是只请求一次权限,并且在第一次授予权限后不需要再次授权。这个漏洞引起了人们对潜在安全漏洞的担忧,因为一旦用户提供了第一次也是唯一的授权,第三方就可以在页面上录制或监听。

WebRTC API允许在浏览器上实现媒体和本机应用程序之间的实时通信功能。IT​支持对等文件共享、语音呼叫和媒体流(音频和视频)。

使用此API,可以在连接到机器的设备(如摄像头或麦克风)上访问音频流和视频流,而不需要第三方插件。

所有现代浏览器都支持WebRTC API,甚至Android和iOS应用程序等本地客户端都支持WebRTC API。

WebRTC不同于其他通信模型。浏览器代表它实现另外三个主要的HTML5 API:

我们只介绍了W3C和WHATWG规范中的一些API。还有更多有文档记录的API值得注意:

Canvas 2D Context API-此API允许用户在浏览器中绘图。不过,在WHATWG的生活水平方面,提到已不再积极维持这项空气污染指数。

电池状态API-此API允许网站根据设备的电池状态更改其操作。如果电池电量不足,用户可能无法再使用某些功能。

Media HTMLAPI-media API是浏览器对​视频和音频元素的JavaScript方法的实现。它使用onplay()、canPlayType()、pause()、play()和load()等方法。

​这个接口允许用户在后台线程中运行JavaScript,而不会影响网站的性能。该脚本独立于用户在页面上的操作。

文件API-此​API允许浏览器从本地文件系统加载和处理文件。它需要用户的权限才能访问文件。它还允许用户从一台计算机中选择多个文件。HTML文件API的一个优点是它包含拖放功能,允许用户将文件从他们的计算机系统拖到浏览器界面。

History API-此API允许访问和操作浏览器的会话历史记录。​。

服务器发送事件(SSE)API-此API允许从服务器自动更新网页。

HTML5属性是使开发人员更容易编程的强大API。它们为Web应用程序和网页带来了丰富的交互性。可悲的是,它们往往被忽视,而偏向于服务器端编程和库。关于HTML5API需要注意的一件重要事情是,它们正在不断地朝着有利于前端开发人员的方向发展。随着它们的成熟,各种实现之间的差异将会缩小。

HTML5绝不是移动应用开发的灵丹妙药。HTML5应用程序是有时间和地点的,就像仍然需要创建本地应用程序一样。

不是每个网页或应用程序都需要HTML5API,但了解它们是什么,它们是如何工作的,它们的局限性和优势将帮助程序员决定什么是最适合手头工作的。