miniui从继承看控件处理

Posted 2022-05-16 jianisthebest

上文中的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.