easyui组件解析的实现思路

1. 每一个easyui组件都有一个以其组件名称命名的函数例如：linkbutton：

这个函数的功能有三部分：

$.fn.linkbutton = function(options, param){

// 第一个功能：这个函数可以接受一个字符串参数，这个字符串参数通常就是

// 这个组件所提供的函数的名称，通过下面的代码就实现了，对该函数的调用

// 其实这里可以这样实现的原因是，js 不是一种强类型语言，所以他不会检查函数传递参数的类型。这就给函数传递的参数的作用可以动态变化。

        if (typeof options == 'string'){

            return $.fn.linkbutton.methods[options](this, param);

        }

        

        options = options || {};

        return this.each(function(){

// 这里的this其实就是使用选择器，选中的DOM元素。此时下面的方法（这个方法来自jquery）就是获取，当前元素是是否绑定了 linkbutton 这个数据，如果没有绑定下面的 state 就是 undefied.显然第一次创建 linkbutton 对象时，肯定是未绑定的。所以下面的if判断就是失败的。流程跳转到else部分。

            var state = $.data(this, 'linkbutton');

            if (state){

                $.extend(state.options, options);

            } else {

// 下面的代码就是将，linkbutton 对象的配置属性绑定到 当前的DOM对象上。可以看到，对象的属性来自三个方面：

1. $.fn.linkbutton.defaults 这是对象默认的配置属性。在对象的实现文件中就有，例如：（来自 jquery.linkbutton.js）

    $.fn.linkbutton.defaults = {

        id: null,

        disabled: false,

        plain: false,

        text: '',

        iconCls: null

    };

2. $.fn.linkbutton.parseOptions(this) ，这个通过将this对象传递给parseOptions这个函数后，在DOM元素的html标签上获取的配置属性例如：

<a href="#" id="btn" iconCls="icon-search">easyui</a>

3. options. 这个是 linkbutton这个函数被调用时，通过参数传递进来的。通常在使用js代码生成linkbutton时，就会将这个参数传递。例如：

$('#btn').linkbutton({plain:true});

最后，这样一句调用：

                $.data(this, 'linkbutton', {

                    options: $.extend({}, $.fn.linkbutton.defaults, $.fn.linkbutton.parseOptions(this), options)

                });

就把，所有有关该组件的配置属性全部的传递到 DOM 对象的 options 属性上。此时就可以使用 $.data(this, 'linkbutton') 来获得关于该对象的配置属性。

                $(this).removeAttr('disabled');

            }

// 第三部分创建linkbutton.

            createButton(this);

        });

    };

2. 下面来看看对象的创建 function createButton(target)

function createButton(target) {

// 1. 获得对象的配置属性

        var opts = $.data(target, 'linkbutton').options;

// 2. 清空对象的所有子元素。

        $(target).empty();

// 3. 设置对象的标准配置演示。

        $(target).addClass('l-btn');

// 4. 依据对象的options来设置DOM的属性。

        // 设置ID

        if (opts.id){

            $(target).attr('id', opts.id);

        } else {

//            $.fn.removeProp ? $(target).removeProp('id') : $(target).removeAttr('id');

//            $(target).removeAttr('id');

            $(target).attr('id', '');

        }

        // 设置显示样式

        if (opts.plain){

            $(target).addClass('l-btn-plain');

        } else {

            $(target).removeClass('l-btn-plain');

        }

        // 设置显示文本以及文本旁边的图标

        if (opts.text){

            $(target).html(opts.text).wrapInner(

                    '<span class="l-btn-left">' +

                    '<span class="l-btn-text">' +

                    '</span>' +

                    '</span>'

            );

            if (opts.iconCls){

                $(target).find('.l-btn-text').addClass(opts.iconCls).css('padding-left', '20px');

            }

        } else {

            $(target).html(' ').wrapInner(

                    '<span class="l-btn-left">' +

                    '<span class="l-btn-text">' +

                    '<span class="l-btn-empty"></span>' +

                    '</span>' +

                    '</span>'

            );

            if (opts.iconCls){

                $(target).find('.l-btn-empty').addClass(opts.iconCls);

            }

        }

// 设置按钮的启用禁用。

        $(target).unbind('.linkbutton').bind('focus.linkbutton',function(){

            if (!opts.disabled){

                $(this).find('span.l-btn-text').addClass('l-btn-focus');

            }

        }).bind('blur.linkbutton',function(){

            $(this).find('span.l-btn-text').removeClass('l-btn-focus');

        });

        

        setDisabled(target, opts.disabled);

    }

到此为止，一个linkbutton组件就创建好了。

3. 看看linkbutton 是如何解析页面配置属性的。

$.fn.linkbutton.parseOptions = function(target){

        var t = $(target);

        return $.extend({}, $.parser.parseOptions(target, ['id','iconCls',{plain:'boolean'}]), {

            disabled: (t.attr('disabled') ? true : undefined),

            text: $.trim(t.html()),

            iconCls: (t.attr('icon') || t.attr('iconCls'))

        });

    };

从上面的代码可以看到，其实就是通过jquery的选择器，获取，预定义属性的值，然后创建配置对象。这就实现了页面配置属性的解析。

4. 创建组件的两种方法

在easyui中创建组件有两种方法：

4.1 调用组件的创建函数，例如：

1. $('#btn').linkbutton({

2. plain:true

3. });

4. $('#btn').linkbutton('disable'); // 禁用此 button

5. $('#btn').linkbutton('enable'); // 启用此 button

在js文件调用上面的代码。即可创建一个linkbutton同时可以设置属性。此时我们知道其实就是调用了 linkbutton 函数。所以这里的组件创建其实是我们主动创建的。

4.2 html 写法

<a href="#" id="btn" iconCls="icon-search">easyui</a>

我们非常好奇的是：这种写法对象是怎样被创建的。其实这里就用到了easyui的解析器。上面的html加载完毕之后就会调用，解析器，来解析页面，从而创建相应的easyui组件.easyui的解析器就是jquery.parser.js.这个文件中定义了一个parse方法这个方法就是用来解析页面中的html标签创建的easyui组件的.那么这个方法在何时被调用呢.我们查看 jquery.easyui.min.js 文档,搜索 parser 发现了下面的代码:

$(function(){

if(!window.easyloader&&$.parser.auto){

$.parser.parse();

}

});

由此当一个html页面包含 jquery.easyui.min.js 文件时,则页面加载完毕之后,就会调用 $.parser.parse(); 来执行页面解析，将easyui组件解析出来。

下面就来看看 parse 函数是如何实现页面解析的。

5. parser.parse 函数（定义在 jquery.parser.js文件中）

这个函数实现了两个功能就是加载，easyui预定义组件和动态加载组件。其核心代码如下：

// 下面的数组就是 easyui 预定义的组件。

plugins:['draggable','droppable','resizable','pagination',

         'linkbutton','menu','menubutton','splitbutton','progressbar',

                 'tree','combobox','combotree','combogrid','numberbox','validatebox','searchbox',

                 'numberspinner','timespinner','calendar','datebox','datetimebox','slider',

                 'layout','panel','datagrid','propertygrid','treegrid','tabs','accordion','window','dialog'

        ],

// 下面就是 parse 函数的定义

        parse: function(context){

            var aa = [];

// 加载组件的算法也非常简洁：对于加载函数来说，她也不知道，页面存在那些easyui组件，所以，其加载策略就是，将 其所支持的所有组件轮询加载一边。如果对象存在，就调用创建函数。否则，就不创建。同时由于easyui提供一种按需加载的组件加载模式，所以当进行文档解析时，有可能，某个组件的js文件还没有被加载出来，所以首先将其保存的 数组 aa 中。后面再加载解析。

 

            for(var i=0; i<$.parser.plugins.length; i++){

                var name = $.parser.plugins[i];

                var r = $('.easyui-' + name, context);

                if (r.length){

                    if (r[name]){

     // 调用组件的创建函数。

                        r[name]();

                    } else {

    // 将还未加载的组件先保存起来。

                        aa.push({name:name,jq:r});

                    }

                }

            }

// 2. 按需加载所需要的组件。

            if (aa.length && window.easyloader){

                var names = [];

                for(var i=0; i<aa.length; i++){

                    names.push(aa[i].name);

                }

// 加载组件。之后调用创建函数，在页面上渲染组件。

                easyloader.load(names, function(){

                    for(var i=0; i<aa.length; i++){

                        var name = aa[i].name;

                        var jq = aa[i].jq;

                        jq[name]();//创建组件

                    }

                    $.parser.onComplete.call($.parser, context);

                });

            } else {

                $.parser.onComplete.call($.parser, context);

            }

        }

 

easyloader其实也很简单，就是依据名称加载对应的js以及css文件。

5. 关于 easyui 的 datagrid 中的 formatter.

这个函数可以格式化单元格，但是，当我们在其中添加类似的

<a href="#" id="btn" iconCls="icon-search">value</a>

时却不能正确的解析成easyui组件，其实，根本原因是：由 formatter 的实现方法决定的，其实现代码如下：

var th=$(this);

formatter:(th.attr("formatter")?eval(th.attr("formatter")):undefined),

由此可将，其实他并没有再次做easyui的组件解析工作，所以要先上面的标签被解析成easyui组件，就必须，在数据加载完毕之后在，显示的解析该组件。其方法是：

onLoadSuccess实现这个事件，当数据加载成功时触发被触发。所以在这里调用：

linkbutton()函数即可。

6. 查看源代码之后，其实我们可以这样调用函数：

<a href="#" id="btn" class="easyui-linkbutton" iconCls="icon-search">wow</a>

 

var btn = $("#btn");

btn.linkbutton.methods['disable'](btn);