【前端】一个仿q+的前端js程序的开发感言及心得
来源:互联网 发布:核辐射测量仪 淘宝 编辑:程序博客网 时间:2024/04/30 18:30
【前言】
前一段时间,大约两个月前,本人仿照q+及网上同类程序开发了一个 类似于webos的程序,现在来谈谈开发过程中的难题及心得。
首先上一幅剧照:
【详细解析】
一、关于窗口尺寸变化的问题。
由于每个app的logo及背景图片及左侧工具栏都是用绝对定位的,所以每一次窗口发生变化就必须重新计算位置,但是,在传统的resize事件的响应上会有一个bug,每个浏览器都不止响应一次,为了解决这个bug,可以用一个timer延迟resize事件的执行,只有在最后一次resize事件才开始执行重新计算位置的操作。
二、关于弹窗插件的痛苦选择及挣扎
来看看弹窗插件。
一开始我用的是lhgdialog,但是用着用着发现很多bug,然后我用了areowindow,效果是绚丽,但是也是非常不顺手,最后我自己用了lhgdialog的外表,aerowindow的逻辑,然后再改写了部分逻辑,添加上了二维数组的支持(原本我采用的是单个数组记录每一个弹窗的id,假如要关闭或者删除某个弹窗的话只需要知道这个id就ok了,但是后来由于需要支持多个屏幕的显示,而转到某个屏幕后该屏幕的弹窗完全显示出来,其他屏幕的弹窗必须隐藏,所以单个数组的id记录方式不可用,故我将一维数组改成了二维数组),当然,这个组件的尺寸计算我采用了最笨的方式,给定一个宽度及高度,组件自动计算各个部件的位置及高度宽度(譬如:标题栏的位置,左侧窗体边缘,右侧窗体边缘的高度等等,九宫格的部件都给我计算了)。
拖曳及resize事件也是支持的,但是由于弹窗用的是iframe,我发现在拖曳及resize经过iframe窗口内容时会出现卡的现象,这个问题在lhgdialog里面也出现,我后来试着拖曳的时候屏蔽掉iframe(用一个div放在上面),拖曳结束才重新显示iframe,结果卡,顿问题解决,下面是拖曳的效果示意图:
附带我在编写插件时候编写的解释:
openWindow:function(Options){ var defaults = { WindowTitle: null, WindowPositionTop: 60, /* Posible are pixels or 'center' */ WindowPositionLeft: 10, /* Posible are pixels or 'center' */ WindowWidth: 300, /* Only pixels */ WindowHeight: 300, /* Only pixels */ WindowMinWidth: 250, /* Only pixels */ WindowMinHeight: 0, /* Only pixels */ WindowResizable: true, /* true, false*/ WindowMaximize: true, /* true, false*/ WindowMinimize: true, /* true, false*/ WindowClosable: true, /* true, false*/ WindowDraggable: true, /* true, false*/ WindowStatus: 'regular', /* 'regular', 'maximized', 'minimized' */ WindowAnimationSpeed: 500, beforeMinimize:function(){return true;},/*注意,这个是最小化之前的操作,假如返回的是true,那么就继续执行,否则,终止操作*/ afterMinimize:function(){}, /*最小化之后的操作*/ beforeMaximize:function(){return true}, /*注意,这个是最大化之前的操作,假如返回的是true,那么就继续执行,否则,终止操作*/ afterMaximize:function(){}, /*最大化之后的操作*/ beforeClose:function(){return true}, /*注意,这个是关闭之前的操作,假如返回的是true,那么就继续执行,否则,终止操作*/ afterClose:function(){}, /*关闭之后的操作*/ beforeRegular:function(){ return true;}, /*恢复窗口之前,假如是false,则中断操作*/ afterRegular:function(){}, /*恢复窗口之后的后续操作*/ WindowAnimation: 'easeOutElastic',/*见下面的解释*/ /*下面就是为了MGR而特定添加的参数*/ WindowID:'', //--每一个WIndow的唯一ID。 WindowCategory:"default", /*该window的分类,默认为default*/ contentType:"html", /*显示的内容类型,有: html,dom,iframe,默认为html,假如是dom, 那么就会将dom复制一份然后显示出来,假如是iframe,那么就会自动生成iframe*/ content:"", /*根据showType不同而不一样,假如是html,那么就直接是html了,假如是dom,那么就是$("xx")或者选择符号形式,假如是iframe,那么就是url形式了。*/ appendToElement:$('body'), /*这里设定将新建的窗体原始对象添加到什么地方,默认是body,但是当需要用到多种屏幕多个窗体的时候,就必须设置为当前屏幕对象。*/ screenElement:$(window) /*这里设定作为参考的屏幕元素,通常以 window为屏幕标准。*/ }; /*-----------------------------------------------------------------------
假如您对这个插件的编写有兴趣的话,可以参考我的系列博文:
前端插件】弹窗插件的编写【一】---编写一个窗体蓝本
【前端插件】弹窗插件的编写【二】---根据蓝本编写插件
三、右键菜单问题:
请看下面的右键菜单:
上面的右键菜单是来自iteye兄弟 http://51jsr.iteye.com/blog/305517#comments
的一个组件,上面的分别为右击桌面及右击程序图标出现的右键菜单。我改了这个插件,让它可以生成多个不同的右键菜单,平时只显示特定id的菜单。
下面是当时我在js文件上的解析(很久没动过这个插件,所以有点记不清楚了):
//--必须先添加jshashtable 文件,因为我对里面的内容做了修改,用到了哈希表缓存相关对象。/* --------------------------------------------------参数说明option: {width:Number,id, items:Array, onShow:Function, rule:JSON}--注意,我擅自添加了id参数,目的是为了给每一个菜单都添加不同id的右键菜单,当不需要菜单时请调用destroy方法永久移除相关dom对象及缓存下来的js 哈希表对象。成员语法(三种形式)-- para.items-> {text:String, icon:String, type:String, alias:String, width:Number, items:Array}--菜单组-> {text:String, icon:String, type:String, alias:String, action:Function }--菜单项-> {type:String}--菜单分隔线--------------------------------------------------*/
四、开始菜单问题及事件冒泡:
请看看下面这个开始菜单(这里我不得不提一下,这个程序很多Ui都是参考同行的,但是绝大部分前端逻辑都被我重写了):
点击开始按钮后出现开始菜单,但是有一个问题在于,我如何在点击任何一处地方的时候菜单自动隐藏?
答案是js事件的冒泡机制,我前面的博文里已经解释了这个机制及执行顺序,也做了相关试验,各位有兴趣的可以去试一试,这里简单来说,
但一个元素譬如div获得了点击事件以后,这个事件会顺着 子节点-》上一级节点-》。。。。-》document 对象的顺序传递,每一个相关对象的click事件都会被触发,
放到这里来说,只要在document对象加一个隐藏菜单的代码就ok了,这里顺便提一下,假如不希望js的事件传递,我们可以主动中断传递事件。
具体可以看我的一篇博文:
【javascript前端】事件冒泡的实际试验及解决方式
五、关于多屏显示问题。
webos的第一个版本我用的是单屏显示所有的app程序logo,但是很快发现这样可能不够用,所以后来我加入了多屏功能(样式等外表都是参考同行的),算法上我主要为每一个受多屏影响的单元添加二维定位,譬如 app的icon,app的任务栏图标,弹窗等等,具体需要实现的逻辑(都实现了)有:
当我转换屏幕时候,属于该屏幕的所有弹窗需要显示出来,其他屏幕的弹窗需要隐藏;
当我点击任务栏的图标时,需要切换到对应的屏幕;
六、感言及前景。
这次用了一个月又多,感觉js功力深了不多,组件插件都可以自行编写了。对gui编程认识深了。
但是我完成后反过来考虑,实际上这种程序是叫好不叫座的,本地已经有操作系统了需要网上操作系统吗?并且js的性能实在是一个大问题,js的功能也是大问题。
这个程序在ie6下面不正常----用了png图片,并且有卡顿现象,在chrome及高版本的ie下面好很多。
js的功能问题是只,这个程序既不能存储本地数据(有人说ok,只要是html5或者用其他富客户端---silverlight或flash之类的,但是这些恰恰证明了js的弱点),本地交互能力差;
这个程序就是一个词 “炫丽”,倒不如普通的后台程序那么平淡实用。假如需要高交互性,需要充分利用本地资源,还是传统的cs程序好一点。
七、下一期预告:
下一期将介绍我利用swing开发的一个小程序,顺便谈一谈其中的辛酸。
- 【前端】一个仿q+的前端js程序的开发感言及心得
- 【前端】javascript仿windows和webqq的感想及心得
- 一个WEB前端工程师的心得
- 初学前端开发语言的心得
- 用Vue.js开发一个电影App的前端界面
- 前端开发必须知道的JS闭包及应用
- 前端开发--开启程序猿的漫漫前端路
- 关于前端的一些心得
- 对前端的一些心得
- 基于js的前端开发框架对比
- 浅谈前端JS模块化开发的概念
- 前端构建工具、browserify、gulp的组合使用及尝试感言
- 前端开发入门心得
- 用VS2013搭建前端开发环境的心得
- 两款完整的仿Q+程序
- 一个前端的计算器
- 前端开发的常用工具
- 前端开发的常用工具
- XCODE工程名称与想要的APP名称 不一样怎么办?/修改APP 名称
- Helix server相关
- 高层经理监控项目的十一种思维模式
- C# 在自定义线程中采用系统委托方式操作主窗体线程控件的方法
- sql server 还原数据库时提示数据库正在使用,无法进行操作的解决方法
- 【前端】一个仿q+的前端js程序的开发感言及心得
- php mysqli 的使用
- IOS开发---图标
- EF-CodeFirst创建步骤
- s3c2440 camif接口摄像头驱动分析——基于tq2440的ov9650.c
- Draw2d中的布局管理器Layout比较
- JQuery做全選與全取消
- LM算法
- NYOJ 27 水池数目