Extjs 正则表达式的优雅应用 -1

在 extjs 的基础库中，大量使用了正则表达式的功能，使得原来很复杂的逻辑可以用很短的代码表示出了。

 

举个例子:

 

要动态获得 元素的 width,height,top,left 等位置大小属性：

 

首先一点预备知识：

 

extjs 是以像素为基本单元，以像素控制的话各个浏览器也比较容易控制，于是extjs 获得上述属性得到的都是像素为单位的数值。

动态获取元素上述大小属性，首先如果css上用户设置了内联，那么ie，ff可以直接style读取，否则就要利用ff的符合标准的computedStyle 以及 ie 特有的 currentStyle 。

如 extjs 的 getStyle 函数 ：

 

/**
         * Normalizes currentStyle and computedStyle.
         * @param {String} property The style property whose value is returned.
         * @return {String} The current value of the style property for this element.
         */
        getStyle : function(){         
            return view && view.getComputedStyle ?
                function(prop){
                    var el = this.dom,
                        v,                  
                        cs;
                    if(el == document) return null;
                    prop = chkCache(prop);
                    return (v = el.style[prop]) ? v : 
                           (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
                } :
                function(prop){      
                    var el = this.dom, 
                        m, 
                        cs;     
                        
                    if(el == document) return null;      
                    if (prop == 'opacity') {
                        if (el.style.filter.match) {                       
                            if(m = el.style.filter.match(opacityRe)){
                                var fv = parseFloat(m[1]);
                                if(!isNaN(fv)){
                                    return fv ? fv / 100 : 0;
                                }
                            }
                        }
                        return 1;
                    }
                    prop = chkCache(prop);  
                    return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
                };
        }(),

 

但是注意：

1. 如果 用户没有显示指明 css ，则 ie 会得到 "auto" ，ff 则可以得到现场自己根据内容计算的 css 值，为以像素为单元，如 "20px"

2. ff 无论用户css属性设置了哪种单元，如pt,em ，一律返回 px单元的数值 ，如 “20px” ，但是 ie 如果用户没有设置px单元 则会 返回 非px单元表示的数值，如 "12pt"

由于 extjs 一定要以 px 为单元的数值返回，则这时 ie 的 getstyle 不能采纳，但是可以采纳 offset 属性，由于 offset 返回的是动态的以px为单元的数值，则可以用 offset 近似表示 width ，height ，区别有需要注意

（见：

offsetXx 探讨

）。

3. top left 只有在 定位时才有意义，其他情况下返回0，即可。

根据上述逻辑可以得到复杂的代码获取控制逻辑，但是看一看extjs的

 

offsetAttribute = /^((width|height)|(top|left))$/,
offsetUnit =  /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,

getAttr: function(attr) {
            var el = Ext.fly(this.el),
                val = el.getStyle(attr),
                a = offsetAttribute.exec(attr) || []

            if (val !== 'auto' && !offsetUnit.test(val)) {
                return parseFloat(val);
            }

            return (

//attr 为 width 或 height
!!(a[2]) || 
(el.getStyle('position') == 'absolute' && 

//如果 attr 为 top 或 left ，则元素必须绝对定位
!!(a[3]))) ?

//ie 下取offset得到像素单元的数值 ，注意 a[0]==a[1] 都当前匹配项

//如：/^((width|height)|(top|left))$/.exec("width") == ["width", "width", "width", undefined]
 el.dom['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)] : 0;
        },

 

利用正则表达式来代替跳转判断逻辑，很巧妙。