Extjs 正規表示式的優雅應用 1

2021-08-24 18:24:41 字數 1976 閱讀 1119

在 extjs 的基礎庫中,大量使用了正規表示式的功能,使得原來很複雜的邏輯可以用很短的**表示出了。

舉個例子:

要動態獲得 元素的 width,height,top,left 等位置大小屬性:

首先一點預備知識:

extjs 是以畫素為基本單元,以畫素控制的話各個瀏覽器也比較容易控制,於是extjs 獲得上述屬性得到的都是畫素為單位的數值。

動態獲取元素上述大小屬性,首先如果css上使用者設定了內聯,那麼ie,ff可以直接style讀取,否則就要利用ff的符合標準的computedstyle 以及 ie 特有的 currentstyle 。

如 extjs 的 getstyle 函式 :

/**

* normalizes currentstyle and computedstyle.

* @param property the style property whose value is returned.

* @return the current value of the style property for this element.

*/getstyle : function() :

function(prop)}}

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 ,區別有需要注意

(見: )。

3.top left 只有在 定位時才有意義,其他情況下返回0,即可。

根據上述邏輯可以得到複雜的**獲取控制邏輯,但是看一看extjs的

offsetattribute = /^((width|height)|(top|left))$/,

offsetunit = /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,

getattr: function(attr)

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;

},

利用正規表示式來代替跳轉判斷邏輯,很巧妙。

extjs正規表示式驗證

在ext中使用正規表示式驗證的方法 fieldlabel 員工號 name employee.empno regex w id employee.empno regextext 員工號只能由字母和數字組成!allowblank false ext.get startdt getvalue repla...

extjs正規表示式驗證

在ext中使用正規表示式驗證的方法 fieldlabel 員工號 name employee.empno regex w id employee.empno regextext 員工號只能由字母和數字組成!allowblank false ext.get startdt getvalue repla...

正規表示式應用

d 非負整數 正整數 0 0 9 1 9 0 9 正整數 d 0 非正整數 負整數 0 0 9 1 9 0 9 負整數 d 整數 d 非負浮點數 正浮點數 0 0 9 0 9 1 9 0 9 0 9 1 9 0 9 0 9 0 9 1 9 0 9 正浮點數 d 非正浮點數 負浮點數 0 0 9 0 ...