GRIDDATA（表格）第二版

JQUERY 插件开发——GRIDDATA（表格）第二版

开发背景

　　表格插件之前我也写个一篇，当时写那个插件的时候，我自己还没有总结出写插件的方法，虽然功能实现了，但是使用起来还是有点别扭的，并且需要在调用写添加特定名称的方法，这个地方着实违背了开发插件的易用性。所以，我今天决定重构之前的代码，按照现有的开发插件框架进行一次大修整。这也类似于软件开发过程中的代码重构阶段吧，把一些不合理的代码、思想、逻辑等及时修改掉。

　　其实代码重构在软件开发过程中特别重要。开发过程中，可能会由于开发时间的限制等因素，为了及时完成任务，不得已写一些没有经过斟酌的代码，我们不能对已经写的代码置之不理，要在闲下来的事件将这些代码重构下，这样使自己的代码冗余减少，质量也提高很多。并且逻辑会更加清晰等等好处。这里就不一一说了。太乱的代码，时间久了，可能连自己都不想看了，也许也是看不懂了。很多程序猿都没有重构代码的习惯，以完成任务为目的，同时也担心修改错了等，以各种理由说服自己不去QA自己的代码。在这里，我还是那句话，作为想成为“攻城狮”的“猿们”，请对自己负责，对自己的代码负责。我不是牛人，但是我有一颗必须成为牛人的心。和我一样，奋斗在“一线”的猿们，努力吧，自勉吧。

　　背景交代完毕，其实那个多也就汇成一句话，请不定时去QA自己代码。以下就是我对上次GridData代码的重构吧。当然，思想也改变了。

　　记得之前写了很多自定义属性，当然这次也有，但是，就不放在代码层次的最外层了，为了代码结构的整齐，就将其放在插件开发的里面了。这次我还是重头开始说起吧。说实话，本插件的参数很多都是仿照easy ui 中的GridData。为啥要仿照呢，其实我本人是不建议使用easy ui的，虽然功能强大，但是功能太死，二次开发时间成本比较高。因为他们开发团队将很多东西都分装的太死。其实也不能怪别人。人家辛辛苦苦开发的东西，当然不想被别人那个轻易就拿走喽。理解万岁！当然也不是完全不能二次开发，你得去理解人家的规范，那样就是可以了。之前我有对其中的Tree控件、TreeGrid控件等做了二次开发。目的当然是为了适应工作需要了。^_^

　　所以呢，很多大公司都会有自己的一套插件库的。这样便于维护、扩展。这个好处就不用我多说了，大家都懂的。好了，回归正题，不然又扯远了。

　　哦，对了，上一篇博文中漏了公共Js代码了，不好意思。。。。这边等会我将补上。

　　先说下本插件的功能吧：1、支持分页；2、支持多种皮肤选择；3、支持对列设置样式。4、其他正常的表格功能（不多说了）。

开发过程

　　本次开发过程中分五个部分：

　　第一部分：公共js和公共css样式部分；

　　第二部分：自定义特性（如：皮肤风格选择等）部分；

　　第三部分：具体定义及实现部分；

　　第四部分：对外开放部分；

　　第五部分：具体使用部分；

　　接下来我将对开发过程中的五个部分进行具体说明。

详细开发设计

　　第一部分：公共js和公共css样式开发，这里涉及克隆对象（cloneObject）、创建委托（delegate）、获取参数（getParam）、判断元素是否存在某个属性（boolHasAttr）、字符串是否为空（IsNull）等。该部分可以以后继续添加公共代码，具体代码实现如下：

 公共js代码

 公共css样式

　　第二部分：自定义特性部分，该部分可以根据以后需求进行扩展。现在本部分只有皮肤风格枚举（enumSkin）、表格头部数据参数枚举（enumTHeadDataParamsType），具体代码实现如下：

 自定义特性

　　第三部分：具体定义及实现部分。这部分是逻辑分装的主体，同时也是最难的部分。由于太多太多，所以只说一下思想。本次开发的插件使用 委托 和 事件句柄，思想开发。这样写的确实现了元素和事件间的解耦。当然这个也是模仿面向对象思想中的开发了。这个思想我在导航菜单中也有使用，并且这个思想也是我力推的思想。希望还不理解的猿们，好好学习一下，当你会了之后，你会感谢委托和事件句柄的，因为他让你的代码逻辑清晰了，代码也解耦了。。。自己去感受吧。我在代码中都加了注释，想必大家看也很好理解。但是逻辑还是有点复杂的，如果有想详细了解的可以联系我，在最下面我会将自己的联系QQ附上。^_^

 具体定义及实现

　  第四部分：对外开放部分。这部分代码很少也是老生常谈的代码了。定义对外开放，也就是一句话的事。代码如下：

 对外开放部分代码

　　第五部分：具体使用部分。下面分两块代码叙说，第一块就是html页面，第二块就是js使用代码。代码如下：

 页面html代码

 使用部分js代码

效果图

　　下面是我贴的几个效果图，本人审美不好，随意加的样式，没有搭配感，还请各位看官一笑而过，只要知道有啥作用就好。

　　效果图一（绚丽）：

　　效果图二（传统）：

总结

　　虽然写的不好，但是总结还是要的。本次开发属于重构之前代码开发。在此还是希望各位能注重重构，对自己代码负责。好的插件、好的代码也是重构出来的。哈哈，我是这么想的。不要嫌麻烦，也不要以为做的是无用功。

　　文章比较长，很多知识点我也没有写详细。如果有需要源码的或者想共同探讨的同仁，随时联系我，QQ:296319075 ，注明园友就好，同时也希望大家也能提出宝贵意见，不吝赐教。秉承共同探讨、共同进步！如有转载，请注明出处，谢谢！^_^

　　

　　

　　

 

分类: JQuery插件开发系列

标签: jQuery插件开发, 代码重构, 表格插件