摆脱思维定式

已经入职实习一周的时间了,昨天有幸参加到了一个UED前端组的周会中,从中学到了不少业务方面的知识,虽然很多东西听得都是一知半解的,但是确实挺有收获的,尤其是听到沉鱼姐姐在讲到她们项目中的一个技术关键点时,大致问题如下:

请先看如下图:

这大致表示一个可视化编辑区域,用户可以选择往页面中嵌入任意多的容器,同时每个容器中又可以嵌入任意多个容器,如上图所示,我在一个容器box1中又嵌入了容器box2,又在容器box2中嵌入了容器box3,这种情况是为了需要满足复杂业务逻辑对页面的需求所实现,又因为这是一个WYSWYG编辑器,那么必然是加入对各个容器的可编辑按钮,接着就请看下图:

此图表示当鼠标hover到一个box上,出现的编辑区域提示,即该橙色框内的区域为box1的内容区域,可进行编辑。接下来,我们想像一下我们如何实现如此的页面结构,前一种状态的实现无非就是几个div嵌套(我们用类似box1-div的方式命名这几个div),再加上相关的css修饰即可,当前这种编辑状态,无非就是在当前容器上再加一个div(我们称之为box1-hover-div吧),以实现编辑区域指示。我想这是通常情况下大家很容易想到的解决方案。

那么此时就会遇到一个问题,我如果想编辑box2应该怎么办?很显然我要把鼠标移入到box2所在区域,但是我现在的编辑指示区域在box1上,如刚刚所述的解决方案,我已经在上面放了一个新的div作为编辑区域指示,那么很显然,我的鼠标移动是不可能再进入box2,因为在其上已经有box1-hover-div覆盖,我下面的box2-div是无论如何也不知道其上有鼠标的。可能这时候有些人会说我们可以通过复杂的事件关系,比如通过mousemove等事件,进行鼠标坐标测量,然后再判断相对位置来判定此时鼠标的位置,以及相应的行为,可是mousemove事件从名字就可详见其复杂性,以及后续判断逻辑发复杂性;此时可能我们想到再退而求其次,不用hover这种高级玩意儿了,用click来让用户选择编辑区域,那么mousemove这样的事件就可以消失了,但是坐标判断这种让人抓狂的玩意儿还是不能少吧?!

就在会上,很多FED提到了一些方案,比如让其transparent,但是这个方案从技术方面就是不对的;等等还有不少想法吧,我在其中也在想,认为这不大可能吧~

可是现在回想当时的情形,我们的思路已经完全集中在box1-hover-div,这个可恶的div上,我们在想如何让它在何时的情形下消失,然后鼠标自然就落到里面的box2上了,所以往往方案都是集中在处理这一个div上的~

------------------------华丽的分割线,也让我们自己再想一会儿这个------------------------------------









-------------------------------------华丽的分割线-------------------------------------------------------

既然这篇文章的标题是思维定式,那么何不尝试跳出这个定式,跳出这一个box1-hover-div,突然这时,冒出了四个box1-hover-div会怎么样啊?!我想说到这儿,我们智慧的FED一定知道解决方案了吧~想当年,我们为了圆角可以搞出四个无意义的div嵌套,为什么此时我们不继续将它改进后而“发扬光大”呢?这时我们用数个px的div分别作为box1-hover层的四边,这样中间自然就不会再有干扰的覆盖层遮盖box2及后续的box了。

当时沉鱼姐姐说出这个解决方案时,我们无不感叹其精妙之处,确实,这个方案没有华丽的JS判断优化,也没有高超的技术使用,用的不过就是另一种思维方式,我们通常的hover层就一个div,然后加上边框成为名副其实的一个“层”,但如今我们只需要其边框,这个“层”自然可以不完整,它为空心的不久正好满足要求么?

后来沉鱼姐姐补充到,她把这个方案给玉伯review的时候,玉伯也表示其实现方式和代码都比自己的方案要短小~

最后通过这个案例,我想表达的是,这样的思维定式确实是会禁锢我们前进的重要因素之一,如何摆脱这样情况也是我们需要考虑的重要问题!
p.s.现在在这个团队中实习,真的感到自己颇有收获,虽然时间不久,但是我想今后随着实习的深入,对自己的提升会是全方位的,不论是技术还是思想,我真的很庆幸能够获得这次实习机会,感谢小马和老三的帮助,还有一直默默支持我的