软件技术HTML5如何构建基本的Web操作系统

米花 发表 于:8年前 浏览量:155

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

  1. var iconHolder = document.createElement("div");   
  2. iconHolder.id = 'iconHolder' + i;   
  3. iconHolder.className = "iconHolder";   
  4. mainDiv.appendChild(iconHolder);  

HTML5提供了对drag事件的支持,大大简化了实现拖拽的难度。通过对dragstart事件的监听,将被拖拽的应用程序图标所在的div记录下来,作为拖拽的源。

清单 2.拖拽支持

  1. iconHolder.addEventListener("dragstart", function(ev) {   
  2.  var dt = ev.dataTransfer;   
  3.  dt.setData("text/plain", ev.currentTarget.id);// 记录被拖拽图标的 id   
  4.  }, false);   
  5.  
  6.  iconHolder.addEventListener("drop", function(ev) {   
  7.  var dt = ev.dataTransfer;   
  8.  var srcIconHolderId = dt.getData("text/plain");   
  9.  var srcIconHolder = document.getElementById(srcIconHolderId);   
  10.  
  11.  // 如果拖拽至回收站,则删掉被拖拽图标,否则互换两图标位置  
  12.  if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id == "recycleBin" &&   
  13.  srcIconHolder.firstChild.id != "recycleBin"){   
  14.                 srcIconHolder.innerHTML = "";   
  15.  }else if(ev.currentTarget.firstChild){   
  16.         var temp =  ev.currentTarget.firstChild;   
  17.         ev.currentTarget.appendChild(srcIconHolder.firstChild);   
  18.         srcIconHolder.appendChild(temp);   
  19.  }else{   
  20.        ev.currentTarget.appendChild(srcIconHolder.firstChild);   
  21.  }   
  22.  }, false);  

通过对drop事件的监听,可以获取拖拽的源,以及拖拽的目标div。若目标div为空,则将源div中的应用程序图标转移至目的div中。若目标 div中已包含应用程序图标,则将两个图标的位置互换。若回收站图标处于目标div中,回收站将发挥作用并将源div中的应用程序图标删除。图1显示了桌 面拖拽的效果。

图 1.桌面拖拽效果

本文由 米花发表。转载请注明出处:https://www.mihua.net/list/0/3245.html

发表评论

您的昵称:

猜你喜欢

最近更新