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