【前端】一个仿q+的前端js程序的开发感言及心得

【前言】

前一段时间，大约两个月前，本人仿照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开发的一个小程序，顺便谈一谈其中的辛酸。