|
楼主 |
发表于 2013-3-25 11:45:50
|
显示全部楼层
来自 中国–北京–北京
3、简单之美
大道至简,化繁为简是许多标准、规范、框架的终极目标。HTML5很好的诠释了这一点,例如以浏览器原生能力支持和代替复杂的Javascript代码、提供简单而强大的新API。
HTML5自身即跨浏览器的JS库,使得开发者的工作更容易:例如新的表单标签和属性、内置拖拽事件使得完全不需要Javascript的支持就能实现许多常用的功能。
我们再来看HTML5表单,它实现了许多简单易用的原生属性和控件,可以轻松的构建强大的表单,帮我们节约大量的Javascript代码。下面是一个HTML5表单的示例:
<form>
<p>
<label for="email">电子邮箱:</label>
<input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱">
</p>
<p>
<label for="username">用户名:</label>
<input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字符">
<input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search">
</p>
<p>
<label for="username-search">生日:</label>
<input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">
</p>
<p>
<label for="blog">博客地址:</label>
<input type="url" name="blog" placeholder="您的博客地址" id="blog">
</p>
<p>
<label for="mobile">手机:</label>
<input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号">
</p>
<p>
<label id="label-working-year" for="working-year">工作年限:</label>
<input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">
</p>
<p>
<label for="age">年龄:</label>
<input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄">
</p>
<p>
<label for="avatar">头像:</label>
<input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="点击选择头像">
</p>
</form>
示例中包含了email、search、date、url、range、number、image类型的输入框和required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete等新属性,它们简单到根据名字就可以揣测出用途。下面是效果图。
HTML5表单在各浏览器里的支持程度和表现并不一致,例如Search输入框目前只被Webkit内核浏览器支持,而日期弹出框和拖动条刻度仅被Opera支持。以上的标签类型和属性目前没有一个浏览器完美支持。
4、实用之美
HTML5的Web Worker、Web Socket、Web Storage等新API让很多后台的工作可以放到前端来处理,Web Worker解决Javascript单线程和阻塞的问题,相当于提供了分布式处理的框架;Web Socket提供了全双工的长连接通信, 利用它,我们可以实现微博消息推送、新邮件推送、实时游戏和聊天,减少了不必要的数据传输,提高了信息的实时性;Web Storage相当于前端的Memcached和数据库。
而HTML5的Canvas是最强大的API之一,可以动态生成图形、图像和动画,在HTML5游戏中使用的非常普遍。在下面的例子中,我将展示HTML5 Canvas之美:实现图像颜色渐变效果。
以前,我们在网站上显示灰度图像到彩色图像的渐变动画有两种实现方式:1、基于IE滤镜的方案,缺点是无法实现浏览器兼容;2、手动创建彩色图像的灰度版本。现在,利用HTML5的Canvas画布,我们可以高效简单的实现此动画效果。
将鼠标放在左边的图片上,图片颜色将从灰度渐变到彩色,一切就在眼前鲜活起来。
核心的Javascript代码如下:
// 加载时就进行处理
$(window).load(function(){
var img = $('#color-img');
// 复制图像
img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img);
img.attr('src', grayscale(img.attr('src')));
// 图像的淡入
$('#color-img').mouseover(function(){
$(this).stop().animate({opacity: 1}, 1000);
})
// 图像的淡出
$('.gray-img').mouseout(function(){
$(this).stop().animate({opacity: 0}, 1000);
});
});
// 创建灰度版的图像
function grayscale(src) {
// 取得canvas元素及其绘图上下文
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0); // 绘制一副图像
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取之前的数据
for(var x = 0; x < imgPixels.height; x++){
for(var y = 0; y < imgPixels.width; y++){
var i = (x * 4) * imgPixels.width + y * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 计算灰度值
imgPixels.data[i] = avg; // rgb中的r
imgPixels.data[i + 1] = avg; // rgb中的g
imgPixels.data[i + 2] = avg; // rgb中的b
// i + 3是alpha通道,我们现在不需要
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
针对不支持的旧浏览器,我们可以使用Modernizr Javascript库或者原生Javascript检测当前浏览器是否支持,并提供替代性的解决方案:
if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext
$(document).ready(backupFunc);
}
目前主要浏览器的新版本都提供Canvas标签的支持:
5、HTML5的不足
目前HTML5还有哪些不足之处?
1、安全:像之前Firefox 4的Web Socket和透明代理的实现存在严重安全问题,同时Web Storage、Web Socket这样的功能很容易被黑客利用,来盗取用户的信息和资料,另外HTTP的机制导致了Web应用安全性有所欠缺,这将在很长的时间内成为问题。
2、性能:某些平台上的引擎问题导致HTML5性能低下。同时在不加入GPU加速的情况下,HTML5处理复杂音视频、动画的性能不尽如人意。
3、完善性:HTML5还在成熟和发展中,像之前曾经支持的Web SQL Database,W3C已经决定不再维护。许多特性各浏览器的支持程度也不一样,而地理定位API在国内的前途还不清晰。
4、技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像Web Worker、Web Socket、Web Storage等新特性要求对于后台的技术需要有一定的了解,甚至需要深入了解其后面原理和逻辑,而Canvas要求视觉和图像算法的一些知识。传统的前端开发者需要掌握更多算法、视觉、后台甚至浏览器原理的知识,机遇的同时也是巨大挑战。
6、总结
上面的大多数不足是HTML5发展过程的中间状态导致的,从长期来看,浏览器厂商的支持、移动互联网的蓬勃发展使得HTML5的前景一片光明,开发者对此必须要要有清楚的认识和长远的目光,提前做好技术储备。
对于HTML5,我认为不仅要了解技术细节,还要从根本上理解HTML5的架构,从更高的层面上理解它的深层次含义,它的设计理念,你会发现它的架构之美,对于个人架构设计能力和境界提升有很大帮助。
Web应用程序和移动互联网是大势所趋,IE6终将消亡,Web和浏览器标准终将统一,HTML5就是道之所藏、美之所在,让我们一起迎接和拥抱HTML5的到来! |
|