easyui js解析字符串_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标签上获取的配置属性例如：

easyui

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(

'' +

'' +

'' +

''

);

if (opts.iconCls){

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

}

} else {

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

'' +

'' +

'' +

'' +

''

);

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 写法

easyui

我们非常好奇的是：这种写法对象是怎样被创建的。其实这里就用到了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

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

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

}

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

easyloader.load(names, function(){

for(var i=0; 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.

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

value

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

var th=$(this);

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

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

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

linkbutton()函数即可。

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

wow

var btn = $("#btn");

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