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）等。该部分可以以后继续添加公共代码，具体代码实现如下：

 1 $(function () {
 2     /// 创建委托函数
 3     ///      context：函数上下文
 4     ///      params：参数【必须是数组形式】,可以为空
 5     Function.prototype.delegate = function (context, params) {
 6         var func = this;
 7         return function () {
 8             if (params == null) {
 9                 return func.apply(context);
10             }
11             return func.apply(context, params);
12         };
13     };
14     $.extend({
15         coverObject: function (obj1, obj2) {
16             var o = this.cloneObject(obj1, false);
17             var name;
18             for (name in obj2) {
19                 if (obj2.hasOwnProperty(name)) {
20                     o[name] = obj2[name];
21                 }
22             }
23             return o;
24         },
25         cloneObject: function (obj, deep) {
26             if (obj === null) {
27                 return null;
28             }
29             var con = new obj.constructor();
30             var name;
31             for (name in obj) {
32                 if (!deep) {
33                     con[name] = obj[name];
34                 } else {
35                     if (typeof (obj[name]) == "object") {
36                         con[name] = $.cloneObject(obj[name], deep);
37                     } else {
38                         con[name] = obj[name];
39                     }
40                 }
41             }
42             return con;
43         },
44         ///说明：
45         ///      创建委托
46         delegate: function (func, context, params) {
47             if ($.isFunction(func)) {
48                 return func.delegate(context, params);
49             } else {
50                 return $.noop;
51             }
52         },
53         getParam: function (param) {
54             if (typeof (param) == "undefined") {
55                 return "";
56             } else {
57                 return param;
58             }
59         },
60         ///说明：
61         ///      判断元素是否存在某个属性
62         boolHasAttr: function (id, attr) {
63             if (typeof ($("#" + id).attr(attr)) != "undefined") {
64                 return false;
65             }
66             return true;
67         },
68         IsNull: function (str) {
69             if ($.trim(str) == "" || isNaN(str)) {
70                 return true;
71             }
72             return false;
73         }
74     });
75 });

公共js代码