前端的小玩意（9.4）——做一个仿360工具箱的web页面（自动生成所有图标，对图标添加响应逻辑）

DEMO网址：

http://jianwangsan.cn/toolbox

（四）制作JSON，自动将图标填充进所有工具

首先是JSON，因为工具很多，所以JSON内容很长。

具体而言，JSON是一个数组中的对象（只有这一个对象），他有两个属性：BigImg和CommonImg。

这两个属性都是数组类型；

BigImg里面，他用于存放最上面的三个大图标；

CommonImg里面，存放其他工具图标。

BigImg单个数组元素的结构如下：

[javascript]  view plain  copy

 

1. <span style="font-family:SimSun;">{  
2.   "title": "微信清理",  
3.   "description": "定期清理微信，节省手机空间",  
4.   "bigImg": {  
5.     "ImgPosition": {  
6.       "x": "0px",  
7.       "y": "0px"  
8.     }  
9.   },  
10.   "commonImg": {  
11.     "ImgPosition": {  
12.       "x": "-100px",  
13.       "y": "0px"  
14.     }  
15.   }  
16. },</span>  

前两个属性看值就知道了；

bingImg和commonImg属性中的ImgPosition中的两个属性，主要是描述这个图标在图片中的位置；

CommonImg结构类似：

[javascript]  view plain  copy

 

1. {  
2.   "title": "手游模拟器",  
3.   "description": "电脑玩手游，挂机辅助神器",  
4.   "type": "title",  
5.   "commonImg": {  
6.     "ImgPosition": {  
7.       "x": "-100px",  
8.       "y": "-100px"  
9.     }  
10.   }  
11. },  

只不过少了一个bigImg属性（因为他不需要）；

但多了一个type属性，用于描述其将放置于哪个分类下面。

下面上JSON的全部内容：（共计661行）

[javascript]  view plain  copy

 

1. [  
2.   {  
3.     "BigImg": [  
4.       {  
5.         "title": "微信清理",  
6.         "description": "定期清理微信，节省手机空间",  
7.         "bigImg": {  
8.           "ImgPosition": {  
9.             "x": "0px",  
10.             "y": "0px"  
11.           }  
12.         },  
13.         "commonImg": {  
14.           "ImgPosition": {  
15.             "x": "-100px",  
16.             "y": "0px"  
17.           }  
18.         }  
19.       },  
20.       {  
21.         "title": "雷电OS",  
22.         "description": "雷电OS Editor 旧机变新机",  
23.         "bigImg": {  
24.           "ImgPosition": {  
25.             "x": "-350px",  
26.             "y": "0px"  
27.           }  
28.         },  
29.         "commonImg": {  
30.           "ImgPosition": {  
31.             "x": "-600px",  
32.             "y": "-500px"  
33.           }  
34.         }  
35.       },  
36.       {  
37.         "title": "手机相册扩容",  
38.         "description": "无损处理图片，腾出50%空间",  
39.         "bigImg": {  
40.           "ImgPosition": {  
41.             "x": "-700px",  
42.             "y": "0px"  
43.           }  
44.         },  
45.         "commonImg": {  
46.           "ImgPosition": {  
47.             "x": "-700px",  
48.             "y": "-500px"  
49.           }  
50.         }  
51.       }  
52.     ],  
53.     "CommonImg": [  
54.       {  
55.         "title": "手游模拟器",  
56.         "description": "电脑玩手游，挂机辅助神器",  
57.         "type": "title",  
58.         "commonImg": {  
59.           "ImgPosition": {  
60.             "x": "-100px",  
61.             "y": "-100px"  
62.           }  
63.         }  
64.       },  
65.       {  
66.         "title": "360连回家",  
67.         "description": "随时随地，清理家中电脑",  
68.         "type": "title",  
69.         "commonImg": {  
70.           "ImgPosition": {  
71.             "x": "-200px",  
72.             "y": "-100px"  
73.           }  
74.         }  
75.       },  
76.       {  
77.         "title": "驱动大师",  
78.         "description": "驱动安装一键解决",  
79.         "type": "title",  
80.         "commonImg": {  
81.           "ImgPosition": {  
82.             "x": "-300px",  
83.             "y": "-100px"  
84.           }  
85.         }  
86.       },  
87.       {  
88.         "title": "安全桌面",  
89.         "description": "一键整理您的桌面",  
90.         "type": "safe",  
91.         "commonImg": {  
92.           "ImgPosition": {  
93.             "x": "-400px",  
94.             "y": "-100px"  
95.           }  
96.         }  
97.       },  
98.       {  
99.         "title": "隐私保镖",  
100.         "description": "五层隐私防护，清理隐私痕迹",  
101.         "type": "safe",  
102.         "commonImg": {  
103.           "ImgPosition": {  
104.             "x": "-500px",  
105.             "y": "-100px"  
106.           }  
107.         }  
108.       },  
109.       {  
110.         "title": "防黑加固",  
111.         "description": "修补可能会被黑客利用的",  
112.         "type": "safe",  
113.         "commonImg": {  
114.           "ImgPosition": {  
115.             "x": "-600px",  
116.             "y": "-100px"  
117.           }  
118.         }  
119.       },  
120.       {  
121.         "title": "软件管家",  
122.         "description": "安全下载，轻松管理您的软件",  
123.         "type": "safe",  
124.         "commonImg": {  
125.           "ImgPosition": {  
126.             "x": "-400px",  
127.             "y": "0px"  
128.           }  
129.         }  
130.       },  
131.       {  
132.         "title": "人工服务",  
133.         "description": "7*24小时为您解决电脑问题",  
134.         "type": "safe",  
135.         "commonImg": {  
136.           "ImgPosition": {  
137.             "x": "-500px",  
138.             "y": "0px"  
139.           }  
140.         }  
141.       },  
142.       {  
143.         "title": "手机助手",  
144.         "description": "免费手机应用，资源下载平台",  
145.         "type": "safe",  
146.         "commonImg": {  
147.           "ImgPosition": {  
148.             "x": "-700px",  
149.             "y": "-100px"  
150.           }  
151.         }  
152.       },  
153.       {  
154.         "title": "弹窗拦截",  
155.         "description": "拦弹窗，去广告，就是给力",  
156.         "type": "safe",  
157.         "commonImg": {  
158.           "ImgPosition": {  
159.             "x": "-800px",  
160.             "y": "-100px"  
161.           }  
162.         }  
163.       },  
164.       {  
165.         "title": "隔离沙箱",  
166.         "description": "隔离系统真实环境运行软件",  
167.         "type": "safe",  
168.         "commonImg": {  
169.           "ImgPosition": {  
170.             "x": "-900px",  
171.             "y": "-100px"  
172.           }  
173.         }  
174.       },  
175.       {  
176.         "title": "软件小助手",  
177.         "description": "快速启动您常用软件",  
178.         "type": "safe",  
179.         "commonImg": {  
180.           "ImgPosition": {  
181.             "x": "0px",  
182.             "y": "-200px"  
183.           }  
184.         }  
185.       },  
186.       {  
187.         "title": "主页防护",  
188.         "description": "防止恶意程序篡改浏览器主页",  
189.         "type": "safe",  
190.         "commonImg": {  
191.           "ImgPosition": {  
192.             "x": "-100px",  
193.             "y": "-200px"  
194.           }  
195.         }  
196.       },  
197.       {  
198.         "title": "主页修复",  
199.         "description": "一键解决浏览器主页相关问题",  
200.         "type": "safe",  
201.         "commonImg": {  
202.           "ImgPosition": {  
203.             "x": "-200px",  
204.             "y": "-200px"  
205.           }  
206.         }  
207.       },  
208.       {  
209.         "title": "文件解密",  
210.         "description": "免费还原被木马加密的文件",  
211.         "type": "safe",  
212.         "commonImg": {  
213.           "ImgPosition": {  
214.             "x": "-300px",  
215.             "y": "-200px"  
216.           }  
217.         }  
218.       },  
219.       {  
220.         "title": "网络优化",  
221.         "description": "全新家庭网络管理，秒踢蹭网",  
222.         "type": "network",  
223.         "commonImg": {  
224.           "ImgPosition": {  
225.             "x": "-400px",  
226.             "y": "-200px"  
227.           }  
228.         }  
229.       },  
230.       {  
231.         "title": "断网急救箱",  
232.         "description": "上不了网？就用断网急救箱",  
233.         "type": "network",  
234.         "commonImg": {  
235.           "ImgPosition": {  
236.             "x": "-600px",  
237.             "y": "0px"  
238.           }  
239.         }  
240.       },  
241.       {  
242.         "title": "免费WiFi",  
243.         "description": "电脑变热点，免费无线上网",  
244.         "type": "network",  
245.         "commonImg": {  
246.           "ImgPosition": {  
247.             "x": "-700px",  
248.             "y": "0px"  
249.           }  
250.         }  
251.       },  
252.       {  
253.         "title": "宽带测速器",  
254.         "description": "获取网络带宽和上网速度数值",  
255.         "type": "network",  
256.         "commonImg": {  
257.           "ImgPosition": {  
258.             "x": "-800px",  
259.             "y": "0px"  
260.           }  
261.         }  
262.       },  
263.       {  
264.         "title": "WiFi体检",  
265.         "description": "检测并修复路由器安全隐患",  
266.         "type": "network",  
267.         "commonImg": {  
268.           "ImgPosition": {  
269.             "x": "-500px",  
270.             "y": "-200px"  
271.           }  
272.         }  
273.       },  
274.       {  
275.         "title": "流量防火墙",  
276.         "description": "发现并阻止偷偷占流量的程序",  
277.         "type": "network",  
278.         "commonImg": {  
279.           "ImgPosition": {  
280.             "x": "0px",  
281.             "y": "-100px"  
282.           }  
283.         }  
284.       },  
285.       {  
286.         "title": "LSP修复",  
287.         "description": "修复网络异常和不能上网",  
288.         "type": "network",  
289.         "commonImg": {  
290.           "ImgPosition": {  
291.             "x": "-600px",  
292.             "y": "-200px"  
293.           }  
294.         }  
295.       },  
296.       {  
297.         "title": "DNS优选",  
298.         "description": "杜绝网络差，启用更优DNS",  
299.         "type": "network",  
300.         "commonImg": {  
301.           "ImgPosition": {  
302.             "x": "-700px",  
303.             "y": "-200px"  
304.           }  
305.         }  
306.       },  
307.       {  
308.         "title": "寝室必备",  
309.         "description": "看看哪个室友在占网速",  
310.         "type": "network",  
311.         "commonImg": {  
312.           "ImgPosition": {  
313.             "x": "-800px",  
314.             "y": "-200px"  
315.           }  
316.         }  
317.       },  
318.       {  
319.         "title": "360壁纸",  
320.         "description": "海量高清壁纸，美化电脑桌面",  
321.         "type": "system",  
322.         "commonImg": {  
323.           "ImgPosition": {  
324.             "x": "-900px",  
325.             "y": "-200px"  
326.           }  
327.         }  
328.       },  
329.       {  
330.         "title": "急救盘",  
331.         "description": "一盘在手，系统无忧",  
332.         "type": "system",  
333.         "commonImg": {  
334.           "ImgPosition": {  
335.             "x": "0px",  
336.             "y": "-300px"  
337.           }  
338.         }  
339.       },  
340.       {  
341.         "title": "任务管理器",  
342.         "description": "找出当前占用资源的程序",  
343.         "type": "system",  
344.         "commonImg": {  
345.           "ImgPosition": {  
346.             "x": "-300px",  
347.             "y": "0px"  
348.           }  
349.         }  
350.       },  
351.       {  
352.         "title": "鲁大师",  
353.         "description": "辨别硬件真伪，实时监测温度",  
354.         "type": "system",  
355.         "commonImg": {  
356.           "ImgPosition": {  
357.             "x": "-100px",  
358.             "y": "-300px"  
359.           }  
360.         }  
361.       },  
362.       {  
363.         "title": "默认软件",  
364.         "description": "帮您设置常用的默认软件",  
365.         "type": "system",  
366.         "commonImg": {  
367.           "ImgPosition": {  
368.             "x": "-200px",  
369.             "y": "-300px"  
370.           }  
371.         }  
372.       },  
373.       {  
374.         "title": "查找大文件",  
375.         "description": "找出占用磁盘空间的大文件",  
376.         "type": "system",  
377.         "commonImg": {  
378.           "ImgPosition": {  
379.             "x": "-300px",  
380.             "y": "-300px"  
381.           }  
382.         }  
383.       },  
384.       {  
385.         "title": "注册表瘦身",  
386.         "description": "清理无效、错误的注册表键值",  
387.         "type": "system",  
388.         "commonImg": {  
389.           "ImgPosition": {  
390.             "x": "-400px",  
391.             "y": "-300px"  
392.           }  
393.         }  
394.       },  
395.       {  
396.         "title": "系统盘瘦身",  
397.         "description": "通过瘦身解决系统盘空间不足",  
398.         "type": "system",  
399.         "commonImg": {  
400.           "ImgPosition": {  
401.             "x": "-500px",  
402.             "y": "-300px"  
403.           }  
404.         }  
405.       },  
406.       {  
407.         "title": "文件恢复",  
408.         "description": "快速帮您恢复被误删的文件",  
409.         "type": "system",  
410.         "commonImg": {  
411.           "ImgPosition": {  
412.             "x": "-600px",  
413.             "y": "-300px"  
414.           }  
415.         }  
416.       },  
417.       {  
418.         "title": "系统急救箱",  
419.         "description": "查杀顽固木马，修复系统异常",  
420.         "type": "system",  
421.         "commonImg": {  
422.           "ImgPosition": {  
423.             "x": "-600px",  
424.             "y": "0px"  
425.           }  
426.         }  
427.       },  
428.       {  
429.         "title": "磁盘擦除",  
430.         "description": "彻底清除磁盘数据，保护隐私",  
431.         "type": "system",  
432.         "commonImg": {  
433.           "ImgPosition": {  
434.             "x": "-700px",  
435.             "y": "-300px"  
436.           }  
437.         }  
438.       },  
439.       {  
440.         "title": "一键装机",  
441.         "description": "装机必备软件一键搞定",  
442.         "type": "system",  
443.         "commonImg": {  
444.           "ImgPosition": {  
445.             "x": "-800px",  
446.             "y": "-300px"  
447.           }  
448.         }  
449.       },  
450.       {  
451.         "title": "右键管理",  
452.         "description": "管理鼠标的右键菜单",  
453.         "type": "system",  
454.         "commonImg": {  
455.           "ImgPosition": {  
456.             "x": "-900px",  
457.             "y": "-300px"  
458.           }  
459.         }  
460.       },  
461.       {  
462.         "title": "系统重装",  
463.         "description": "无需光盘，恢复系统初始状态",  
464.         "type": "system",  
465.         "commonImg": {  
466.           "ImgPosition": {  
467.             "x": "0px",  
468.             "y": "-400px"  
469.           }  
470.         }  
471.       },  
472.       {  
473.         "title": "网游加速器",  
474.         "description": "解决游戏卡机掉线，永久免费",  
475.         "type": "game",  
476.         "commonImg": {  
477.           "ImgPosition": {  
478.             "x": "-100px",  
479.             "y": "-400px"  
480.           }  
481.         }  
482.       },  
483.       {  
484.         "title": "游戏大厅",  
485.         "description": "小号多开不串号，键鼠回放爽",  
486.         "type": "game",  
487.         "commonImg": {  
488.           "ImgPosition": {  
489.             "x": "-200px",  
490.             "y": "-400px"  
491.           }  
492.         }  
493.       },  
494.       {  
495.         "title": "游戏保险箱",  
496.         "description": "保护游戏网银账号安全",  
497.         "type": "game",  
498.         "commonImg": {  
499.           "ImgPosition": {  
500.             "x": "-300px",  
501.             "y": "-400px"  
502.           }  
503.         }  
504.       },  
505.       {  
506.         "title": "游戏优化器",  
507.         "description": "一键解决玩游戏卡、慢问题",  
508.         "type": "game",  
509.         "commonImg": {  
510.           "ImgPosition": {  
511.             "x": "-400px",  
512.             "y": "-400px"  
513.           }  
514.         }  
515.       },  
516.       {  
517.         "title": "360理财",  
518.         "description": "360互联网金融服务平台",  
519.         "type": "smalltools",  
520.         "commonImg": {  
521.           "ImgPosition": {  
522.             "x": "-500px",  
523.             "y": "-400px"  
524.           }  
525.         }  
526.       },  
527.       {  
528.         "title": "360看图",  
529.         "description": "防范图片木马，安全查看照片",  
530.         "type": "smalltools",  
531.         "commonImg": {  
532.           "ImgPosition": {  
533.             "x": "-600px",  
534.             "y": "-400px"  
535.           }  
536.         }  
537.       },  
538.       {  
539.         "title": "魔法摄像头",  
540.         "description": "让视频聊天既安全又有趣",  
541.         "type": "smalltools",  
542.         "commonImg": {  
543.           "ImgPosition": {  
544.             "x": "-700px",  
545.             "y": "-400px"  
546.           }  
547.         }  
548.       },  
549.       {  
550.         "title": "360云盘",  
551.         "description": "安全免费，超大空间的云盘",  
552.         "type": "smalltools",  
553.         "commonImg": {  
554.           "ImgPosition": {  
555.             "x": "-200px",  
556.             "y": "0px"  
557.           }  
558.         }  
559.       },  
560.       {  
561.         "title": "C盘搬家",  
562.         "description": "转移系统盘重要资料和文件",  
563.         "type": "smalltools",  
564.         "commonImg": {  
565.           "ImgPosition": {  
566.             "x": "-800px",  
567.             "y": "-400px"  
568.           }  
569.         }  
570.       },  
571.       {  
572.         "title": "360问答",  
573.         "description": "提出你的问题，分分钟有答案",  
574.         "type": "smalltools",  
575.         "commonImg": {  
576.           "ImgPosition": {  
577.             "x": "-900px",  
578.             "y": "-400px"  
579.           }  
580.         }  
581.       },  
582.       {  
583.         "title": "苹果设备清理",  
584.         "description": "清理App垃圾，节省手机空间",  
585.         "type": "smalltools",  
586.         "commonImg": {  
587.           "ImgPosition": {  
588.             "x": "0px",  
589.             "y": "-500px"  
590.           }  
591.         }  
592.       },  
593.       {  
594.         "title": "360压缩",  
595.         "description": "新一代的压缩软件，永久免费",  
596.         "type": "smalltools",  
597.         "commonImg": {  
598.           "ImgPosition": {  
599.             "x": "-100px",  
600.             "y": "-500px"  
601.           }  
602.         }  
603.       },  
604.       {  
605.         "title": "健康精灵",  
606.         "description": "可爱精灵，助您健康使用电脑",  
607.         "type": "smalltools",  
608.         "commonImg": {  
609.           "ImgPosition": {  
610.             "x": "-200px",  
611.             "y": "-500px"  
612.           }  
613.         }  
614.       },  
615.       {  
616.         "title": "小清新日历",  
617.         "description": "查询天气、农历和节假日",  
618.         "type": "smalltools",  
619.         "commonImg": {  
620.           "ImgPosition": {  
621.             "x": "0px",  
622.             "y": "0px"  
623.           }  
624.         }  
625.       },  
626.       {  
627.         "title": "安全浏览器",  
628.         "description": "恶意网站拦截，下载保护",  
629.         "type": "smalltools",  
630.         "commonImg": {  
631.           "ImgPosition": {  
632.             "x": "-300px",  
633.             "y": "-500px"  
634.           }  
635.         }  
636.       },  
637.       {  
638.         "title": "文件粉碎机",  
639.         "description": "彻底粉碎无法删除的文件",  
640.         "type": "smalltools",  
641.         "commonImg": {  
642.           "ImgPosition": {  
643.             "x": "-400px",  
644.             "y": "-500px"  
645.           }  
646.         }  
647.       },  
648.       {  
649.         "title": "U盘鉴定器",  
650.         "description": "鉴定U盘真实容量",  
651.         "type": "smalltools",  
652.         "commonImg": {  
653.           "ImgPosition": {  
654.             "x": "-500px",  
655.             "y": "-500px"  
656.           }  
657.         }  
658.       }  
659.     ]  
660.   }  
661. ]  

为了适应type，接下来我们需要改造html模板：

将div.toolbox-all的dom结构改装成如下：

[javascript]  view plain  copy

 

1. div.toolbox-all  
2.     //这个是最上面的大图标那一行  
3.     div.firstRow  
4.         //以下是单个按钮  
5.     //横线那一行，如果是多行app，应考虑使用另外一个  
6.     div.dotted  
7.     div.commonRow.title  
8.     div.titleRow  
9.         span.titleRow-left  
10.         span.titleRow-text  电脑安全  
11.     div.commonRow.safe  
12.     div.titleRow  
13.         span.titleRow-left  
14.         span.titleRow-text  网络优化  
15.     div.commonRow.network  
16.     div.titleRow  
17.         span.titleRow-left  
18.         span.titleRow-text  系统工具  
19.     div.commonRow.system  
20.     div.titleRow  
21.         span.titleRow-left  
22.         span.titleRow-text  游戏优化  
23.     div.commonRow.game  
24.     div.titleRow  
25.         span.titleRow-left  
26.         span.titleRow-text  实用小工具  
27.     div.commonRow.smalltools  

这样通过type来定位该图标被添加的dom位置即可。

顺便，以上订正了一个之前把commonRow打成commanRow的问题。记得修改样式表（尴尬）

再顺便订正三个样式需要被调整的地方：

[css]  view plain  copy

 

1. .back .contentbox .commonRow .normalTool .text .title {  
2.     line-height: 25px;  
3.     font-size: 16px;  
4. }  
5.   
6. .back .contentbox .commonRow .normalTool .text .description {  
7.     line-height: 30px;  
8.     font-size: 12px;  
9.     color: #aaa;  
10. }  
11.   
12. .back .contentbox .commonRow .normalTool .addButton {  
13.     display: none;  
14.     position: absolute;  
15.     top: 7px;  
16.     right: 15px;  
17.     width: 60px;  
18.     height: 22px;  
19.     background-image: linear-gradient(rgb(98, 227, 25) 0%, rgb(68, 208, 27) 100%);  
20.     font-size: 12px;  
21.     color: white;  
22.     text-align: center;  
23.     line-height: 20px;  
24.     border: 1px solid rgb(65, 199, 36);  
25.     -webkit-border-radius: 1px;  
26.     -moz-border-radius: 1px;  
27.     border-radius: 1px;  
28. }  

下来呢，我们需要读取JSON，然后将其添加入页面之中；

首先，创建一个Tool类，他表示一个图标；

[javascript]  view plain  copy

 

1. //单个工具  
2. var Tool = function (obj) {  
3.     this.obj = obj;  
4.   
5.     // 0表示未加载到我的工具，1表示加载到我的工具，2表示加载到我的工具的右下小窗处  
6.     // 为了方便测试，这里先默认设置为1  
7.     this.state = 1;  
8.   
9.     //用于在全部工具页面  
10.     this.createBigImgDom = function (callback) {  
11.         var self = this;  
12.         var obj = this.obj  
13.         var str = '<div class="BigTool">' +  
14.             '<span class="img" style="background-position: ' + obj.bigImg.ImgPosition.x + ' ' + obj.bigImg.ImgPosition.y + '"></span>' +  
15.             '<span class="mask"></span>' +  
16.             '<div class="text">' +  
17.             '<div class="title">' + obj.title + '</div>' +  
18.             '<div class="description">' + obj.description + '</div>' +  
19.             '</div>' +  
20.             '<div class="addButton">添加</div>' +  
21.             '</div>';  
22.         var node = $(str);  
23.         node.click(function () {  
24.             if (self.state) {  
25.                 callback();  
26.             }  
27.         })  
28.         return node;  
29.     };  
30.     this.createNormalTool = function (callback) {  
31.         var self = this;  
32.         var obj = this.obj  
33.         var str = '<div class="normalTool">' +  
34.             '<div class="img" style="background-position: ' + obj.commonImg.ImgPosition.x + ' ' + obj.commonImg.ImgPosition.y + '"></div>' +  
35.             '<div class="text">' +  
36.             '<div class="title">' + obj.title + '</div>' +  
37.             '<div class="description">' + obj.description + '</div>' +  
38.             '</div>' +  
39.             '<div class="addButton">添加</div>' +  
40.             '</div>';  
41.         var node = $(str);  
42.         node.click(function () {  
43.             if (self.state) {  
44.                 callback();  
45.             }  
46.         })  
47.         return node;  
48.     };  
49.     this.createSmallTool = function (callback) {  
50.         var obj = this.obj  
51.         var position_x = parseInt(obj.commonImg.ImgPosition.x) * 0.615 + "px";  
52.         var position_y = parseInt(obj.commonImg.ImgPosition.y) * 0.615 + "px";  
53.         var str = '<div class="tool-foot">' +  
54.             '<div class="img"  style="background-position: ' + position_x + ' ' + position_y + '"></div>' +  
55.             '<div class="text"></div>' +  
56.             '</div>';  
57.         var node = $(str);  
58.         node.click(function () {  
59.             if (self.state) {  
60.                 callback();  
61.             }  
62.         })  
63.         return node;  
64.     };  
65. }  

他有三个方法，两个属性；

①obj属性是在创建的时候赋值给他的，方便读取创建实例时的初始值。这个初始值就是上面那个JSON中的一个元素（BigImg或CommonImg中的一个元素）；

②state属性表示该按钮状态，具体看注释

三个方法的作用依次为：

①返回一个用于所有工具最顶端的大图标的dom；

②返回一个用于放置在所有工具、我的工具普通位置的dom；

③返回一个用于放在我的工具右下角小位置的dom；

④他们都有一个点击事件，会判断当前状态来进行。为了方便测试，我这里并没有针对性的设置。在之后会进行修改。

我们还缺一些其他的方法，例如将移动用的函数，点击后触发事件的函数等等；

还缺一些属性，例如，设置其目前是否可以移动，目前处于什么位置的东西等等；

等等我们再补全这个Tool类。

然后，我们需要创建一个加载JSON，处理数据的类。

在创建这个类之前，我们建立一个data文件夹，和img、javascripts、stylesheets文件夹平级；

将JSON命名为tools.json，并放于data文件夹中；

下面是处理这个JSON的JS代码类：

[javascript]  view plain  copy

 

1. var ToolsConfigJsonLoad = function (url) {  
2.     this.url = url ? url : "data/tools.json";  
3.     this.load = function () {  
4.         var self = this;  
5.         $.ajax({  
6.             url: self.url,  
7.             dataType: "json",  
8.             type: "GET",  
9.             success: function (data) {  
10.                 self.addToolsInToolbox_all(data);  
11.   
12.             }  
13.         })  
14.     };  
15.   
16.     //将内容添加到全部工具页面中  
17.     this.addToolsInToolbox_all = function (data) {  
18.         var type = [];  
19.         data[0].BigImg.forEach(function (obj) {  
20.             var tool = new Tool(obj);  
21.             var mixin = new MixinTool(tool);  
22.             var callback = mixin.mixin()  
23.             $(".firstRow").append(tool.createBigImgDom(callback));  
24.         })  
25.         data[0].CommonImg.forEach(function (obj) {  
26.             if (type.indexOf(obj.type) < 0) {  
27.                 type.push(obj.type);  
28.             }  
29.             var tool = new Tool(obj);  
30.             var mixin = new MixinTool(tool);  
31.             var callback = mixin.mixin()  
32.   
33.             $(".commonRow." + obj.type).append(tool.createNormalTool(callback));  
34.         })  
35.           
36.         this.addPlaceHolderWhenOnlyTwoToolsInToolbox_All(type);  
37.         this.addDottedLineInToolbox_All();  
38.   
39.     };  
40.     // 这个目的是当某一行只有两个图标时，创造一个占位的图标  
41.     this.addPlaceHolderWhenOnlyTwoToolsInToolbox_All = function (type) {  
42.         type.forEach(function (obj) {  
43.             var length = $(".commonRow." + obj + " > *").length;  
44.             if (length % 3 == 2) {  
45.                 $(".commonRow." + obj).append($('<div class="normalToolHolder"></div>'));  
46.             }  
47.         })  
48.     };  
49.   
50.     // 这个目的是为了给全部工具中的多行工具之间添加分割线  
51.     this.addDottedLineInToolbox_All = function () {  
52.         $(".commonRow .normalTool:nth-child(3n+4)").before('<div class="dotted"></div>');  
53.     }  
54. }  

这部分代码最重要的是load函数；

①他会发起一个ajax请求，来读取这个json；

②ajax请求可以使用用户自己给的url（如果有的话），或者默认url；

③在请求成功后，会对数据进行处理，简单来说，分别遍历BigImg这个属性的每个元素以及CommonImg这个属性的每个元素；

④利用这些元素的数据，生成一个Tool实例，然后又对她做了一些其他事情（具体之后再说），然后生成一个dom对象，插入到指定位置。

在生成工具的时候，显然每个工具的用途是不同的，因此我们希望这个工具在点击的时候，执行不同的处理方法，具体做法有以下几种。

①生成Tool实例的时候，手动给起赋予一个处理函数（缺点：生成代码虎非常长，而且堆积在一起会很乱）；

②将处理函数放在Tool类里，然后生成dom的时候，点击事件触发Tool了的不同方法（缺点：Tool类会非常长，并且可以通过Tool类的实例来调用本来不希望他调用的方法）；

③将所有的处理方法集中在一个类之中，我们需要编辑的时候只需要编辑这个类即可，然后将对应的方法，作为回调函数传递给这个dom的创建函数，在创建函数里，调用这个回调函数（我的选择）。

我这里选择的是第三种方法，因此需要生成一个MixinTool类，他具备将对应的方法返回给对应的Tool类实例的功能。

为了区别不同按钮，我在JSON里每个元素里新加了一个属性ID，具体修改后内容如下；

[javascript]  view plain  copy

 

1. {  
2.   "title": "微信清理",  
3.   "ID":"No0",  
4.   "description": "定期清理微信，节省手机空间",  
5.   "bigImg": {  
6.     "ImgPosition": {  
7.       "x": "0px",  
8.       "y": "0px"  
9.     }  
10.   },  
11.   "commonImg": {  
12.     "ImgPosition": {  
13.       "x": "-100px",  
14.       "y": "0px"  
15.     }  
16.   }  
17. },  

这里的ID的值，就是利用该元素生成Tool实例时，我们写在MixinTool类里，该元素预期拿取的点击事件处理函数。

MixinTool类的代码如下：

[javascript]  view plain  copy

 

1. var MixinTool = function (tool) {  
2.     this.mixin = function () {  
3.         var self = this;  
4.         if ("ID" in tool.obj & tool.obj.ID in this) {  
5.             //console.log(self[tool.obj.ID])  
6.             return self[tool.obj.ID];  
7.         } else {  
8.             return self.default;  
9.         }  
10.     };  
11.   
12.     this.default = function () {  
13.         console.log("No thing will happen");  
14.     }  
15.   
16.     this.No0 = function () {  
17.         console.log("No 0 you click it");  
18.     };  
19.   
20.     this.No1 = function () {  
21.         console.log("No 1 you click it");  
22.     };  
23.   
24.     this.No2 = function () {  
25.         console.log("No 2 you click it");  
26.     };  
27.   
28.     this.No3 = function () {  
29.         console.log("No 3 you click it");  
30.     };  
31.   
32.     this.No4 = function () {  
33.         console.log("No 4 you click it");  
34.     };  
35.   
36.     this.No5 = function () {  
37.         console.log("No 5 you click it");  
38.     };  
39. }  

他有一些方法，假如某个Tool实例没有对应的方法，他会执行default这个函数作为点击的响应事件；否则执行对应的。

mixin函数需要显示调用，作为Tool类创建dom结点时的参数使用。

具体如何使用参照上面的例子。

由于我们已经抽象出来多个类了，因此不如将之前页面切换的逻辑也抽象成一个类，具体代码如下：

[javascript]  view plain  copy

 

1. //注意，这些其实都是全局变量  
2. var Tab = function () {  
3.     //以下代码大量考虑到扩展性，例如，可以新增一个tab和content页面  
4.     this.tabClick = function () {  
5.         $(".tool").click(function () {  
6.             //这里是上面的图标的逻辑变换  
7.             if (!($(this.children[0]).hasClass("select"))) {  
8.                 $(".select").removeClass("select");  
9.                 $(this.children[0]).addClass("select");  
10.   
11.                 //这里是hover的横线的位置变化  
12.                 var node = $(".tool .hover");  
13.                 node.remove();  
14.                 //当动画需要停止的时候，让他停止  
15.                 if ('stop' in node) {  
16.                     node.stop();  
17.                 }  
18.                 node.css("left", "0px");  
19.                 $(this).append(node);  
20.   
21.                 //以下应该是切换页面的逻辑  
22.                 //获取切换到哪一个页面，  
23.                 var index = null;  
24.                 for (var i = 0; i < this.parentNode.children.length; i++) {  
25.                     if (this == this.parentNode.children[i]) {  
26.                         index = i;  
27.                     }  
28.                 }  
29.                 $(".contentbox > div").addClass("displayNONE");  
30.                 $(".contentbox > div:nth-child(" + (index + 1) + ")").removeClass("displayNONE");  
31.   
32.             }  
33.         })  
34.     };  
35.   
36.     this.tabMouseEnter = function () {  
37.         $(".tool").mouseenter(function (evt) {  
38.             //只有当鼠标移动到非当前选中的tab上时，才会移动  
39.             if (!($(this.children[0]).hasClass("select"))) {  
40.   
41.                 var self = this;  
42.                 var node = $(".tool .hover");  
43.                 var start = null;  
44.                 var end = null;  
45.   
46.                 var tools = $(".toolTab")[0].children  
47.                 for (var i = 0; i < tools.length; i++) {  
48.                     if (self == tools[i]) {  
49.                         end = i;  
50.                     } else if ($(".select")[0].parentNode == tools[i]) {  
51.                         start = i;  
52.                     }  
53.                 }  
54.   
55.                 //停止之前的动画  
56.                 if ('stop' in node) {  
57.                     node.stop();  
58.                 }  
59.                 //现在开始动画效果  
60.                 node.animate({"left": (end - start) * 160 + "px"})  
61.             }  
62.         })  
63.     };  
64.     this.tabMouseLeave = function () {  
65.         $(".tool").mouseleave(function () {  
66.             //只有当鼠标移动到非当前选中的tab上时，才会移动  
67.             if (!($(this.children[0]).hasClass("select"))) {  
68.                 var node = $(".tool .hover");  
69.                 //停止之前的动画  
70.                 if ('stop' in node) {  
71.                     node.stop();  
72.                 }  
73.                 node.animate({"left": "0px"})  
74.             }  
75.         })  
76.     }  
77. }  

而调用到目前为止的类和函数，十分简单，如代码：

[javascript]  view plain  copy

 

1. $(document).ready(function () {  
2.     //这里是点击切换显示页面  
3.     var toolboxTab = new Tab();  
4.     toolboxTab.tabClick();  
5.     toolboxTab.tabMouseEnter();  
6.     toolboxTab.tabMouseLeave();  
7.   
8.     var jsonLoad = new ToolsConfigJsonLoad();  
9.     jsonLoad.load();  
10. })  

目前进度：

①自动生成所有工具里的所有工具；

②给工具添加点击响应事件；

目前还欠缺的内容：

①将所有工具里的工具，添加进我的工具；

②我的工具页面的各种逻辑；

③视情况，让工具可以被添加、或不能被添加（添加按钮在已添加后禁止显示）。