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