迅雷云播頁面重構心得

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

多終端html統(tǒng)一難實現(xiàn)難點現(xiàn)狀：

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

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

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

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

pc客戶端請看截圖：

網(wǎng)頁版請看截圖：

以播放頁內嵌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動態(tài)讀取瀏覽器可視化高度并賦值與外層容器class=”yb_c_wp”

高度自適應js代碼

function fn(){
var mainwrap = $(‘#mainwrap’); // 定義變量
window.onresize = function();{ // 調用onresize事件在窗口或框架被調整大小時發(fā)生
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動態(tài)獲取右側可變寬度

樣式表代碼：

.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事件在窗口或框架被調整大小時發(fā)生
var width_spread = $(window).width()-$(“.wp_navAside”).width(); // 獲取右側寬度=瀏覽器寬度-左側變化寬度（伸縮狀態(tài)）
$(width_box).width(width_spread); // 右側寬度賦值
};}
fn();

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

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

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

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

客戶端播放頁flash嵌套html優(yōu)化

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

demo1：播放器頁面

demo2：播放器頁面優(yōu)化

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

a) 空標簽空背景方法：

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

b) iframe方法：

內容模塊同級添加iframe結構：
<iframe src="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

結語：

工作的樂趣是需要自己創(chuàng)造的。樂趣何在？靠自己發(fā)現(xiàn)！為你的團隊提供更高效的解決方案，在工作中積累、思考，探索更好的規(guī)范、流程、工具、方法等等。分享是一種快樂！積極的心態(tài)讓我們永遠充滿活力！加油！