《HTML5移动开发》—— 第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作

简介:

本节书摘来异步社区《HTML5移动开发》一书中的第1章,作者:【美】Estelle Weyl(埃斯特尔 韦尔),更多章节内容可以访问云栖社区“异步社区”公众号查看。

第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作

HTML5移动开发
如果你跟我多少有点类似的话,你肯定已经痛恨旧版IE浏览器很多年了。那些浏览器满是失败。然而,它们在整个生命周期内在任何地方失败的方式是一样的[1]。我们都知道IE6非常糟糕,但是它糟糕的方式是一样的。一旦我们搞清楚了如何填IE6的坑(polyfill[2]),我们就已经把它搞清楚了。

在移动世界,我们同样面临一些问题,不同的是这些问题以一种更新、更多样化且不断变化的方式存在。在不同设备上的不同浏览器版本可能支持很多新的特性,但实现方式可能不同。或者说,它们可能确实支持某个特性,但是这个特性可能并用不了。举个例子,一个现代浏览器可能支持也可能不支持localStorage。支持localStorage的设备可能允许也可能不允许对其写入。即使浏览器允许从localStorage读取数据,但这个读取操作可能非常耗时从而阻碍了性能。并且,即使浏览器通常情况下允许你对其写入,但localStorage本身可能已经达到了存储上限。

我们在这里无法涵盖所有操作系统和设备上所有浏览器的全部非标准情况(quirk)。即使我了解所有的这些非标准情况(而且我也不了解),这些非标准情况可以装满一个大部头,并且在我完成这个大部头之前它就过期了。这本书呢,实际上也过期了。浏览器支持以及规范等周边环境都在不断发生变化。没有办法制作一本最新的书出来,因为到其交付印刷之际——或者甚至在你刚完成一章的时候——周边环境已经变了。虽然某些浏览器、特性、电话以及提到的网站可能已经过时了,但本书带出的最佳实践在未来几年还是有意义的。本书的一个指导原则是:如果你采用最佳实践,并且依照标准编写代码,你的代码将能够在当前及以后所有的设备上运行。

我把针对特性的浏览器支持包含在内了,而且也没有缺少针对浏览器特性的支持,因为所有的浏览器将沿着正确的方向前进正是大家所期望的。今天在浏览器中的那些非标准模式(quirk)明天也许就解决了。

基于以上原因,在使用一个特性时,你不仅确实要做特性检测,而且需要进行测试以确保能够成功地使用这些支持的特性。

本书将使用与设备、操作系统以及浏览器无关的标记并且不使用JavaScript类库。我选择不使用类库仅使用普通JavaScript进行编码以确保你学到真正的代码。通过使用普通JavaScript编码,希望就不会存在一个方法到底属于原生方法还是框架提供的方法这样的困惑了。

但这不意味着你不应该使用类库。恰恰相反!开源类库是弄清楚浏览器不标准情况的最佳选择之一。开源项目拥有成百上千甚至成千上万的贡献者。这些成千上万的贡献者们密切地在大量的设备上进行开发和测试,他们找出那些不标准的情况,报告问题,并且给类库提交修正来处理这些情况或者提供解决方法和腻子脚本。这成千上万双眼睛同时也在报告bug,提醒浏览器厂商注意那些没有遵循标准运行的东西,以便这些bug可以在浏览器后续发布中得以修正。

流行的开源类库和HTML5 JavaScript API腻子脚本是快速发现各种各样的浏览器不标准情况及其解决方案的最佳资源。它们应被视为你的开发工具箱中的一个重要组成部分。即使你不使用它们,也一定要阅读这些源码来学习别人已经发现了的那些移动浏览器的bug。

在你阅读HTML5、CSS3以及相关的JavaScript API时,学习的最佳方法就是编写代码。让我们开始编码吧。

相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
145 14
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
5月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
移动开发 JavaScript 前端开发
《HTML5和JavaScript Web应用开发》——第 2 章 移动Web 2.1移动优先
移动Web指的是为移动设备(例如可以实现无线连接的智能手机或者平板电脑)创建的、基于浏览器的应用。从2008年起,Web的重心转向移动浏览器,为当今的Web开发人员和用户提供更好的生活质量。但是,当你开始在大量的设备和浏览器上测试新的移动Web应用时,你可能会困惑于应该支持什么平台,应该使用哪些HTML5特性来构建应用。
1677 0