easyui源代码解析概述

各位童鞋在使用各种框架的时候，总会遇到各种坑，其中一种坑叫做源代码的坑，因为业务需求，往往需要修改源代码，但是源代码的陌生性往往给大家带来各种困惑！easyui源代码可以从以下几方面来看！

一.easyui的本质是通过js检测dom元素中的带有easyui-相关的class的dom元素，如果觉得这句话拗口，请多读几遍！调用方式分为手动调用和自动调用，自动调用就是在页面中写完相关dom元素，easyui会自动进行解析和渲染！手动调用就是在页面上手动调用easyui相关组件的api进行二次渲染！

二.无论手动渲染还是自动渲染，easyui都会调用自身js，除了组件之间互相依赖外，就是按照不同组件进行各自渲染！

三.具体渲染过程如下:easyui函数最开始，会有一个总的函数来遍历可以在页面渲染的组件，也就是说如果你页面上用的组件在这里存在，那么可以渲染，页面上写的组件不存在，那么无法渲染！详见easyui中开头的plugins,可以手动加减自己需要的插件！

在第一个函数下面，找到$.parser.parse()，这个方法是页面加载的时候自动调用的加载渲染dom元素的方法！童鞋们找到这个方法后，可以在开头位置找到这句代码

for(var i=0; i<$.parser.plugins.length; i++){
    var name = $.parser.plugins[i];
}，

这句代码的作用是遍历相关的插件元素，同时可以在下面找到这句代码

if (r[name]){
   r.each(function(){
      $(this)[name]($.data(this, 'options')||{});
   });
}
r是页面上带有相关组件名的easyui的dom元素的素组，比如现在遍历到的name值是menu，
那么r就是所有easyui-name的dom元素的数组，看到这里大部分同学应该明白了，
$.parser.parse()其实是通过遍历组件名，在页面上找到单个组件的所有相关的dom结构，
然后再给每个dom元素渲染，同时绑定相关事件和方法。这里读者会有个疑问，
一般调用事件的方法不是$().attr(),其实$()['attr']()和$().attr()是等价的！假如name的值为menu，
那么$(this)[name]()就是$(this)['menu']()，等价于$(this).menu(),
$.data(this, 'options')||{}这个可以看成是参数，easyui是利用了data（）这个api对不同dom进行数据
绑定，通过这个方法减少请求，最大限度利用数据缓存！通过$.extend（）这个方法对各种数据进行合并，
有兴趣的读者可以对照源码自行阅读！
    因为篇幅限制，小编没法完整讲解整个源码，大家可以按照小编的提示自行阅读！