miniui從繼承看控件處理

上文中的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._onload = A.onload; A._src = B; A.onload = function() {}; A.src = "" } setTimeout(function() { for (var _ = 0, A = H.length; _ < A; _++) { var $ = H[_]; if ($._src && jQuery($).attr("src") == "") { $.loaded = true; $.onload = $._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);//獲取元素className
    if (C) {
        var D = mini.get(_);//嘗試使用mini.get()獲取元素，如果獲取失敗，表明當前元素可能可以被解析成mini控件
        if (!D) {
            var A = C.split(" ");//獲取所有className
            for (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 E
                    var H = new J();//利用找到的對應控件的構造函數創建對象
                    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對象的賦值做准備
    delete A._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.