上文中的oo0OOl应该就是控件的基类。可以对照miniuiAPI文档中的Control。
然后许多控件是从Control类去继承。也可能有其他中间类。以mini-button为例:
lolO00 =function() {
lolO00[ol0oOo][oO000O].apply(this, arguments)
}
;
OOOl(lolO00, oo0OOl, {
text:"",iconCls: "",iconStyle: "",plain: false,checkOnClick: false,checked: false,groupName: "",img: "",
ll0l01:"mini-button-plain", _hoverCls: "mini-button-hover",lOoo: "mini-button-pressed",loool: "mini-button-checked",lol101: "mini-button-disabled",
allowCls:"",_clearBorder: false,uiCls: "mini-button",href: "",target: ""});
O1l0O0(lolO00,"button");//将构造函数添加至全局uiCls中O1l0O0 =function(A, _) {
_=_.toLowerCase();if (!mini.classes[_]) {
mini.classes[_]=A;
A[OlO10o].type=_
}var $ =A[OlO10o].uiCls;if (!mini.isNull($) && !mini.uiClasses[$])
mini.uiClasses[$]=A
}
;
这是组织mini-button构造函数的地方。mini-button的构造函数继承自oo0OOl。为什么说lolO00对应着mini-button,因为增加属性中uiCls:“mini-button”,然后通过执行O1l0O0来将对应的“button”赋值给prototype的type属性,然后将构造函数与mini-nutton以属性-值得方式存放到mini.uiClasses集合中。
然后是时候看一下mini.parse()的处理了。
mini.parse = function(C, $) {
mini.parsed= true;if(mini._firstParse) {if (document.body) document.body.style.visibility = "visible";
mini._firstParse= false;var D = document.getElementsByTagName("iframe"),
H=[];for (var E = 0,
G= D.length; E < G; E++) {var A =D[E];
H.push(A)
}for (E = 0, G = H.length; E < G; E++) {var A =H[E],
B= jQuery(A).attr("src");if (!B || B == "about:blank") continue;
A.loaded= false;
A._οnlοad=A.onload;
A._src=B;
A.οnlοad= function() {};
A.src= ""}
setTimeout(function() {for (var _ = 0,
A= H.length; _ < A; _++) {var $ =H[_];if ($._src && jQuery($).attr("src") == "") {
$.loaded= true;
$.οnlοad=$._onload;
$.src=$._src;
$._src= $._onload = null}
}
},20);
setTimeout(function() {for (var A = 0,
B= H.length; A < B; A++) {var $ =H[A],
_= jQuery($).attr("data-src");if (_) $.src =_
}
},30)
}if (typeof C == "string") {var F =C;
C=l1O1(F);if (!C) C =document.body
}if (C && !mini.isElement(C)) C =C.el;if (!C) C =document.body;var _ =oO01ll;if (isIE) oO01ll = false;
mini.ol10(C);//处理
oO01ll=_;if ($ !== false) mini.layout(C)
};
因为我们调用的是mini.parse()且页面中没有iframe框架,直接看留下的部分。处理对象为document.body;处理方式为mini.ol10(C):
mini.ol10 = function(_) {if (!_) return;var $ =_.nodeName.toLowerCase();//$='body'if (!$) return;if (jQuery(_).attr("noparser") != null) return;var C =String(_.className);//获取元素classNameif(C) {var D =mini.get(_);//尝试使用mini.get()获取元素,如果获取失败,表明当前元素可能可以被解析成mini控件if (!D) {var A = C.split(" ");//获取所有classNamefor (var B = 0,
F= A.length; B < F; B++) {//遍历每一个className,var E =A[B],
J=mini.getClassByUICls(E);//看看mini.uiClasses里面有没有对应的控件名if(J) {//有,需要解析
l11l(_, E);//从元素上removeclass Evar H = newJ();//利用找到的对应控件的构造函数创建对象
mini.applyTo[Oloool](H, _);//Oloool:call,在H对象上使用该方法,该方法中的this将指向H对象
_=H.el;//将创建对象的el赋值给_break}
}
}
}//下面这行的判断是为了避免再循环其子节点如果符合要求,直接返回if ($ == "select" || l1llO1(_, "mini-menu") || l1llO1(_, "mini-datagrid") || l1llO1(_, "mini-treegrid") || l1llO1(_, "mini-tree") || l1llO1(_, "mini-button") || l1llO1(_, "mini-textbox") || l1llO1(_, "mini-buttonedit")) return;
//递归遍历body中的所有nodeType == 1:element_node(元素节点)
var I = mini[l0loo](_, true);
for (B = 0, F = I.length; B < F; B++) {var G =I[B];if (G.nodeType == 1) if (G.parentNode ==_) mini.ol10(G)
}
};
最后看看mini.applyTo方法:
mini.applyTo = function(_) {
_= l1O1(_);//当传入元素对象时,返回该对象
if (!_)return this;if(mini.get(_))throw new Error("not applyTo a mini control");var A = this[lo11lO](_);//getAttrs获取元素所有属性,为H对象的赋值做准备
deleteA._applyTo;//添加两个属性defaultValue,defaultText
if (mini.isNull(A[OlOo]) && !mini.isNull(A.value))//defaultvalue
A[OlOo] =A.value;if (mini.isNull(A.defaultText) && !mini.isNull(A.text))//defaulttext
A.defaultText =A.text;var $ =_.parentNode;if ($ && this.el !=_)
$.replaceChild(this.el, _);//替换了
if(window._mini_set)
_mini_set(A,this);this[lOlol0](A);//set,一直调用到最基类的set方法,O010l0的set方法oooOo,将原元素的属性赋值到H对象上
this.OlO1(_);//空方法
return this}
;
这边还有1个问题,H对象的el属性是怎样组建的?
今天遇到mini-fit使用的问题。面对自动生成的元素被设置成固定高度导致元素显示不全的问题,在最外层套一个mini-fit就好了。先记录一下,之后去看看。
Good night.