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);
管理员 世纪之光 : 2012年12月03日17:42:53 地下1层
管理员 世纪之光 : 2014年06月27日23:56:49 地下1层