# FSD Javascript Desktop

**Repository Path**: leosun_cn/FSD-Javascript-Desktop

## Basic Information

- **Project Name**: FSD Javascript Desktop
- **Description**: Javascript桌面
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 33
- **Forks**: 0
- **Created**: 2015-10-06
- **Last Updated**: 2021-03-30

## Categories & Tags

**Categories**: desktop-ui

**Tags**: None

## README

#FSD Javascript Desktop

[项目托管地址](https://git.oschina.net/leosun_cn/FSD-Javascript-Desktop "前往")  
[Demo地址](http://112.124.57.30/FSD%20Javascript%20Desktop/index.html "前往")   
Demo地址将在2015年10月29日更新或关闭   
特别注意：Demo中的部分WebGL展示页面是第三方的（第五、六、七个应用），效果非常好，但大部分服务器都在国外，国内可能打不开，请自行解决（你懂的）

##关于版权

本项目遵循MIT协议，请知悉。  

如您对MIT协议有任何异议，您将无权使用、复制、修改、合并、出版发行、散布、再授权及贩售软体及软体的副本。  

本项目img文件夹中的图片（图标和背景图片）来源于网络，仅作演示之用，请各位开发者及时替换删除，勿直接用于商业用途。由于上述图片版权不明，如您发现侵犯了您的版权，请及时联络，我们立即将予以删除。

##说明
项目涉及的主要技术
[Backbone](http://backbonejs.org/)、
[Jquery](https://jquery.org/)、
[RequireJS](http://www.requirejs.org/)、
[Underscore](http://underscorejs.org/)、
[AngularJS](https://angularjs.org/)、
[AmazeUI](http://amazeui.org/?_ver=2.x)
项目中部分内容需要请求RESTful数据，因此无法用本地浏览器直接打开，需要配置HTTP静态服务器。

###实现的功能

应用窗口拖拽   
应用窗口调整大小   
应用窗口通过鼠标实现快速左、右停靠以及最大化（类似于Windows7窗口）   
应用窗口随浏览器窗口自适应   
背景页面可配置   
应用可配置   



##项目结构
**/bower_components/** 第三方组件文件夹  
**/css/** 桌面框架用到的CSS文件文件夹  
**/js/** 桌面框架用到的Javascript脚本文件夹  
**/img/** 桌面框架用到的图片文件夹  
**/apps/** 不跨域的子应用文件夹  
**/system/** 测试用的模拟json数据文件夹  
**/index.html** 项目入口文件  

###模型数据
####/system/application.json

说明   
**"id": 1015,** //应用id   
**"name": "测试1015",**//应用名称   
**"icon":** **"./img/zootetragonoides/katongxiaodongwu_15.png",**//应用图标URL   
**"description": "",**//描述   
**"url": "./apps/app001/index.html",**//应用链接   
**"developer":"",**//开发者   
**"version":"",**//版本   
**"uniqueWindow":true,**//是否只能打开一个窗口实例   
**"minHeight":550,**//最低高度   
**"minWidth":512,**//最低宽度   
**"width":512,**//宽度   
**"height":512,**//高度   
**"overflow":false**//是否显示纵向滚动条（无横向滚动条）   

注意：为保证窗口能随浏览器窗口自适应，且符合逻辑，一般情况下最低宽度不应低于512不高于1024，最低高度不低于40不高于550；宽度和高度不低于最低宽度和高度

####/system/explorer.json

说明   
**"background_img": "url(img/img0.jpg)",**//背景图片（若不设置，背景颜色将会覆盖）   
**"background_color": "#0CC"**//背景颜色   


任务栏下面那条白色边框可以去掉，加这条边框的主要目的是为了在Microsoft Windows系统中打开浏览器与任务栏区分开来

###设计思路概要

项目最初设计目标是实现单页面应用(Single Page Application)的功能热插拔。基于对复杂性的要求，最初考虑兼容PC和Pad中的现代浏览器（对于老掉牙的IE，我是拒绝的），然而，当我发现Pad拒绝iframe之后，项目只好拒绝了Pad，事实上，Pad上并不适合窗口化的程序，最多也就是分屏，所以最终只选择兼容了PC现代浏览器。

这个桌面和MicroSoft Windows有一点点像，body下面的explorer元素涵盖了大部分dom结构，包括桌面图标区域和任务栏，任务栏中又包含了左侧的开始菜单元素，中部最小化任务区，以及托盘区。

项目基于Backbone MVC模式，大部分dom结构的改变都是通过监听事件、广播事件触发的，一个事件广播之后，可能会有多个窗口view响应事件，产生改变

###存在的已知问题

JS代码虽然仅有1000余行，但是在短时间内仓促完成，难免有疏漏之处

1.应用窗口打开后，若iframe中的网页与桌面框架处于不同域，将会因禁止跨域而出现刷新按钮不可用   
2.应用窗口中打开的网页不能过于庞大，否则将严重影响拖拽性能   
3.应用窗口中的网页也应设计为单页面应用，不应使用带有打开新标签页的链接   
4.应用窗口中的单页面应用，应设计为自512-1920宽度的响应式网页   

###可能会加入的功能

自动全屏（虽然并不难，只是不知道这样做好不好）
开始菜单
桌面框架通用通知中心   
应用窗口之间相互调用和通讯（基于Websocket传递事件）   
桌面框架通用阻断式弹出窗口   
窗口应用路由规范   

可能会做一个移动单页面应用功能热插拔解决方案，类似于web版本的ios（然而并不知道有多大意义）   

###演示动画（文件较大，加载可能比较慢）
![image](https://git.oschina.net/leosun_cn/FSD-Javascript-Desktop/raw/master/img/screenSnapshot/desktop0003.gif)
![image](https://git.oschina.net/leosun_cn/FSD-Javascript-Desktop/raw/master/img/screenSnapshot/desktop0002.gif)
![image](https://git.oschina.net/leosun_cn/FSD-Javascript-Desktop/raw/master/img/screenSnapshot/desktop0001.gif)

#####about me

[个人主页](http://fsd.online "前往")  
托管于GAE，大部分地区访问受阻