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

最新推荐文章于 2025-11-25 08:44:41 发布

最新推荐文章于 2025-11-25 08:44:41 发布 · 180 阅读

文章标签：

#正则表达式 #IE #CSS #EXT #浏览器

framework / lib 专栏收录该内容

72 篇文章

订阅专栏

本文介绍 ExtJS 库中如何使用简洁的代码动态获取元素的宽度、高度、顶部和左侧位置等属性。通过正则表达式简化了原本复杂的逻辑，使开发过程更加高效。

在 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;
        },

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