|
|
jQuery在設(shè)置透明度上是有問(wèn)題的，首先看一下其代碼：
Code
復(fù)制代碼 代碼如下:
// IE uses filters for opacity
if ( !jQuery.support.opacity && name == "opacity" ) {
if ( set ) {
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
elem.zoom = 1;
// Set the alpha filter to set the opacity
elem.filter = (elem.filter || "").replace( /alpha/([^)]*/)/, "" ) +
(parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
}
return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
(parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
"";
}
在正常情況下，使用filter設(shè)置透明度是沒(méi)有問(wèn)題的，然而如果我們的元素原先就已經(jīng)有了一個(gè)filter呢？假設(shè)原先是這樣的：
filter: AlphaImageLoader(src="...");
在執(zhí)行了jQuery的代碼后，自然會(huì)變成這樣：
filter: AlphaImageLoader(src="...");alpha(opacity=80)
注意到原來(lái)我們有一個(gè)分號(hào)了不？這樣就使alpha成了一條CSS規(guī)則，而不是filter的一部分
解決的方法也很簡(jiǎn)單，在jQuery源碼中再次將分號(hào)替換為空格即可
但是這同時(shí)也顯示了一個(gè)問(wèn)題，jQuery畢竟不是有非常良好的架構(gòu)作為基礎(chǔ)的庫(kù)，其替換性和擴(kuò)展性幾乎可以說(shuō)沒(méi)有，為了這么一個(gè)小問(wèn)題，除了改源碼我竟然想不出從外部切入的修改方案，如果是prototype框架，只要直接將setOpacity函數(shù)替換就行了，因此如果jQuery在發(fā)現(xiàn)是IE的情況下，可以調(diào)用另一個(gè)函數(shù)，而不是繼續(xù)在當(dāng)前函數(shù)中內(nèi)聯(lián)邏輯，我們的修改就會(huì)方便許多
以下是修改后的代碼
修改后的代碼
復(fù)制代碼 代碼如下:
// IE uses filters for opacity
if ( !jQuery.support.opacity && name == "opacity" ) {
if ( set ) {
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
elem.zoom = 1;
// Set the alpha filter to set the opacity
elem.filter = (elem.filter || "").replace( /alpha/([^)]*/)/, "" ).replace(';', ' ') +
(parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ");");
}
return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
(parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
"";
}
好了，介紹下新作
最近公司想把WEB系統(tǒng)做得像桌面一樣，這確實(shí)是個(gè)蠻瘋狂的想法，但是從我的角度來(lái)考慮，卻覺(jué)得即刺激又有趣，這是我能夠做到的事，同時(shí)又不是能夠輕松做到的事，而作為一個(gè)努力向著優(yōu)秀的方向前進(jìn)的程序員，只有不斷遭遇這種挑戰(zhàn)，才能慢慢成長(zhǎng)
因此在經(jīng)過(guò)了四天時(shí)間的設(shè)計(jì)和開(kāi)發(fā)之后，終于有了一個(gè)較為穩(wěn)定的版本，由于其功能尚未達(dá)到最初的規(guī)劃，因此稱之為0.8版本（此次決定使用簡(jiǎn)單的版本管理，即所有小數(shù)點(diǎn)后不是0的版本都是beta版，直到1.0、2.0之類才稱為穩(wěn)定正式版）
我想從截圖上已經(jīng)看不出這套框架的效果了，因此在上傳的壓縮包中包含了一個(gè)Demo.htm頁(yè)面，有興趣的朋友可以下載以后親自試用，而在這里僅放出框架的類圖以供參考
總體思路
將WEB做成桌面形式從一開(kāi)始就是一種挑戰(zhàn)，這種挑戰(zhàn)對(duì)我而言的樂(lè)趣已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)了審視其是否合理的理智……
由于桌面的復(fù)雜性，導(dǎo)致必須使用面向?qū)ο蟮乃枷雭?lái)進(jìn)行構(gòu)建，而面向思想中最重要的就是職責(zé)明確，在這樣的思想的指導(dǎo)下，衍生出了上圖所示的框架圖
首先是所有控件的基類Control，只提供了生命周期的管理，即render和dispose，以及事件的管理，即bind、unbind和trigger
在Control的繼承體系中，使用了類似ASP.NET的模型，本身render和dispose方法不提供重寫（就如Page類的ProcessRequest方法不會(huì)讓你隨意重寫），而是在適當(dāng)?shù)纳芷诘墓?jié)點(diǎn)開(kāi)放出事件以供重寫，這就包括了rendering、rendered、disposing、disposed四個(gè)最基本的事件，而其后的所有控件都是通過(guò)對(duì)這4個(gè)方法的重寫來(lái)完成功能
隨后的TaskBar表示任務(wù)欄，TaskIcon表示任務(wù)欄上的圖標(biāo)，這并沒(méi)有什么可說(shuō)，TaskBar只負(fù)責(zé)從容器的角度對(duì)所有的TaskIcon進(jìn)行管理，而TaskIcon則負(fù)責(zé)具體的展現(xiàn)
值得一提的是GroupTaskIcon，事實(shí)上其內(nèi)部維護(hù)的是一系列的TitledTaskIcon，以一種“組合”的方式，使得GroupTaskIcon不需要再針對(duì)每一個(gè)窗口重新制定HTML表現(xiàn)
在Window部分，原先的設(shè)定是不同的Window類有不同的加載內(nèi)容的方法，如：
RemoteWindow從遠(yuǎn)程加載內(nèi)容
ElementWindow從具體的HTML元素加載內(nèi)容
然而這樣就不得不面臨一個(gè)問(wèn)題，Window同時(shí)承載了行為、表現(xiàn)和容器的功能，因此n種行為和m種表現(xiàn)將生成n*m個(gè)子類，大大提高了控件體系的復(fù)雜度，如：
TabRemoteWindow, TabElementWindow
GorupRemoteWindow, GroupElementWindow
顯然這4個(gè)類之間有著太多的重復(fù)性，不利于代碼的復(fù)用，更不利于使用者的選擇。
在這樣的考慮之下，我將Window的“表現(xiàn)”部分分離了出來(lái)，形成了Renderer，Renderer負(fù)責(zé)在Window中渲染內(nèi)容，這樣就可以使用一系列的Renderer和一系列的Window的組合來(lái)進(jìn)行開(kāi)發(fā)。使用組合而非繼承也是面向?qū)ο蟮囊淮笤瓌t。
具體的實(shí)現(xiàn)細(xì)節(jié)和更深一步的結(jié)構(gòu)設(shè)計(jì)，現(xiàn)在也沒(méi)有太好的頭緒，還請(qǐng)?jiān)试S我下一次再通過(guò)博客具體說(shuō)明了
版本計(jì)劃
當(dāng)前發(fā)布的是0.8版本，事實(shí)上已經(jīng)包含了部分0.9版本的功能，我將在0.9版本實(shí)現(xiàn)以下內(nèi)容：
1、添加Timer類執(zhí)行定時(shí)計(jì)劃
2、添加Behavior庫(kù)分離Window的行為
3、形成常量庫(kù)，用于獲取 等復(fù)雜的字符串
4、美化TaskBar及GroupTaskIcon
5、添加ExUI.Overlay提供遮罩層
0.9版本將在10月5日完成，算是給自己畢業(yè)后的第一個(gè)生日的禮物
隨后的1.0版本將是一個(gè)穩(wěn)定的版本，同時(shí)提供以下內(nèi)容的改進(jìn)：
1、添加DOM庫(kù)生成DOM元素
2、Desktop支持ViewPort控制所有元素的位置以適應(yīng)窗口大小的改變
3、DockWindow可收縮在桌面的四邊，當(dāng)鼠標(biāo)移動(dòng)到一空范圍內(nèi)時(shí)自動(dòng)出現(xiàn)（類似QQ）
1.0版本的發(fā)布時(shí)間現(xiàn)在無(wú)法確定，因?yàn)槲乙呀?jīng)看到了接下去半年時(shí)間的長(zhǎng)期加班生活……
下載
壓縮包中包含了Demo.htm演示頁(yè)面，Script文件夾下是所有需要使用的JS文件，其中除了jquery和json2以外都屬于本次框架，Style文件夾下的core.css即為本次框架的核心CSS文件
DOC文件夾下是框架的文檔，由jsdoc toolkit生成
由于原本是一個(gè)給公司演示的DEMO，但涉及到公司的業(yè)務(wù)數(shù)據(jù)又不能直接把演示頁(yè)面拿出來(lái)，因此這里的Images文件夾等有些混亂，還請(qǐng)見(jiàn)諒
http://xiazai.jb51.NET/200910/yuanma/ExUI.rar
還請(qǐng)嘗試過(guò)的朋友給個(gè)意見(jiàn)，這樣的框架，是不是值得繼續(xù)開(kāi)發(fā)，或者走開(kāi)源的道路是不是有那么一點(diǎn)希望，已經(jīng)工作快半年了，也希望自己可以有真正拿得出手的作品 。
JavaScript技術(shù)：學(xué)習(xí)JS面向?qū)ο蟪晒?借國(guó)慶發(fā)布個(gè)最新作品與大家交流，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
