JQuery学习笔记

在回北京的火车上，闲来无事，突然想起了前一段时间学习JQuery的时候的经历，就随手写下来。

其实我写JS写了很长的一段时间，大概后2年多吧，但是一直没有使用过JQuery，对它了解的也不多；在我学习它的时候其实对

JS已经有一定程度的了解了，不敢说很厉害吧，但是也是中等靠上的水平吧，这正是开始做开发的的2年积累下来的；

原来一直在使用Prototype.js做开发，Prototype.js比较侧重于再语法上向Java 靠拢，然后提供了大量的基础运算扩展与封装

，对UI这块的扩展一直都不是特别的好；

但是JQuery是侧重于（或者是完全的侧重于）UI操作的，而且在语法上比较少见的大量闭包，想要完全的使用到项目中，是需要

很熟悉JQuery的各种特性和API的，这对我来说其实还是有一定的挑战的；

下面我就说一说我的学习过程吧
首先，我找了一个自己用来学习的案例：简单的工作流可视化编辑器
如图一：
图一：


这个是我最开始做的一个编辑器，它被放置在一个普通的HTML页面中，没有特别复杂的内容，主要就是解析XML信息、计算节点

位置，以及样式的控制
这个让我对JS的XML解析，使用JQuery进行定位，和JQuery的动作接口有了一个比较初步的认知

为了能够进一步的深入了解JQquery的API和特点，我又花了一点时间对这个编辑器进行了重构，如图二
图二：


这次的主要工作其实是把编辑器的内容前一到了iframe中，因为我发现在浏览器中想要比较好的控制位置，只有放入到iframe中

才是最保险的，因为如果直接在外面普通的页面中构建样式存在着环境太复杂的问题，从而导致具体的实现的样式依赖于其它的

HTML、js、css代码，这个主要是因为现在很多的页面使用DIV+CSS的浮动布局，从而导致编辑器无法正确的在页面中布局；
这也是很多的WEB可视化文本编辑器使用的方式，比如:eWebEditor...
另外的一个改变是节点的样式，以及连线的加入（虽然比较简单）
还加入了一个当前节点的指针指示

在重构出了第二版的基础上，我又一次进行了重构，也就是图三
图三：


在这一版中，我主要加入了节点连线的课配置以及左（右）键的菜单实现，并把相关的添加节点，删除，修改节点功能加入到了

菜单中

其实在整个的学习过程中，可以发现，如果只是想要使用一个工具构建简单的作品是比较简单的（图一），而要构建比较复杂的

，具备一定可用性的功能是很复杂的，我最大的收获其实都是在后面的两次重构中得到的（图二、图三）

也就是说，只有在不断的重构中才能真正的深入以及了解一个工具的特点以及特性

本文转自www.35java.com