迅雷雲播頁面重構心得

隨着迅雷雲播客戶端2.0版本的上線，迅雷雲播實現了（網頁版、PC客戶端）共用一套html結構的目標！感謝項目組，感謝擊哥，讓自己有機會負責雲播各終端的重構工作。從重構的角度來講，我們做着：精度還原設計稿，代碼的標準化、模塊化、語義化，爲開發童鞋提供代碼註釋，學習應用Javascript提高輸出頁面的實現效果，圖片優化等等工作。

多終端html統一難實現難點現狀：

1. 技術上：方案需求方的不同，設計師的不同，設計稿結構差異，歷史遺留版本，工作難統一。
2. 自身：項目團隊不同，重構負責人不同，開發童鞋不同。

迅雷雲播 可以搜索關鍵字：雲點播，雲播放，雲播特權。

<meta name="keywords" content="雲點播 雲播放 視頻 在線 免下載 播放 迅雷 免費 離線下載 迅雷客戶端 快速播放 BT種子 下載鏈接 轉碼 iphone ipad 安卓 破解版"/>

<meta name="description" content="迅雷雲播是迅雷公司推出的BT種子、視頻下載鏈接在線快速播放的服務，有BT種子、視頻下載鏈接即可快速播放，支持多瀏覽器、蘋果和安卓系統、ipad等移動設備"/>

pc客戶端請看截圖：

網頁版請看截圖：

以播放頁內嵌html結構爲例講解雲播項目頁面重構方面的知識點

需求分析：

1. 1、二欄寬高自適應佈局
2. 2、左側nav固定寬度可伸縮，右側自適應屏幕寬度。
3. 3、flash嵌套html應注意
4. 4、背景圖片清緩存問題

二欄佈局

二欄佈局的結構我們一般會這樣寫：

<div class="yb_c_wp" id="mainwrap">
   <div class="yb_cloud_play">
        <div class="yb_imgbox">
            <div>播放頁部分</div>
        </div>
    </div>
    <div class="wp_navAside">
        <div>左邊欄內容</div>
    </div>
</div>

高度自適應瀏覽器全屏解決方法：

a)、用樣式表控制

.yb_c_wp{ position: absolute; top: 0; right: 0; bottom: 0; left：0; height: 100%; overflow: hidden; background:#232632; }

以上代碼使最外層容器絕對定位之後，上下左右四邊都與瀏覽器可視化邊框貼緊，從而做到了適配各種屏幕，但此方法不適用於ie低端瀏覽器。

b)、用js動態讀取瀏覽器可視化高度並賦值與外層容器class="yb_c_wp"

高度自適應js代碼

function fn(){ var mainwrap = $('#mainwrap'); // 定義變量 window.onresize = function();{ // 調用onresize事件在窗口或框架被調整大小時發生 var wHeight = $(window).height();// 獲取瀏覽器可是化窗口高度 mainwrap.height(wHeight);// 外層容器高度賦值 };} fn();

考慮兼容高低端瀏覽器，a方案不適用，b方案可以使用用

二欄寬度自適應佈局（左側定寬）方法：

方法一：負邊距 樣式表代碼：

.wp_navAside{ float:left; clear:left; width:144px; height:100%; }; .yb_cloud_play{ float:right; width:100%; margin-left:-144px } .yb_imgbox{ margin-left:144px };

方法二：絕對定位用Js動態獲取右側可變寬度 樣式表代碼：

.wp_navAside { position: absolute; bottom: 0; left: 0; top: 0; width: 144px; height: 100%; background: #232632; border-right:1px solid #000000; } .yb_cloud_play{ position: absolute; height: 100%; width: 100%; }; .yb_imgbox{ position: absolute; bottom: 0; left: 144px; top: 0; right:0; }

右側寬度取值js代碼

function fn(){ var mainwrap = $('#mainwrap'); // 定義變量 var width_box = $('#XL_CLOUD_VOD_PLAYER'); // 定義變量 window.onresize = function();{ //調用onresize事件在窗口或框架被調整大小時發生 var width_spread = $(window).width()-$(".wp_navAside").width(); // 獲取右側寬度=瀏覽器寬度-左側變化寬度（伸縮狀態） $(width_box).width(width_spread); // 右側寬度賦值 };} fn();

方案一、二實現效果無兼容性差異。方案一簡單易懂的css樣式表，但無法滿足播放頁右側單一內容撐開全屏的要求，這裏推薦使用方案二。

（綜上所述：播放頁自適應寬高二欄佈局我們推薦使用的最終方案爲：方案b+方案二 ）

nav欄伸縮問題，主頁面海報右側內容間距自適應各種分辨率

關於左側欄伸縮解與右側海報內容間距匹配不同分辨率問題，別無它法爲兼容低端瀏覽器，我們只能通過添加不同的全局類名控制局部變化。這裏需要細心，耐心整理各種分類情況!(以常用分辨率劃分，右側內容間距我們需要考慮的情況=2（伸開/收縮狀態）*【3（好友/海報/縮略圖）*【（1920）+（1440）+（1366）+（1280）+（1010）+（990）】】)

客戶端播放頁flash嵌套html優化

查看效果請下載demo用瀏覽器打開。

demo1：播放器頁面

demo2：播放器頁面優化

內容在flash上的幾種方法總結

a) 空標籤空背景方法：

定位a標籤到對應flash上邊某一位置 a{ background:url(about:block) no-repeat; // 對標籤背景如下設置 zoom:100; }

b) iframe方法：

內容模塊同級添加iframe結構：
<iframe src="http://cued.xunlei.com/transparent.html"> 
//transparent.html爲空文件，iframe需有背景顏色，ie不支持透明顏色iframe結構在flash上.
</iframe>

背景圖片清緩存問題

同一套結構，背景圖片清緩存你還在手動添加版本號嗎？如果是，那麼有點落後了。用less和sass的變量幫你一步修改項目中所有版本號。既方便,又好維護！

例子： @version: ~` "" `; // 版本號 @suffix: ~` "?" + "@{version}" `; // 後綴名 @yb_bgimage: ~` "../img/wp_bg.png" + "@{suffix}" `; .yb_bgimage{background:url(@yb_bgimage) no-repeat -2px -95px;}

學習請查看： Less   Sass

結語：

工作的樂趣是需要自己創造的。樂趣何在？靠自己發現！爲你的團隊提供更高效的解決方案，在工作中積累、思考，探索更好的規範、流程、工具、方法等等。分享是一種快樂！積極的心態讓我們永遠充滿活力！加油！