jQuery EasyUI源码结构分析

淡淡的烟草味﹌ 2022-02-19 17:57 643阅读 0赞

## memo ##

*  两个`jQuery`的静态成员(插件)  
    `$.messager`  
    `$.parser`  
    其调用方法的格式：`$.pluginName.methodName(...)`。  
    而原型成员`$.fn.xxx`调用方法的格式为：`${selector}.pluginName(methodName, ?args)`。

## intro ##

*  50个自调用函数  
    `EasyUI for jQuery 1.7.6`  
    EasyUI源码中共有50个自调用函数，格式皆为：

(function($) {
      // ...
    })(jQuery);

其中：

> 第1个自调用函数：用于定义jQuery的静态成员 . x x x 和 原 型 成 员 .xxx和原型成员 .xxx和原型成员.fn.xxx。  
> 第2个自调用函数：事件监听器eventListener相关。  
> 第3~50个(共48个)，每个自调用函数中，定义一种plugins的细节。

但是`$.parser.plugins`数组中只定义了47种插件名称，  
经过集合运算，过滤出自调用函数中多出来的一种插件是`messager`。  
区别：  
`$.messager` 静态成员(插件)  
`$.fn.plugins` 原型属性(插件)  
![求差集][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_20_color_000000_t_70]

*  第1个自调用函数

*  第2个自调用函数  
    事件监听器`eventListener`相关。
 *  其余48个用于定义插件细节的自调用函数  
    插件名：`xxx`，每个插件的自调用函数中都有的部分是：  
    `$.fn.xxx = function() {...};`  
    `$.fn.xxx.methods = {};`  
    `$.fn.xxx.parseOptions = function() {...};`  
    `$.fn.xxx.defaults = {};`

其中：

*  `$.fn.xxx.methods` 中定义了插件的方法`methods`。
 *  `$.fn.xxx.defaults` 中定义了插件的属性`Properties`和事件`Events`。  
    插件的方法，属性和事件皆可扩展：`jQuery.extend(target, ...sources)`。  
    将`$.fn.pluginName.methods`对象作为`target`，对齐进行扩展。  
    且新方法至少有一个参数，第一个参数为`jquery`对象(主要是为了链式调用)。

$.extend($.fn.dialog.methods, {
        mymove: function(jq, newposition){
    		return jq.each(function(){
    			$(this).dialog('move', newposition);
    		});
        }
    });

*  插件使用
    
     *  修改插件属性|事件`$(selector).plugiinName({propertyList});`
     *  调用插件方法 `$(selector).pluginName("funcName", parameter)`

## 源码结构 ##

## 48种`$.fn.parser.plugins` ##

细节会后续补充。

*  `draggable`
 *  `droppable`
 *  `resizable`
 *  `linkbutton`
 *  `pagination`
 *  `tree`
 *  `progressbar`
 *  `tooltip`
 *  `panel`
 *  `window`
 *  `dialog`
 *  `messager`
 *  `accordion`
 *  `tabs`
 *  `layout`
 *  `menu`
 *  `sidemenu`
 *  `menubutton`
 *  `splitbutton`
 *  `switchbutton`
 *  `radiobutton`
 *  `checkbox`
 *  `validatebox`
 *  `textbox`
 *  `passwordbox`
 *  `maskedbox`
 *  `filebox`
 *  `searchbox`
 *  `form`
 *  `numberbox`
 *  `calendar`
 *  `spinner`
 *  `numberspinner`
 *  `timespinner`
 *  `datetimespinner`
 *  `datagrid`
 *  `propertygrid`
 *  `treegrid`
 *  `datalist`
 *  `combo`
 *  `combobox`
 *  `combotree`
 *  `combogrid`
 *  `combotreegrid`
 *  `tagbox`
 *  `datebox`
 *  `datetimebox`
 *  `slider`

## jQuery EasyUI 文档 ##

[zh][]  
[en][]

## 部分自调用函数源码 ##

最典型的自调用函数：

> 第一个(用于向jQuery对象添加静态成员`$.xxx`和原型成员`$.fn.xxx`)  
> 第二个(`eventListener`相关)  
> 其余48种插件源码中的`pagination`。

*  第一个

*  第二个

*  `pagination`插件

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_20_color_000000_t_70]: /images/20220219/765df00e8930477cbc8a36c5716acd2d.png
[zh]: http://www.jeasyui.net/plugins/
[en]: http://www.jeasyui.com/documentation/index.php