跟我学jQuery EaseUI Web前端框架——Easy UI渲染技术及相关问题的解决方案

目录
1.1Easy UI渲染技术及相关问题的解决方案 (2)
1.1.1Easy UI Parser(解析器) (2)
1.1.2动态渲染问题 (2)
1.1.3Easy UI渲染慢 (3)
1.2EasyUI的easyloader（加载器） (3)
1.2.1什么是EasyLoader (3)
1.2.2EasyLoader使用 (4)
1.1Easy UI渲染技术及相关问题的解决方案
1.1.1Easy UI Parser(解析器)
1、Easy UI Parser(解析器)
解析器是easyui非常重要的基础组件,在easyui中我们能够简单的通过class定义一个组件,从而渲染出非常好的交互效果。

就是通过parser进行解析的。

parser会获取所有在指定范围内定义为easyui组件的class定义,并且根据后缀定义把当前节点解析渲染成特定的组件。

2、parser可以有两种使用方法
（1）$.parser.parse();不带参数,默认解析该页面中所有被定义为easyui组件的节点。

（2）$.parser.parse('#cc');带一个jquery选择器，使用这种方式我们可以单独解析局部的easyui 组件节点。

这里要说明的是这个jquery选择器必须是你解析组件的父级以上的节点。

也就是说这个查找出来的节点相当于一个容器,它只会解析容器里面的内容。

3、解决页面解析过程中短暂的界面混乱现象
因为parser在dom载入完毕之后才会对整个页面进行解析,当页面组件使用较多的时候,完整的解析组件必定需要耗费较多的时间,这一过程可能就会出现短暂的界面混乱现象。

1.1.2动态渲染问题
1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法：
在页面中只要书写相应easyui的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，parser会在文档装载完成的时候($(document).ready)被调用一次，而且是渲染整个页面（相当于所有的组件进行了一次“初始化”）。

然而当页面装载完后，如果用javascript生成的DOM中包含了Easyui支持控件的class，比如说，用javascript生成了以下代码：
<a id="tt" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
虽然页面上有这样的DOM了，但是没有被渲染为Easyui的linkbutton插件，原因是
Easyui并不会一直监听页面，所以不会主动渲染，这时候就需要手工调用Easyui的parser 进行解析了。

2、手工调用需要注意以下几点
（1）解析目标为指定DOM的所有子孙元素，不包含这个DOM自身：
比如上面代码生成的HTML，id="tt"是我们想要的LinkButton，像下面代码去手工解析的话是得不到你想要的结果的（把下面的代码放在插入html的语句之后，但不要直接应用$.parser.parse()，否则将会对整个页面重新渲染，这会影响到以前已经渲染过的组件，并且这些组件中的相关数据也都会被初始化掉）：
$.parser.parse($('#tt'));
道理很简单，parser只渲染tt的子孙元素，并不包括tt自身，而它的子孙元素并不包含任何Easyui支持的控件class，所以这个地方就得不到你想要的效果了，应该这样写：$.parser.parse($('#tt').parent());
（2）渲染tt的父节点的所有子孙元素就可以了
不管你的javascript输出什么DOM，直接渲染其父节点就可以保证页面能被正确解析。

1.1.3Easy UI渲染慢
1、主要的方法
（1）加载easyui不用class的方式，而是用js的方式，等页面加载完成后，再来加载easyui 的组件。

（2）加载easyui组件的时候，只加载需要显示的那部分组件，其他的先不加载（因为在别的tab中，页面刚一打开是看不到的）。

切换到对应的tab时，再根据情况去加载里面的eayui 组件。

说白了，就是延迟加载，用到的时候再去加载。

1.2EasyUI的easyloader（加载器）
1.2.1什么是EasyLoader
1、easyloader的作用是为了动态的加载组件所需的js文件
,这体现了EasyUI作为轻量级框架对性能的合理掌握（可以动态的加载所需组件），不过一般而言很少使用到easyloader（会给使用者带来一定的难度）。

那么使用EasyLoader 的场景有哪些呢？
2、EasyLoader使用场景
（1）出于性能的考虑,不一次性的加载easyui核心js、css文件,而是先展示基础文档结构。

（2）项目只是简单的用到easyui的几个组件,此时可以按需加载该组件的js和css文件。

（3）需要使用某个组件,但是不知道该组件是否依赖于其他组件(简单的js引用无法达到),使用easyloader可以自动加载依赖组件。

（4）需要把JQuery基础库和自己实现的js结合起来，以达到更好的展示性能。

3、EasyLoader加载器
简单的了解了什么是easyloader以及其大概的使用场景,接下来看看easyloader的属性、事件和方法。

1.2.2 EasyLoader使用
1、modules属性就是easyui定义模块用的
modules本质上来说是一个json格式对象。

其形式如下：
modules = {
draggable:{
js : "jquery.draggable.js",
css : "pagination.css",
dependencies : ["linkbutton"]
}
};
key值即是定义的模块名称，值又是一个json对象。

包含三个属性js、css、dependencies。

js就是模块需要导入的js名称，css是该模块的样式，dependencies定义该模块的依赖模块。