前端的小玩意（9.5）——做一个仿360工具箱的web页面（完结篇，可以跑起来的工具箱）

DEMO网址：

http://jianwangsan.cn/toolbox

（五）添加、点击和移动的逻辑

我反思了一下，在（四）中我写的并不好，事实上，无论是大按钮，还是被添加到我的工具，或者是添加到常用工具栏，他都是一个按钮，因此，应该共享状态，即他们属于同一个tool实例，并能互相影响。

 

需求分析：

在重写Tool类之前，需要明确分析按钮的逻辑。

在全部工具页面：

①当按钮未被添加时，鼠标移动上去会有添加按钮显示；

②当按钮未被添加时，鼠标无论点击按钮本身还是点击添加按钮，都执行添加逻辑，将添加按钮显示为取消，执行一次添加动画，添加完成后，按钮隐藏；

③当按钮已被添加时，鼠标点击会启用按钮本身的逻辑（比如打开软件）；

 

在我的工具页面：

①当按钮未被添加时，不显示；

②当按钮被添加时，显示按钮；

③点击按钮时，点击会启用按钮本身的逻辑（比如打开软件）；

④长按按钮，可以拖动按钮，原有按钮位置不被占用，显示为空白；

⑤按钮拖动中时，若经过某个已有按钮的位置，原按钮位置不再被占用，经过的位置被空白占用，相当于把空白占位符从DOM中的原位置挪到了DOM树中的新位置；

⑥按钮拖动时，可以离开工具箱的页面显示范围，但不会显示出来（类似overflow:hidden）的效果；

⑦当按钮拖动到主界面快捷入口的四个图标范围时，若原位置有图标，再该位置图标及右侧所有图标依次向右移动一位；当离开这个位置时，原有图标立刻返回原位置；

⑧主界面快捷入口最多有四个图标，假如新插入一个，那么原本最右边的将被移除；

⑨点击编辑按钮时，所有图标右上角都会出现一个红叉符号；

（10）当编辑状态时，点击主界面快捷入口的四个图标的红叉时，将移除被点击的那个图标；

（11）当编辑状态时，点击我的工具的图标的红叉，将删除该图标（全部工具里的添加按钮恢复）；若该图标在快捷入口也存在时，快捷入口的该图标也被删除。

因此，这个Tool类也能满足以上功能；

更新模板和样式；

①要有四种状态的图标，依次为全部工具页面的大图标、普通图标，我的工具页面的普通图标、快捷入口图标；

②并且，要能创建这些图标，并且，由于之前没有设计全部工具页面的取消按钮、我的工具页面里的编辑按钮，因此要添上；

我的工具里图标的html模板：，编辑按钮默认为不显示：

 

快捷入口的按钮的html模板：

取消按钮添加后的大图标：

取消按钮添加后的html模板：

另附2个新增的CSS样式：

然后是样式修改：

显示大图标的：

把原来的addButton拆分成Button、add和cancel

 

另外一个类似

为了符合实际需求，我们需要做以下工作：

①重构Tool类（之前实在太简陋了）；

②需要一个函数，专用进行操作；

③需要一个runAfter函数，他的效果是，监听某个对象的某个方法，在该方法执行完后执行runAfter的回调函数；

④然后利用这个runAfter监听一些函数，并在该函数触发时做一些事情。

 

 

重构Tool类：

他分为以下几个部分：

①变量声明（私有变量）：

注意，以上四种图标，最多只会存在三种（所有工具的大图标和小图标只能存在一种状态）

 

 

②dom获取

根据实际需求，我们有时候需要获取dom，其中一个是私有的（只在tool类里调用），一个是公有的（会在外面调用），所以声明方式不同：

③创建图标

我们自然需要创建图标，四种图标都需要一个函数（因为他们的dom结构不同）；

注：

（1）以上四个创建图标，在全部工具里的两种还额外获取了编辑按钮；

（2）创建全部工具的图标时，顺便获取了响应函数

 

 

④响应逻辑：

图标创建了必然需要对她设置事件，

（1）比如全部工具里图标的点击事件：

（2）以上点击事件又分为两种，已添加时，触发正常的响应逻辑（在创建图标时作为参数传进来的回调函数）；

未添加时，用于添加到我的工具里的函数：

（3）这个添加事件又分为：

设置添加按钮为隐藏，设置添加状态为已添加；

没有dom的时候，创建dom并为其绑定事件，绑定的事件有：

【1】点击事件：

（但事实上这个已废弃，因为后面涉及到移动按钮的函数，被整合在那里了）

【2】编辑按钮点击事件：

（同样已废弃，因为后面涉及到移动按钮的函数，被整合在那里了）

 

【3】设置按钮的移动函数，包括以上两个被整合的事件：

解释：

以上这个函数干了以下事：

《1》只有鼠标左键按下才有效；

《2》编辑状态时，按编辑按钮是有效的；（因此我们需要一个设置编辑状态的函数）

《3》编辑状态时点击编辑按钮，会删除当前按钮，并用一个空白的按钮替代；

《4》这个dom移除，为了不移除他的事件，因此用的是jquery的detach()方法，并阻止该按钮事件的冒泡；

《5》非编辑状态时，可以移动按钮，原理是设置该按钮的定位为绝对定位，并用一个空白按钮放在该按钮的DOM后起到占位作用，并设置该按钮可移动；

《6》由于代码本身写的并不是很好，因此移动状态被取消时，计算移动距离，如果没有位移偏差，且非编辑状态，触发该按钮的点击事件；（如果要写的好的话，该按钮的移动状态设置，应该在移动位置有偏差之后才设置position为绝对定位）；

《7》移动时触发一个InMyToolDomMoving方法，这个要被runAfter方法所监视，返回值是空白dom和鼠标移动时触发的event事件。该事件会决定该按钮和其他按钮的互动；

《8》移动结束后，会触发一个InMyToolDomEndMoving方法，该方法同样被监视。并且设置移动结束后的鼠标弹起事件（同移动中的那个）。

《9》移动结束后，把图标放在占位图标之前（注意，该占位图标的位置可能移动），并解除移动状态，取消绝对定位，移除占位图标；

 

 

【4】然后是我的工具的大图标的移动中事件：

他会返回小图标，如果没有小图标则创建，并为他绑定事件。

绑定事件有：

《1》点击事件（整合进移动相关函数）；

《2》编辑按钮点击事件：

《3》移动事件；

由于和大图标的移动按钮事件类似，就不细说了

总之，他在移动的时候，会触发一个SmallToolDomMoving方法，runAfter会监视他。

 

【5】下来是两个按钮移动时触发的事件和移动结束后触发的事件：

⑤其他事件：

编辑状态的两个方法用于设置可编辑或者不可编辑；

另一个用于在删除按钮时调用；

 

 

——————————————————————————

 

重写ToolsConfigJsonLoad函数：

这个函数做了这些事情：

①读取json；

②把json转化为Tool类的数据来源；

③创建Tool类实例，并监听其事件；

④在创建图标的时候，添加分割线、或者创建占位图标等；

声明这个函数：

这个函数只有一个公有方法，那就是读取json：

读取json成功之后调用的函数：

监听事件先略过；

 

添加分割线：

为保证美观，添加占位图标：

下来事件监听函数的原型：

类似dojo的aspect.after方法

 

最后是利用runAfter函数进行事件监听，调用它时只需要传递Tool类的实例。

他包含以下方法：

①当图标添加进我的工具时，将实例添加到一个数组中：

②或者是删除我的工具里的按钮时，移除这个实例：

④监听图标移动时的方法，他涉及到我的工具页面里大图标的互动，和快捷入口小图标的互动：

 

——————————————————————

让工具箱运行起来：

以上代码，只涉及到工具箱页面各个图标的交互逻辑，但是并没有真正运行起来（例如，没有显式调用load()方法），并且也没有编辑图标的逻辑。

因此，我们需要一个函数补全剩下的部分：

这个函数干了两件事：

①声明一个ToolsConfigJsonLoad类的实例，并调用它的load方法（加载工具箱）；

②设置编辑按钮的事件。

 

这样的话，工具箱就可以正常跑起来了。

当然，还有一些小BUG，需要被修复，不过这并不影响整体功能的运转，作为一个DEMO来说，程度是足够了，如果真要跑生产环境，那么这些BUG必须被fix

js全部代码：

http://jianwangsan.cn/javascripts/toolboxes.js

css全部代码：

http://jianwangsan.cn/stylesheets/toolboxes.css