【HTML5活动】使用HTML5对web应用系统进行提升

    对于一个web应用系统来说，javascript似乎是首选，近几年兴起的flex也渐渐占据一席之地，笔者是电信BI系统软件开发人员，对于web系统开发来说，拥有一套完备的、易使用的web框架（主要指前台），真的是太有必要了。

    js方面就不多说了，一个强大的脚本语言，现在哪个网站或系统没用到js，那真的是太强悍或太简单了，flex那么牛叉，还是得用js垫脚。

    笔者的web系统并不是很成熟，一些常用的控件或布局都是使用js编写的，优点是能实现功能，至于缺点，那就太多了：

1 速度慢

     js再牛叉，也没html快，可惜html能实现的东西太少了，满足不了现实需求啊！

2 理解困难

    js不是一门简单的语言，比起java来讲，js更具挑战性，想成为一个合格的js开发人员，那可是要3-5年的功夫的。

3 大量代码堆砌

    再牛的js框架，也是需要添加业务的，因此，一个页面中包含4,5千行js代码，那是太平常的事情了。

4 弱小的图形功能

    ie的vml和ff的svg

    然而，HTML5的出现，似乎给我们指出一条明路：

        1 全新的输入表单

        2 Canvas 对象，具有矢量绘图能力

        3 编辑、拖放功能

        4 内置视频、音频播放功能

        ...

    下面，主要看一下那些功能是web系统所能用到的：

    1 input的required属性

Name: <input type="text" name="usr_name" required="required" />

    样例地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_required

   

    说起这个required，真的是让人爱不起来啊，空内容必须提示，要不用户怎么知道什么内容必填呢？平时都用js的value=''判断了，还得写div层，现在好了，有HTML5，这个部分要告别js了。

    2 input的placeholder属性

输入域为空时，要显示一个默认的提示，比如：‘请填入11位电话号码’等，这个在查询时很有必要，现在很多漫画网站上 也有这个提示的。

<input type="search" name="user_search"  placeholder="Search W3School" />

    

样例地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_placeholder

   3 input的pattern属性

        当一个文本框只能输入数字或某些特定字符时，该怎么办呢？在HTML5以前，恐怕又是js显威了。现在不怕了，HTML5有新方法了，只要你会写正则，想怎么控制文本框都行！

        只能输入3位字符的文本框：

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

    

    样例地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_pattern

    4 form属性

        只有写在form内部才能算是本form的表单元素？

        那是以前，现在不一样了，只要有form的id，怎么写都能指向特定的form，跑不了的！

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

    例如以上代码：lname不是form内部的元素，也可以是form的元素。

   5 list属性

        相当于文本框形式的select元素，暂时来看，用处不是很大。

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

测试地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_datalist

6 video属性

    优点：浏览器内置程序，不需要外部插件，而且加载速度稍微快一点。

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

   

    测试地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_video_all

7 canvas元素

    绘制HTML图形，目前出了几款比较漂亮的HTML5图表，渲染速度快，而且拖动起来也很流畅。

    iGrapher：基于web的股票预测分析图形

   

8 本地存储数据

    如果要在前台使用js字符串储存一部分数据的话，那是相当消耗内存的，等不了多久，浏览器就会因为内存耗尽而死掉了，HTML5提供的客户端存储解决了这个问题。

    这样一来，即使是做大数据量的前台分页，也是有可能的。

    测试地址：www.w3school.com.cn/tiy/loadtext.asp?f=html5_webstorage_local_pagecount

9 email类型input

    如果你会写正则表达式的话，使用input的pattern也能实现这个功能。

E-mail: <input type="email" name="user_email" />

   

    测试地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_email

10 拖拽功能

     HTML5的拖拽不是什么新鲜物，IE版本早已有之，只是HTML5将其“拿来”了，以前我们使用div层做拖拽，一样做得顺风顺水，说到底，HTML5的拖拽的本质是增强了浏览器动作监听：ondragstart,ondragend,ondragenter,ondrop,ondragover，虽然使用mouse的over、down、up监听一样可以模拟此功能，但是个人觉得还是标准的好，HTML5算是把IE的一大优势集合进来了。

    PS：web系统中使用拖拽功能也是一大趋势，更能增强系统易操作性。

   

    样例地址：http://www.zhangxinxu.com/study/201102/html5-drag-and-drop.html

以上便是本人遇到并实践过的HTML5的一些新功能，其实HTML5说到底只是提供了一些基本的页面元素内容而已，有了它，我们可以更方便地实现更多的功能，优化我们的系统，但是，它毕竟不是脚本型语言，用它来实现业务逻辑有点异想天开了，期待javascript3.x的到来！

我们可以做的：

    拿HTML5原生的一些方法或属性，代替js中的部分代码，加快系统运行速度，或实现以前未能实现的功能！