HTML5之美在何方

  现在大热的HTML5到底美在哪里?HTML5到底能为实际的移动开发带来哪些改变?来自阿里云云手机服务运营部的前端开发工程师分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面作了细致讲解。
说到HTML5通常都会提到它新增了一些新的标签,这些标签可以减小文档的大小,也能够节省一些CSS定义,可是这个好处不足以说明HTML5在技术变革上带来的影响,咱们仍是先要明白HTML5的原理究竟是怎样的,它带来的变革为何会这么大?

常见的原理

      HTML5的产生以及它的设计彻底是遵循了一些常见的原理,这些原理在李松峰老师的博客上有详细地阐述。

      首先第一条原理是:发送时保守、接受时开放。

      做为工程师,发送给浏览器的文档应该尽可能的严谨,可是浏览器做为接收方,应该持有一个开放的姿态,而不会由于某个文档有问题,到浏览器窗口里面就不显示了,只是留下一片空白给用户。既然HTML存在标签没有正常闭合的可能性,也存在属性丢失的状况,只要文档没有产生二义性,浏览器应该猜想到最终的行为并作出正确处理,在技术层面浏览器有理由这么作。

      第二,避免没必要要的复杂性。

      咱们在编写的HTML的时候,可能会定义一个很长行长的文档类型声明,这个文档类型声明是给浏览器看的,若是可以简化它,在说创做的时候能省下一些时间,并且也不用浪费力气去记那些难记的字符。实际上,省略大多数字符,浏览器也能按照咱们指望的那样去运行。

      还有script标签,咱们可能会设置它的type为“text/javascript”,实际上也是没必要要,若是type属性没有被声明,默认就按JavaScript处理。相似的东西有不少,在文档里面能省掉的咱们就应该大胆地省掉,这样不只是在创做这个文档的时候,可以给咱们带来这些方便,并且在共同维护的时候也能带来一些益处。

      第三,网络价值同达到网络用户数量的平方成正比。

      如今HTML5这么火,不少人就拿它跟Flash去作对比,说Flash多么多么烂,说HTML5多么多么好。实际上咱们创做的内容最后是给用户去看的,若是这个东西用户以为好,无论用什么技术我以为都是次要的。

      最后咱们要的是将服务推送到用户面前,而不是要说某种技术多么好,能够杀死另外一个技术。实际上在这里,它们的协同工做才是符合HTML5的设计思想,在这个层面上我以为Flash也是HTML5中的一员。

      第四,大多数人的意见和可运行的代码。

      没有HTML5规范的时候,浏览器厂商能够各自为阵,能够加入了本身的标准,虽然这些标准不是W3C制定的,可是大多人都有这些需求,它们能解决实际问题。因此也刺激W3C加入到这些标准的制定中去。

技术细节

      CSS

      有位测试工程师报了个bug给开发工程师。说页面上的单选框样式太难看了,建议改一下,换个颜色。开发工程师当时就晕倒了,说这个是浏览器默认的,改不了。改不了怎么办?只能把bug打回去。

      基于CSS3的特性,如今彻底能够改变浏览器控件的默认外观。

      而后是布局。改变样式是CSS的强项,也是它的职责所在。咱们可使用百分比作弹性布局。如今设备比较多,有iPad、iPhone、还有其各类屏幕尺寸的安卓,假如我想用HTML5的技术作一个应用,适用于全部平台,这个时候百分百确定是不够的,而精准的弹性布局又显得很重要。

      CSS3有一个box-flex的属性,假设有个容器,里面有三个div,在设置了margin的同时将它们的box-flex设置成1,看到的效果就是三个元素均等分,我还能够改变它的比例,好比将第一个元素固定宽度,剩下的两个元素也能够均等分。除了从左往右布局,使用cloumn-count能够作到从上往下布局。

      box-flex能够解决一部分屏幕适配的问题,若是想作到更精准的布局,好比说在小屏幕下的布局是一个样子,大屏幕下可能加入了更多的元素,或者更复杂了,甚至大小、颜色、位置都变了。这个时候可使用Media Queries的技术。咱们能够先定义某个样式,而后在某种屏幕上面覆盖默认样式,或者彻底使用另外一套样式。

      除了CSS3这些奇妙的属性,用它来设计一些复杂背景也是很是适合的。这里有一个我同事开发的Chrome插件叫Coda Cola,他还为这个插件作了一个分享的网站。别人根据这个插件,作出了一些比较酷的CSS效果,能够再分享出来。

      JavaScript

      说了CSS3,再说说JavaScript。你们说JavaScript美吗?好像咱们对它的印象也不是很好。不只前端,后端对JavaScript的象也好不到哪去,甚至会更糟糕。

      首先它的执行效率比较慢。

      而后它的API接口比较烂,好比我要查找某个元素,能够用getElementById,getElementsByTagName, 这么一长串。除了很长,我还要把第三个参数指定为false。如今作应用的话,咱们通常都会选择用框架来帮助本身进行开发,从那些复杂的语法中解脱出来。

      再者,JavaScript调试比较困难,JavaScript边解释变执行,代码一多,方法之间的调用层级变深,若是出错,就很难定位到错误所在。特别是在没有firebug等调试工具以前,找错误有时候就跟作噩梦通常。 JavaScript虽然有这么多弊病,可是它如今还在快速发展。到如今,咱们有不少种的框架能够选择,这里面确定有你们喜好的框架。但在HTML5的到来的时刻,咱们有一些更好的选择。好比说作元素查找,之前可能用到框架,如今不用框架,使用原生的API也能够很方便地作到。这是第一点,就是有些功能再也不须要框架作支持了。

      第二,JavaScript中加入一些新的特性,好比说LocalStorage。没有LocalStorage的时候,咱们可使用Cookie在客户端记录一些用户相关的数据,可是Cookie记录的容量有限,并且 HTTP请求会携带cookie数据。在须要保存大量数据或者设计离线应用的时候,LocalStorage就很是有用了,LocalStorage的容量比较大,在移动平台上,至少有2M的存储空间。

      框架

      虽说有了一些原生的API,也有了一些新的功能,可是在开发的时候,咱们仍是要借助一些框架来提升工做效率。有一个叫Zepto的框架,是咱们在项目中常常会用到的框架。它的API几乎跟jQuery同样,跟jQuery相比,Zepto去除了一些移动平台上没必要要的代码。除此以外,它还支持了 tap、swipe等手势。 在移动平台上,咱们也可使用Canvas技术作一些游戏。

      在移动互联网上,手机跟PC有一些特征上的差别。用到手机特有的功能,咱们能够作一些颇有意思的东西。好比说我想得到地理定位,还有传感器、查询通信录、拍照,这些都是手持设备特有的功能,虽然W3C有制定这些API的规范,可是目前没有浏览器已经完整实现。若是使用PhoneGap的话,咱们就能使用到这些API了。javascript

相关文章
相关标签/搜索