《HTML5实战》——1.4 其他API和规范

简介:

本节书摘来自异步社区《HTML5实战》一书中的第1章,第1.4节,作者: 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 其他API和规范

如前所述,HTML5技术并不仅限于HTML5规范本身,还有大量的其他技术和规范,定义了很多新的功能。现在,很多浏览器厂商都在他们最新版的产品中稳步实现着这些功能,这其中包括地理定位API、IndexDB API、文件阅读器、文件编辑器、File System API,以及SVG和WebGL。

本节主要学习内容

  • 地理定位API及其使用方法。
  • IndexDB API,以及如何利用它在客户端构建数据库。
  • 面向文件的规范,以及如何利用它将文件保存在用户的本地文件系统中。
  • SVG和WebGL,以及如何利用它们在Web中创建高质量的矢量图形和3D动画。
    下面我们就来介绍这些规范,它们虽然是辅助性质的,但作用同样也很重要。先从地理定位API开始。

1.4.1 地理定位API(Geolocation API)
随着近年来移动设备的大量涌现,地理定位应用也多了起来。现代的智能手机上携带的全球定位系统(GPS)传感器能够非常精确地定位用户的地理位置。即使GPS不可用(如移动设备并不具有GPS传感器,或者用户不在卫星的扫描范围内),移动设备还可以转而使用其他的位置跟踪方法,如利用蜂窝网络信号、Wi-Fi信号或IP地址。

地理定位API中定义的方法能使Web应用确定用户的地理位置。当调用这些方法时,浏览器就会通知用户,应用正在请求访问他们的位置。用户可以选择接受或拒绝这种请求,从而确保应用不会未经许可就跟踪他们的位置。如果用户接受了请求,地理定位API就会向应用提交一系列有关用户位置的数据,其中包括了用户的地理坐标位置(经纬度)、海拔高度、航向、速度,以及结果的精确度等信息。

第3章会介绍有关地理定位API的内容,届时你将学会如何获取用户地理位置并在HTML文档中嵌入地图,如图1-15所示。


<a href=https://yqfile.alicdn.com/fb51e89bb1115f82ff414f26274ba2aee6e1d3b7.png
" >

图1-15 在第3章开发的应用中,加入了能反映用户当前位置的地图

1.4.2 索引数据库API(IndexedDB API)
IndexedDB API可以让开发者把复杂数据结构存放在完整的客户端数据库中。与Web Storage API相比,IndexedDB API的重大改进在于:在Web Storage API中,唯一的索引是键/值对的键,而在IndexedDB API中,值也完全可以被索引了。从而为需要搜索或过滤数据的应用提供了一种比较可行的解决方案。不过,IndexedDB API更为复杂,一开始很难掌握。

IndexedDB是HTML5家族中相对较新的成员。除了它之外,还有另外一种被人们推荐的解决方案,Web SQL(结构化查询语言)。这种规范定义了一种客户端关系型数据库,使用SQL声明来查询并操控数据。可最后这个规范还是被遗弃了,因为所有采用这种规范的浏览器都用的是同一种实现(一种SQLite数据库),而这种情况就违反了WHATWG及W3C的标准化策略:每种特性必须有两种独立的、可互操作的实现。尽管该规范被遗弃,但一些浏览器还是保留了对它的支持,这其中就有移动Safari和Android上的一些移动浏览器。目前,浏览器对IndexedDB的支持迟缓不前,所以多数使用IndexedDB的Web应用同时也把Web SQL当做一个回退方案。

在第5章,你将学会如何在任务管理应用中使用IndexedDB(以及Web SQL回退方案)存储任务数据,如图1-16所示。


<a href=https://yqfile.alicdn.com/b91caed41bc22832b5d6ede2c441431075fcacd4.png" >

图像说明文字

图1-16 第5章开发的应用将使用IndexDB来存储一系列任务,并允许快速排序与搜索

1.4.3 文件API、文件阅读器API、文件编辑器API与文件系统API
在Web应用中处理文件向来是个难题。唯一能让用户选择本地计算机文件的原生方法是使用文件输入类型,而这也非常麻烦,特别当遇到调整Web小部件的UI样式时,情况尤其如此。当用户选择文件时,应用不得不把整个文件都上传到服务器端,以便进行处理。虽然可以利用基于Flash和Java的方案来实现更好的功能,但由于需要安装第三方插件,所以也不算是理想的解决方案。

HTML5家族包括了一些与文件有关的规范,试图在Web应用中将文件操作变得简单。File API可以让开发者用JavaScript获取一个文件对象的引用,读取一些属性,如名称、大小以及MIME类型等。可以用文件阅读器(File Reader)API来读取文件对象,既能够整体读取也能部分读取。同样,也能用文件编辑器(File Writer)API将数据输出为文件。文件系统(File System)API能让开发者在客户端的沙盒封装化的本地文件系统中操纵文件对象。这就能把很多与文件相关的互动都放在客户端执行,极大地节省了服务器端的加载时间。过去,把整个文件都上传到服务器端,仅仅因为发现错误的MIME类型,就不得不通知用户文件类型不正确。可想而知,当用户上传完一个大文件后,这样处理是多么糟糕,而我们现在再也不需要这样做了。

你可以使用所有的API来提供一个完整的本地文件系统。第3章将介绍HTML文件到底存在何处。图1-17展示出应该如何使用一些功能。


7c22c5e0a864b1b528ea3e67cd600173a744d478

图1-17 第3章所创建的Super HTML5编辑器可以实现多种文件操作,比如创建新的空白文件,
导入已有文件(通过选择或拖动导入)等。该编辑器将把文件保存在一个沙盒封装的本地
文件系统中。在该文件系统中,可以查看、编辑、删除文件,或者通
过拖放操作,将文件从应用导出到计算机中

1.4.4 可伸缩矢量图形
可伸缩矢量图形(Scalable Vector Graphics,SVG)是一种XML语言,它可以让你使用HTML标记来创建效果惊人的矢量图形,不仅可以利用CSS进行样式编排,并且还能使用JavaScript借助DOM元素进行交互。位图图形的一个主要问题在于,按比例放大其尺寸后,图像质量会降级,产生“像素化”效果。矢量图形则是基于数学公式构建而成,而非由一个个像素点构成,所以即使放大后也能看起来十分美观。

在第7章中,我们将创建一个叫做SVG Aliens的游戏(如图1-18所示),学习如何使用SVG来创建一些形状及复杂对象,实现碰撞侦测,了解SVG相比于canvas元素的优缺点。


<a href=https://yqfile.alicdn.com/3fe80f76da8d0b6cbcbf9dc79c2d3a0255f82a98.png" >

图1-18 SVG Aliens游戏的画面。本书后面章节讲述如何完整地开发这个游戏

1.4.5 Web Graphics Library
最后再介绍一下Web Graphics Library(WebGL),这是一个利用canvas元素来创建3D图形的JavaScript API。它基于Open Graphics Library for Embedded Systems(OpenGL ES)标准,这项标准针对包括手机在内的嵌入式设备而设计了一套3D现实方案。借由它所提供的API,开发者可以使用着色器(shader)、缓冲以及绘图方法来实现图形硬件底层控制。

在第9章,我们将学习WebGL API与3D图形编程,通过创建一个简单的全3D游戏Geometry Destroyer,来了解创建shader,利用缓冲来处理数据,以及通过矩阵运算将3D数据转变为屏幕上的图形等内容。该游戏画面如图1-19所示。


2bd682155afbfbdfe002d64fb98fa1b0da391de7
相关文章
|
20天前
|
安全 前端开发 API
ThinkPHP5 API模块开发规范与示例
【7月更文挑战第6天】本技术文档旨在指导开发者如何完全遵循ThinkPHP5框架的开发规范来构建RESTful API模块。ThinkPHP5(简称TP5)是一款基于PHP的轻量级MVC框架,其简洁、高效的特点非常适合快速开发Web应用及API接口。以下是创建API模块的基本步骤、最佳实践以及代码示例。
35 0
|
1月前
|
安全 Java 程序员
Java8实战-新的日期和时间API
Java8实战-新的日期和时间API
27 3
|
1月前
|
JavaScript 前端开发 测试技术
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
28 3
|
4天前
|
前端开发 API 数据库
告别繁琐,拥抱简洁!Python RESTful API 设计实战,让 API 调用如丝般顺滑!
【7月更文挑战第23天】在Python的Flask框架下构建RESTful API,为在线商店管理商品、订单及用户信息。以商品管理为例,设计简洁API端点,如GET `/products`获取商品列表,POST `/products`添加商品,PUT和DELETE则分别用于更新和删除商品。使用SQLAlchemy ORM与SQLite数据库交互,确保数据一致性。实战中还应加入数据验证、错误处理和权限控制,使API既高效又安全,便于前端或其他服务无缝对接。
26 9
|
9天前
|
JavaScript 应用服务中间件 API
Node.js搭建REST API实战:从基础到部署
【7月更文挑战第18天】通过以上步骤,你可以将你的Node.js REST API从开发环境顺利迁移到生产环境,并利用各种工具和技术来确保应用的稳定性、安全性和可扩展性。
|
13天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
26 7
|
8天前
|
安全 Java API
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
这篇文章介绍了Swagger,它是一组开源工具,围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具,包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger,展示了安装依赖、定义DTO和控制器等步骤,以及如何使用Swagger装饰器。文章最后总结说,集成Swagger文档可以自动生成和维护API文档,规范API标准化和一致性,但会增加开发者工作量,需要保持注释和装饰器的准确性。
Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档
|
1月前
|
存储 前端开发 安全
Nuxt3 实战 (十):使用 Supabase 实现 RESTful 风格 API 接口
这篇文章介绍了如何使用Supabase实现RESTful风格的API接口,用于网站分类和子站点的增删改查(CURD)功能。文章首先阐述了表设计,包括ds_categorys和ds_websites两张表的列名、类型和用途,并提到了为每张表添加的user_id和email字段以支持用户身份识别。接着,文章描述了接口设计,以ds_websites表为例,说明了如何通过RESTful API实现CURD功能,并给出了使用SupabaseClient实现插入数据的相关代码。文章最后提供了项目效果预览和总结,指出学习了Nuxt3创建接口及调用Supabase数据库操作。
Nuxt3 实战 (十):使用 Supabase 实现 RESTful 风格 API 接口
|
1天前
|
API 开发者 Python
淘宝商品详情API接口开发实战
在电商领域,获取淘宝商品详情是关键需求。需先注册淘宝开放平台账号并创建应用,获取AppKey与AppSecret;随后申请商品服务API权限。利用Python,通过AppKey和AppSecret获取Access Token,进而调用商品详情API,需替换示例代码中的`your_app_key`, `your_app_secret`, `your_access_token`, 和`item_id`。注意遵守平台限制,处理可能的错误及合理规划调用策略以避免违规。[示例代码](https://)展示了从获取Access Token到调用商品详情API的全过程。
|
4天前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
【7月更文挑战第22天】构建RESTful API实战:**使用Python Flask设计图书管理API,遵循REST原则,通过GET/POST/PUT/DELETE操作处理/books及/books/&lt;id&gt;。示例代码展示资源定义、请求响应交互。关键点包括HTTP状态码的使用、版本控制、错误处理和文档化。本文深入探讨设计哲学与实现技巧,助力理解RESTful API开发。
16 0