简介： Web 操作系统有着传统操作系统无法比拟的优势，如可以随时随地利用任何终端进行访问，数据保存在服务器端，空间更大，数据安全性更好，可以利用服务器端的 CPU、内存等资源进行更为复杂的运算。然而目前的 Web 操作系统前端大多基于 Flex、Silverlight、ActiveX 插件等技术开发，存在着对移动设备的支持性差，终端安全性差，开发难度大等缺点。
HTML5 是下一代 web 语言的标准，具有兼容性好，安全性高，功能丰富，开发便捷等优点，特别适合如 Web 操作系统一类的富客户端互联网应用的前端开发。本文将展示如何利用 HTML5 提供的多种新技术如：本地数据库、多线程开发、视频支持、离线编程等构建一个基本的 Web 操作系统。
简介
传统的操作系统有着一些难以克服的缺点，如仅能在本地终端访问，或仅支持有限的远程访问，限于本地终端的资源，计算能力薄弱，存储空间有限，缺乏强大的防火墙等一系列安全机制，安全性较差。鉴于以上缺点，Web 操作系统应运而生 – Web 操作系统是一种基于浏览器的虚拟的操作系统，用户通过浏览器可以在其中进行应用程序的操作，以及相关数据的存储。Web 操作系统提供的基本服务有文本文档的创建与存储，音频视频文件的播放与存储，提供对时间信息的支持等，更高级的服务则包含即时通信，邮件甚至游戏等服务。Web 操作系统克服了传统操作系统的缺点，在网络的支持下，它可以在任何时间，任何地点经由任何支持 Web 的终端进行访问，可以利用服务器端无限的计算及存储资源，用户数据保存在服务器端，安全性较高。
相关技术
目前构建 Web 操作系统的前端技术主要有 Flex、Silverlight、ActiveX 插件等等，它们各有一些优缺点。
Flex
Flex 是一个优秀的富客户端应用框架，专注于页面显示，Adobe 专业维护，统一稳定，而且其脚本语言 ActionScript3 是面向对象的，非常适合程序员使用。缺点则是耗能高，占用带宽多，对移动应用的支持性差。
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
|
1 2 3 4 |
var iconHolder = document.createElement("div"); iconHolder.id = 'iconHolder' + i; iconHolder.className = "iconHolder"; mainDiv.appendChild(iconHolder); |
HTML5 提供了对 drag 事件的支持，大大简化了实现拖拽的难度。通过对 dragstart 事件的监听，将被拖拽的应用程序图标所在的 div 记录下来，作为拖拽的源。
清单 2. 拖拽支持
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 显示了桌面拖拽的效果。
图 1. 桌面拖拽效果
程序打开
程序可以以两种方式打开，左键点击或通过上下文菜单打开。
通过监听 div 的 onclick 事件，获取要打开的应用程序 id，并利用 openApp 方法打开相应的应用程序可实现对左键点击的支持。
清单 3. 左键点击
|
1 2 3 4 5 6 |
iconHolder.onclick = function(ev){ if(ev.currentTarget.firstChild){ openApp(ev.currentTarget.firstChild.id); ev.stopPropagation(); } }; |
通过监听 div 的 oncontextmenu 事件，获取要打开的应用程序 id，并利用 openAppContextMenu 方法显示相应应用程序的上下文菜单，可实现对右键上下文菜单的支持。
清单 4. 上下文菜单
|
1 2 3 4 5 6 7 |
iconHolder.oncontextmenu = function(ev){ if(ev.currentTarget.firstChild){ openAppContextMenu(ev.currentTarget.firstChild.id, ev); ev.stopPropagation(); } return false; }; |
利用相应应用程序的 id，可以获取对应应用程序的脚本，并执行，同时在系统日志中记录下相应的操作。
清单 5. 程序打开
|
基于 Flex、Silverlight、ActiveX 插件等技术开发，存在着对移动设备的支持性差，终端安全性差，开发难度大等缺点。
HTML5 是下一代 web 语言的标准，具有兼容性好，安全性高，功能丰富，开发便捷等优点，特别适合如 Web 操作系统一类的富客户端互联网应用的前端开发。本文将展示如何利用 HTML5 提供的多种新技术如：本地数据库、多线程开发、视频支持、离线编程等构建一个基本的 Web 操作系统。 简介 传统的操作系统有着一些难以克服的缺点，如仅能在本地终端访问，或仅支持有限的远程访问，限于本地终端的资源，计算能力薄弱，存储空间有限，缺乏强大的防火墙等一系列安全机制，安全性较差。鉴于以上缺点，Web 操作系统应运而生 – Web 操作系统是一种基于浏览器的虚拟的操作系统，用户通过浏览器可以在其中进行应用程序的操作，以及相关数据的存储。Web 操作系统提供的基本服务有文本文档的创建与存储，音频视频文件的播放与存储，提供对时间信息的支持等，更高级的服务则包含即时通信，邮件甚至游戏等服务。Web 操作系统克服了传统操作系统的缺点，在网络的支持下，它可以在任何时间，任何地点经由任何支持 Web 的终端进行访问，可以利用服务器端无限的计算及存储资源，用户数据保存在服务器端，安全性较高。
相关技术 目前构建 Web 操作系统的前端技术主要有 Flex、Silverlight、ActiveX 插件等等，它们各有一些优缺点。 Flex Flex 是一个优秀的富客户端应用框架，专注于页面显示，Adobe 专业维护，统一稳定，而且其脚本语言 ActionScript3 是面向对象的，非常适合程序员使用。缺点则是耗能高，占用带宽多，对移动应用的支持性差。 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
HTML5 提供了对 drag 事件的支持，大大简化了实现拖拽的难度。通过对 dragstart 事件的监听，将被拖拽的应用程序图标所在的 div 记录下来，作为拖拽的源。 清单 2. 拖拽支持
通过对 drop 事件的监听，可以获取拖拽的源，以及拖拽的目标 div。若目标 div 为空，则将源 div 中的应用程序图标转移至目的 div 中。若目标 div 中已包含应用程序图标，则将两个图标的位置互换。若回收站图标处于目标 div 中，回收站将发挥作用并将源 div 中的应用程序图标删除。图 1 显示了桌面拖拽的效果。 图 1. 桌面拖拽效果
程序可以以两种方式打开，左键点击或通过上下文菜单打开。 通过监听 div 的 onclick 事件，获取要打开的应用程序 id，并利用 openApp 方法打开相应的应用程序可实现对左键点击的支持。 清单 3. 左键点击
通过监听 div 的 oncontextmenu 事件，获取要打开的应用程序 id，并利用 openAppContextMenu 方法显示相应应用程序的上下文菜单，可实现对右键上下文菜单的支持。 清单 4. 上下文菜单
利用相应应用程序的 id，可以获取对应应用程序的脚本，并执行，同时在系统日志中记录下相应的操作。 清单 5. 程序打开 |
