剖析easyui tree源码（设计原理）来学习easyui

         思考的价值在于延续性，而不在于瞬间灵感触发，思考过就记下，以后再次审视自己曾经的思考，只有流动的思考才能永恒，纵使目前的我还是一个黄毛小子（毕业半年），但是我也也算做过项目的了，但是在公司内部项目当中我从开发到维护一直在使用easyui，在一路摸索当中，我有了自己的体会，有了自己的思考 ，个人认识有限，说的宽泛了一点，如有说得不当，恳请各位不吝指出，有思想的碰撞才会有火花，碰撞越激烈，火花越大。

        刚刚打开easyui.min.js第一眼看到的就是基于html拓展的功能实现，html拓展就是说在原有的html属性和属性值基础上根据自己的需要进行扩展（通俗讲就是增加），这种拓展不会影响到别人，因为拓展的东西只有你自己实现。在easyui.min.js上面第一句就采用了匿名函数进行初始化，这种初始化的好处在于仅仅在加载js文件后运行一遍，运行完就没有了，因为匿名函数没有函数名，所以不能进行重新调用，正是由于这样的情况，所以使用对以后的代码不会产生污染。匿名函数的参数就是传入了jquery对象$，然后就是采用数组放置已经实现好的jquery组件（dialog、window等等），然后遍历数组采用jquery的class选择器对class属性为easyui-组件名称的html元素构造新的jquery对象，准确来说是jquery ui组件对象了，然后调用组件方法根据data-options属性设置进行动作响应绑定和展示效果（css）的处理。到这里也就说明了官网中介绍两种使用easyui组件的方式第一种里面div元素当中存在class="easyui-dialog"和data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}"两个属性，class就是用来确定是否使用easyui组件和采用哪一个easyui组件的，而data-options就是用来初始化这个easyui对象的参数， 参数最大的价值就是让函数变成在一定范围内你想怎么样就怎么样，具体需要各位看easyui的api文档了，个人推荐官网（中文技术文档质量参差不齐还少），可是英语是必须的，现在地球有了新名字地球村，国际化的需求太大了，是时候把自己也稍微国际化一下，人家日本的都很多来中国商业演出了。有些人认为到这里可以了，因为easyui组件已经有效果出来了。这样认为也是可以的，因为在页面展示的时候已经把页面需要用到的easyui组件已经给实现了，如果对于一些仅仅是进行简单开发（在页面操作当中不会再次用到jquery easyui组件对象的应用），的确已经足够了，可是现实生活的应用需求总是多种多样的，对于一些应用在展示页面后期还继续使用easyui组件的话，那么这就有了第二种方式，使用$('#id或其他选择器').组件名称（参数对象）进行easyui组件对象的初始化和构造。

        这里首先是使用jquery选择器构造一个jquery对象，然后调用拓展到jquery的easyui组件构造器方法根据参数对象构造easyui组件对象，需要注意的一点是jquery选择器构造的确保是一个jquery对象，而不是一个jquery对象集合，jquery选择器构造的对象是一个对象集合，那么需要自己遍历集合进行构造对应的easyui组件对象，easyui还没有强大到那个地步，因为集合可暂时没有easyui组件构造方法接口，所以一般来说都是使用id来构造一个jquery对象，再使用jquery对象调用拓展的组件构造方法构造easyui组件对象。于是乎easyui.,min.js后面的代码就是对jquery对象进行拓展的，在第二种使用方式中有地方是比较古怪的，那就是构造easyui组件和调用easyui方法都是使用easyui对象的组件名称，不过是参数不同就可以返回自己需要的参数，在这里以tree为例。$.fn.tree=function(_16e,_16f){……};通过给jquery对象的fn添加组件对象方法，这里需要说明的是用Jquery.extend增加的函数，或者说扩展的函数，可以理解成添加类方法——用类名调用， 用Jquery.fn.extend增加的函数，或者说扩展的函数，可以理解成添加对象方法，即添加成员函数，用对象名调用，不过是easyui使用点.元素符直接对$.fn对象添加对象方法，由于对jquery没有精通，甚至还没有到灵活使用的地步，在这里仅仅做一个大胆的猜测，希望高人看到有错误不吝指出，我觉得fn就是实际通过选择器或其他构造器返回来的jquery对象。这也解释了easyui使用方式$("#id").组件名()就获得easyui组件对象。下面解释easyui组件对象同样调用组件名称(方法名称字符串，方法参数)方法来调用easyui组件对象的方法函数，$.fn.tree=function(_16e,_16f){if(typeof _16e=="string"){return $.fn.tree.methods[_16e](this,_16f);}，……}，这里tree构造器参数有两个，第一个_16e用来判断是构造器方法还是普通方法，普通方法就是字符，非字符就是调用构造器方法，说到这里，javascript的数据类型有很多种，字符串、数字、布尔、数组、对象、Null、Undefined，如果第一个参数是数字或布尔、Null、Undefined等，easyui就用var _16e=_16e||{};来判断并返回一个空对象，然后返回使用_16e这个初始化参数对象来构造并返回easyui组件对象，这里需要注意的是如果是对象的话，那么这里我没有试过会出现什么问题，因为它会使用这个对象来初始化easyui对象，但是如果这个对象没有构造组件对象需要的成员，那么应该是构造不出来组件对象的，是一个仅仅具有方法而没有初始数据的组件组件对象，这是没有用的。这也就解释了有些时候我们使用easyui时候已经使用$("#id").tree（参数对象）但是没有效果，同时并没有报错，首先需要排除的是$("#id")是否是一个jquery对象，也就是说有没有存在这个id的html dom对象，如果确定过，这极有可能是参数出错了。上面假设是第一个参数是非字符串，现在假设是字符串，那么就说明调用的是easyui组件对象的成员方法了，那么通过return $.fn.tree.methods[_16e](this,_16f);来返回对象方法对应参数的值，请看看看这里，再次对 $.fn.tree进行了拓展，这里定义了数组对象，通过成员名称来进行访问组件对象方法，然后返回对应调用方法的值。easyui官网给出的两种使用方式已经介绍完毕。里面还有比较多的东西还没有介绍到。

1. Declare components directly within HTML.

<div class="easyui-dialog" style="width:400px;height:200px"    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">        dialog content.</div>

2. Write JavaScript code to create components.

<input id="cc" style="width:200px" />

$('#cc').combobox({url: ...,required: true,valueField: 'id',textField: 'text'});

        最后总结一下，使用easyui有两种方式，一种是根据官方指定html属性或者拓展的属性赋予特定的值来初始化easyui组件效果与响应，缺点是没有办法获取easyui组件对象给以后的编程备用，优点当然是使用简单啦，仅仅在html元素指定组件并查看api给定组件参数值，适合简单页面功能开发和非专业编程人员使用；于是乎第一种方式应运而生，采用拓展jquery.fn对象的方式，可以在适合作用域调用easyui组件构造方法构造一个easyui组件对象，然后在以后就可以通过easyui组件对象.组件名称("组件方法名称"，方法参数)就可以调用组件方法了。

        我不是专业的前端攻城狮，我只能说javascript很博大精深，javascript了解也不是很熟悉，个人学识也有限，我仅仅是想把自己使用easyui的一些感想体会写下来，文中错误和正确兼有，希望能给一些学习easyui的人一些借鉴价值（好的、坏的）。希望大家抱着先知道原理再进行使用，这样可以使你能够防止很多很多的低级错误，高效实现强大的功能，如果有需要还可以进行修改源码以适应自己的需求。如果有需要，欢迎大家一起讨论。后面辅以简单的tree 源码

$.fn.tree=function(_16e,_16f){
if(typeof _16e=="string"){
return $.fn.tree.methods[_16e](this,_16f);
}
var _16e=_16e||{};//这里使用的是||运算，它可以返回存在的对象，那么应该是有顺序的。
return this.each(function(){
var _170=$.data(this,"tree");
var opts;
if(_170){
opts=$.extend(_170.options,_16e);
_170.options=opts;
}else{
opts=$.extend({},$.fn.tree.defaults,$.fn.tree.parseOptions(this),_16e);
$.data(this,"tree",{options:opts,tree:_aa(this)});
var data=_ad(this);
if(data.length&&!opts.data){
opts.data=data;
}
}
_b5(this);
if(opts.lines){
$(this).addClass("tree-lines");
}
if(opts.data){
_fb(this,this,opts.data);
}else{
if(opts.dnd){
_c1(this);
}else{
_be(this);
}
}
_110(this,this);
});
};
$.fn.tree.methods={options:function(jq){
return $.data(jq[0],"tree").options;
},loadData:function(jq,data){
return jq.each(function(){
_fb(this,this,data);
});
},getNode:function(jq,_171){
return _bd(jq[0],_171);
},getData:function(jq,_172){
return _14f(jq[0],_172);
},reload:function(jq,_173){
return jq.each(function(){
if(_173){
var node=$(_173);
var hit=node.children("span.tree-hit");
hit.removeClass("tree-expanded tree-expanded-hover").addClass("tree-collapsed");
node.next().remove();
_117(this,_173);
}else{
$(this).empty();
_110(this,this);
}
});
},getRoot:function(jq){
return _12f(jq[0]);
},getRoots:function(jq){
return _132(jq[0]);
},getParent:function(jq,_174){
return _12a(jq[0],_174);
},getChildren:function(jq,_175){
return _fa(jq[0],_175);
},getChecked:function(jq,_176){
return _13c(jq[0],_176);
},getSelected:function(jq){
return _141(jq[0]);
},isLeaf:function(jq,_177){
return _f6(jq[0],_177);
},find:function(jq,id){
return _15b(jq[0],id);
},select:function(jq,_178){
return jq.each(function(){
_15d(this,_178);
});
},check:function(jq,_179){
return jq.each(function(){
_e2(this,_179,true);
});
},uncheck:function(jq,_17a){
return jq.each(function(){
_e2(this,_17a,false);
});
},collapse:function(jq,_17b){
return jq.each(function(){
_11c(this,_17b);
});
},expand:function(jq,_17c){
return jq.each(function(){
_117(this,_17c);
});
},collapseAll:function(jq,_17d){
return jq.each(function(){
_12b(this,_17d);
});
},expandAll:function(jq,_17e){
return jq.each(function(){
_122(this,_17e);
});
},expandTo:function(jq,_17f){
return jq.each(function(){
_126(this,_17f);
});
},toggle:function(jq,_180){
return jq.each(function(){
_11f(this,_180);
});
},append:function(jq,_181){
return jq.each(function(){
_143(this,_181);
});
},insert:function(jq,_182){
return jq.each(function(){
_147(this,_182);
});
},remove:function(jq,_183){
return jq.each(function(){
_14b(this,_183);
});
},pop:function(jq,_184){
var node=jq.tree("getData",_184);
jq.tree("remove",_184);
return node;
},update:function(jq,_185){
return jq.each(function(){
_155(this,_185);
});
},enableDnd:function(jq){
return jq.each(function(){
_c1(this);
});
},disableDnd:function(jq){
return jq.each(function(){
_be(this);
});
},beginEdit:function(jq,_186){
return jq.each(function(){
_162(this,_186);
});
},endEdit:function(jq,_187){
return jq.each(function(){
_167(this,_187);
});
},cancelEdit:function(jq,_188){
return jq.each(function(){
_16b(this,_188);
});
}};