jQuery Easyui 源码分析之parser组件

现在的位置: 首页 > easyui > Base > parser > 正文

上篇下篇

2012年12月03日 ⁄ parser, 源码分析 ⁄ 共 6437字 ⁄ 评论数 5 ⁄ 被围观 12,187 views+

parser组件作为easyui的基础类组件，其实担当者相当重要的角色，我们之所以能够通过定义一些样式就能完成对页面的自动渲染，完全是依靠parser组件；同时parser组件内部还定义了公用的属性转化器等几个实用工具，话不多说了，直接上带有注释的代码：

/**
* jQuery EasyUI 1.3.1
* Licensed under the GPL terms
* To use it on other terms please contact us
* Copyright(c) 2009-2012 stworthy [ stworthy@gmail.com ]
* (function($){})(jQuery) 定义一个匿名函数，并将jQuery对象作为实参传给这个匿名函数运行之。
*
*/
(function($){
//在jQuery对象定义全局属性parser，parser属性也是对象，其自身又包含:auto,onComplete,plugins,parse,parseOptions这几个属性。
$.parser = {
//设置是否自动渲染页面(或者为DOM块)的开关
auto: true,
//渲染完成后会触发onComplete事件（如果该事件绑定了处理函数，则每次调用parser渲染DOM后都会触发一次该事件绑定的处理函数）
onComplete: function(_1){
},
//plugins属性枚举出了所有组件名称标识。
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就是实现渲染DOM的核心方法了，入参为DOM对象，其实也就是某个DOM块，不传入参的话，则是对整个页面进行渲染。
parse: function(_2){
var aa = [];
for (var i = 0; i < $.parser.plugins.length; i++) {
var _3 = $.parser.plugins[i];
//查找指定DOM下的特定的easyui组件，即以_2为上下文查找_3组件对应的DOM对象，_2为空的话，则在整个document为上下文。
var r = $(".easyui-" + _3, _2);
if (r.length) {
if (r[_3]) {
//调用plugins某个里_3组件对象的构造函数，上下文当然也就是r对象自身了，也就是构造函数里面使用的this
//这个地方不要犯晕，r[_3]其实是function类型，其实也就是各个组件对应的构造函数。
//例如panel组件的代码里总有这样的定义：$.fn.panel = function(jq, options){...}，这个匿名函数我就称之为组件的构造函数(这个称呼只是个约定)。
//而jQuery扩展fn的话等于扩展了全局方法到jQuery对象上，也就是所有的jQuery对象都具备了panel这个方法，
//如果没有使用easyloader的话，r对应其实已经具备了easyui所有组件的构造函数。
//这个地方如果不理解的话，请去翻阅jQuery的对象模型以及继承关系方面的资料。
r[_3]();
}
else {//这个else分支也只有在使用easyloader的时候才会调用到了
aa.push({
name: _3,
jq: r
});
}
}
}
if (aa.length && window.easyloader) {
var _4 = [];
for (var i = 0; i < aa.length; i++) {
_4.push(aa[i].name);
}
easyloader.load(_4, function(){
for (var i = 0; i < aa.length; i++) {
var _5 = aa[i].name;
var jq = aa[i].jq;
//调用组件的构造函数
jq[_5]();
}
$.parser.onComplete.call($.parser, _2);
});
}
else {
//这地方调用绑定的onComplete事件，入参为_2这个上下文。
//为什么这个写法？还不是想把_2作为参数传给onComplete事件绑定的函数处理程序嘛。
$.parser.onComplete.call($.parser, _2);
}
},
//公用的属性转换器，兼容data-options方式和老方式，功能可谓灵活而强大。
parseOptions: function(_6, _7){
var t = $(_6);
var _8 = {};
var s = $.trim(t.attr("data-options"));
if (s) {
var _9 = s.substring(0, 1);
var _a = s.substring(s.length - 1, 1);
if (_9 != "{") {
s = "{" + s;
}
if (_a != "}") {
s = s + "}";
}
_8 = (new Function("return " + s))();
}
if (_7) {
var _b = {};
for (var i = 0; i < _7.length; i++) {
var pp = _7[i];
if (typeof pp == "string") {
if (pp == "width" || pp == "height" || pp == "left" || pp == "top") {
_b[pp] = parseInt(_6.style[pp]) || undefined;
}
else {
_b[pp] = t.attr(pp);
}
}
else {
for (var _c in pp) {
var _d = pp[_c];
if (_d == "boolean") {
_b[_c] = t.attr(_c) ? (t.attr(_c) == "true") : undefined;
}
else {
if (_d == "number") {
_b[_c] = t.attr(_c) == "0" ? 0 : parseFloat(t.attr(_c)) || undefined;
}
}
}
}
}
$.extend(_8, _b);
}
return _8;
}
};
//文档准备好后，根据$.parser.auto的设置来决定是否自动渲染
$(function(){
if (!window.easyloader && $.parser.auto) {
$.parser.parse();
}
});
//扩展_outerWidth方法到jQuery对象上，用于兼容IE这种不是正规盒子模型的另类浏览器
$.fn._outerWidth = function(_e){
if (_e == undefined) {
if (this[0] == window) {
return this.width() || document.body.clientWidth;
}
return this.outerWidth() || 0;
}
return this.each(function(){
if (!$.support.boxModel && $.browser.msie) {
$(this).width(_e);
}
else {
$(this).width(_e - ($(this).outerWidth() - $(this).width()));
}
});
};
//扩展_outerHeight方法到jQuery对象上，用于兼容IE这种不是正规盒子模型的另类浏览器
$.fn._outerHeight = function(_f){
if (_f == undefined) {
if (this[0] == window) {
return this.height() || document.body.clientHeight;
}
return this.outerHeight() || 0;
}
return this.each(function(){
if (!$.support.boxModel && $.browser.msie) {
$(this).height(_f);
}
else {
$(this).height(_f - ($(this).outerHeight() - $(this).height()));
}
});
};
//这句代码究竟有什么用途，请同学们在学习具体组件的源码时，自己体会吧。
$.fn._propAttr = $.fn.prop || $.fn.attr;
})(jQuery);

作者: 世纪之光

该日志由世纪之光于7年前发表在parser, 源码分析分类下
转载请注明: jQuery Easyui 源码分析之parser组件 | WebUI框架使用参考 +复制链接
关键字: easyui源码分析, parser

【上篇】jQuery Easyui 1.3.2版本即将发布
【下篇】jQuery Easyui 源码分析之validatebox组件

您可能还会对这些文章感兴趣！

目前有 5 条留言其中：访客:3 条, 博主:2 条

peislin : 2012年12月03日17:13:00 -49楼 @回复回复

写的很详细啊……期待博主再接再厉，写出更多高质量的博文！
- 管理员 世纪之光 : 2012年12月03日17:42:53 地下1层 @回复回复
  
  光靠我一个人写不是办法，希望群里面的大多数人都能行动起来。
  - yu : 2013年05月17日14:44:24 地下2层 @回复回复
    
    嗯，不错，理解的很深刻。
    http://sypro.cloudfoundry.com/
    我做了在线示例。也可以给大家参考。
和尚 : 2014年06月27日16:09:56 -48楼 @回复回复

博主加油!!!!!!!写的很详细。大爱
- 管理员 世纪之光 : 2014年06月27日23:56:49 地下1层 @回复回复
  
  谢谢鼓励！