柠檬铺

  HTML5是下一代Web语言的标准，具有兼容性好，安全性高，功能丰富，开发便捷等优点，特别适合如Web操作系统一类的富客户端互联网应用的前端开发。本文将展示如何利用HTML5提供的多种新技术如：本地数据库、多线程开发、视频支持、离线编程等构建一个基本的Web操作系统。    简介
    传统的操作系统有着一些难以克服的缺点，如仅能在本地终端访问，或仅支持有限的远程访问，限于本地终端的资源，计算能力薄弱，存储空间有限，缺乏强大的防火墙等一系列安全机制，安全性较差。鉴于以上缺点，Web操作系统应运而生-Web操作系统是一种基于浏览器的虚拟的操作系统，用户通过浏览器可以在其中进行应用程序的操作，以及相关数据的存储。 Web操作系统提供的基本服务有文本文档的创建与存储，音频视频文件的播放与存储，提供对时间信息的支持等，更高级的服务则包含即时通信，邮件甚至游戏等 服务。Web操作系统克服了传统操作系统的缺点，在网络的支持下，它可以在任何时间，任何地点经由任何支持Web的终端进行访问，可以利用服务器端无限的计算及存储资源，用户数据保存在服务器端，安全性较高。
    相关技术
    目前构建Web操作系统的前端技术主要有Flex、Silverlight、ActiveX 插件等等，它们各有一些优缺点。
    Flex
    Flex是一个优秀的富客户端应用框架，专注于页面显示，Adobe专业维护，统一稳定，而且其脚本语言ActionScript 3是面向对象的，非常适合程序员使用。缺点则是耗能高，占用带宽多，对移动应用的支持性差。
    Silverlight
    Silverlight是由微软推出的用以跟Flash抗衡的RIA（富互联网应用）解决方案，优点是具备硬件级的加速功能，但它目前仍不成熟，对非Windows系统的支持性并不够好，且学习难度较大。
    ActiveX插件
    ActiveX插件同样是微软推出的RIA解决方案，它是一个开放的解决方案，可以兼容多种语言，不过它的缺点也是显而易见的，用户需要调整浏览器的安全等级并下载插件才能运行RIA应用，极大地降低了安全性。
    HTML5
    为推动Web标准化运动的发展，W3C推出了下一代 HTML的标准-HTML5，为众多的公司所支持，因此具有良好的前景。它有以下特点：首先，为增强用户体验，强化了Web网页的表现性能；其次，为适应 RIA应用的发展，追加了本地数据库等Web应用的功能；再次，由于高度标准化以及诸多浏览器厂商的大力支持，它的兼容性和安全性非常高；最后它是一种简 洁的语言，容易为广大开发者掌握。更为难得的是，由于节能和功耗低，在移动设备上HTML5将具有更大的优势。因此更适合如Web操作系统一类的RIA 应用的前端开发。
    系统简介
    本系统基于HTML5开发，利用HTML5引入的多种新技术如拖拽API、视频标签、本地数据库、draw API、多线程开发、离线编程等提供了一个基本的Web操作系统环境，包含了对桌面的支持、应用程序的支持，提供了一个简单的视频播放器和记事本以及一个 时钟，并对系统日志进行了记录，此外还提供了对离线状态的支持。
    桌面实现
    系统对桌面的支持主要包括应用程序图标的打开与拖拽，以及桌面的上下文菜单等。
    桌面拖拽
    桌面的布局由一定数量的div组成，它们按照次序依次排列在矩形的桌面上，为应用程序图标的打开与拖拽提供了基本的支持。
    清单 1.创建 div
    var iconHolder = document.createElement（"div"）；   iconHolder.id = 'iconHolder' + i;   iconHolder.className = "iconHolder";   mainDiv.appendChild（iconHolder）；
    HTML5提供了对drag事件的支持，大大简化了实现拖拽的难度。通过对dragstart事件的监听，将被拖拽的应用程序图标所在的div记录下来，作为拖拽的源。
    清单 2.拖拽支持
    iconHolder.addEventListener（"dragstart", function（ev） {    var dt = ev.dataTransfer;    dt.setData（"text/plain", ev.currentTarget.id）；// 记录被拖拽图标的 id    }, false）；     iconHolder.addEventListener（"drop", function（ev） {    var dt = ev.dataTransfer;    var srcIconHolderId = dt.getData（"text/plain"）；    var srcIconHolder = document.getElementById（srcIconHolderId）；     // 如果拖拽至回收站，则删掉被拖拽图标，否则互换两图标位置   if（ev.currentTarget.firstChild && ev.currentTarget.firstChild.id == "recycleBin" &&    srcIconHolder.firstChild.id != "recycleBin"）{                   srcIconHolder.innerHTML = "";    }else if（ev.currentTarget.firstChild）{           var temp =  ev.currentTarget.firstChild;           ev.currentTarget.appendChild（srcIconHolder.firstChild）；           srcIconHolder.appendChild（temp）；    }else{          ev.currentTarget.appendChild（srcIconHolder.firstChild）；    }    }, false）；
    通过对drop事件的监听，可以获取拖拽的源，以及拖拽的目标div。若目标div为空，则将源div中的应用程序图标转移至目的div中。若目标div 中已包含应用程序图标，则将两个图标的位置互换。若回收站图标处于目标div中，回收站将发挥作用并将源div中的应用程序图标删除。图1显示了桌面拖拽 的效果。