摘要：電視機(jī)頂盒開(kāi)發(fā)總結(jié)針對(duì)東方有線機(jī)頂盒操作系統(tǒng)中內(nèi)置的聯(lián)彤瀏覽器開(kāi)發(fā)，總結(jié)一些自己在開(kāi)發(fā)中遇到的問(wèn)題和技巧。失去焦點(diǎn)事件同樣要避免使用。但是在電視機(jī)頂盒上，出現(xiàn)了能往下滾動(dòng)，不能往上滾動(dòng)的問(wèn)題。

針對(duì)東方有線機(jī)頂盒UUTVOS操作系統(tǒng)中內(nèi)置的聯(lián)彤瀏覽器web開(kāi)發(fā)，總結(jié)一些自己在開(kāi)發(fā)中遇到的問(wèn)題和技巧。瀏覽器是基于Firefox的閹割版，所以開(kāi)發(fā)中有一些莫名其妙的坑。已經(jīng)嘗試過(guò)使用Vue開(kāi)發(fā)機(jī)頂盒web項(xiàng)目，體驗(yàn)較差：首次加載時(shí)間長(zhǎng)、頁(yè)面卡頓。由于項(xiàng)目進(jìn)度推進(jìn)，當(dāng)時(shí)沒(méi)有嘗試組件懶加載和路由懶加載處理，這樣做或許可以減少首次加載時(shí)間。推薦使用 JQuery 進(jìn)行開(kāi)發(fā)。

開(kāi)發(fā)工具：WebStrom。它的Tools>Deployment可以配置連接遠(yuǎn)程服務(wù)器。隨時(shí)上傳代碼。

開(kāi)發(fā)中用到的技術(shù)：JQuery + Sass。

能用 HTML + CSS 呈現(xiàn)的東西，就不要用 JS 去動(dòng)態(tài)控制。

避免使用“焦點(diǎn)”事件去觸發(fā)非必要的操作。

當(dāng)某段 JS 代碼不運(yùn)行的時(shí)候，試試給它加一個(gè)延時(shí)函數(shù)，遇到的問(wèn)題都不再是問(wèn)題。

CSS布局推薦 position:absolute;進(jìn)行定位，配合 display:inline-block;使用更佳。

標(biāo)簽是不兼容的。加載從服務(wù)器請(qǐng)求到的 .html 請(qǐng)使用 JQuery 的 .load() 大法。

overflow:scroll，遙控器按鍵只能往下滾，不能往上滾。

切換播放多個(gè)視頻，避免UI響應(yīng)和視頻播放卡頓，“防抖動(dòng)”你值得擁有。

我們的后臺(tái)是現(xiàn)成的，直接把代碼拷貝到服務(wù)器上，在機(jī)頂盒上就可以隨時(shí)預(yù)覽到項(xiàng)目。

WebStrom 的工具欄中的 Tools>Deployment 可以連接到配置遠(yuǎn)程服務(wù)器上，每次 CTRL + S 會(huì)自動(dòng)上傳項(xiàng)目文件,好用的不要不要的。墻裂推薦！

通過(guò)配置 WebStrom，可以監(jiān)聽(tīng)編譯 Sass 文件，CTRL + S 自動(dòng)編譯就是這么方便。

喜歡 VSCode 的話，未嘗不可，或許 VSCode 里也有這些功能插件，我沒(méi)去折騰罷了。

如果在 WS 中使用了 Sass 或者 Less ，每次保存的時(shí)候，被編譯后的 CSS 文件是不會(huì)自動(dòng)上傳到服務(wù)器上的，需要在 WS 里手動(dòng)上傳。

機(jī)頂盒web開(kāi)發(fā)官方文檔推薦用原生 JS 開(kāi)發(fā)，目前來(lái)看的話，JQ 用起來(lái)方便一些，暫時(shí)沒(méi)有性能缺陷。

Less、Sass 兩個(gè)都大愛(ài)。變量的威力大大的，就算美工切得是1080p機(jī)器的圖，我拿來(lái)布局到720p上，利用 Sass 的變量和計(jì)算特性，非常容易控制CSS中的屬性值。

做列表渲染的時(shí)候用到了 art-template，騰訊出的一個(gè)模板引擎，參考它的文檔，還是很容易上手的。官方文檔。

機(jī)頂盒瀏覽器的性能非常低，如果還要做視頻播放的話，JS 可發(fā)揮的空間相當(dāng)有限。

一個(gè) Tab 欄下有6個(gè)選項(xiàng)，選項(xiàng)里面 HTML 結(jié)構(gòu)基本都是相同的，如果你打算用 JS 復(fù)用相同結(jié)構(gòu)的 HTML 代碼的話，趕緊停下，像我圖片上這樣老老實(shí)實(shí)的 copy 和 paste HTML代碼吧。不然切換 Tab 的時(shí)候，隨機(jī)的卡頓很惡心。

類(lèi)似 $(id).css({"backgroundImage":"url("...")"}) 和 $(id).attr({"src":"./*.jpg"}) 這樣的在 JS 里面控制 UI 顯示層面的操作要避免，盡量直接在 HTML 中完成，最多能接受這個(gè)操作： $(id).addClass()。機(jī)頂盒瀏覽器就是這么傲嬌。（這是我試出來(lái)的，至于JQ操作性能方面的差異本質(zhì)還是需要研究的。）

機(jī)頂盒web中按鈕的尺寸一般都很大，按鈕背景圖這些東西，就不要在 JS 中去操作，如果播放視頻引起了性能高損耗，這個(gè)時(shí)候web中的UI卡的你一愣一愣的。

一定要避免使用"焦點(diǎn)事件"觸發(fā)相關(guān)操作，焦點(diǎn)事件是高頻率的系統(tǒng)事件，web在機(jī)頂盒運(yùn)行時(shí)，焦點(diǎn)事件一般不受開(kāi)發(fā)人員的絕對(duì)控制?！笆ソ裹c(diǎn)”事件同樣要避免使用。

“焦點(diǎn)事件”與“上下左右按鍵事件”具有一定的耦合性，“焦點(diǎn)事件”使用不當(dāng)，問(wèn)題百出。

上下左右按鍵事件，一般都可以替換焦點(diǎn)事件。

a:focus {} 這個(gè)CSS選擇器可以放心的使用。

機(jī)頂盒內(nèi)置的瀏覽器很惡心啊，閹割版的就算了，一些邏輯上的東西跟PC上也不同。

一些操作無(wú)論怎么寫(xiě)都不運(yùn)行，或者拿不到值（null），特別是在頁(yè)面加載、父子頁(yè)面跳轉(zhuǎn)這些場(chǎng)景下。給它加個(gè) setTimeout(function(), ms) 就搞定了，百試百靈，一般人我都不告訴他^_^。

$(document).keydown(function () {
    if (event.which  === 4097) {
        var distance = $("#list").scrollTop();
        sessionStorage.removeItem("listScrollTopVal");
        sessionStorage.setItem("listScrollTopVal", JSON.stringify(distance));
        // 按下確定鍵后，把獲得焦點(diǎn)的元素的 id 保存到 sessionStorage中，
        // 這個(gè)時(shí)候就要在外邊加一個(gè)延時(shí)函數(shù)，甚至可以將時(shí)間設(shè)置成 0ms 也行。
        setTimeout(function () {
            sessionStorage.removeItem("listFocusItemId");
            sessionStorage.setItem("listFocusItemId",JSON.stringify(document.activeElement.id));
        }, 100);
    }
});

機(jī)頂盒的可視區(qū)域是固定的，絕對(duì)定位是最省時(shí)省力的。

擁有絕對(duì)定位元素的父元素必須是 position:relative定位，這個(gè)是必須的！

多個(gè)塊級(jí)元素排列在同一行，考慮使用display:inline-block;，優(yōu)于使用flaot:...浮動(dòng)布局。

電視機(jī)的可視區(qū)域固定，整個(gè)頁(yè)面是不滾動(dòng)的，業(yè)務(wù)場(chǎng)景中，頁(yè)面中的局部需要滾動(dòng)：列表頁(yè)、詳情頁(yè)。

在PC上，給需要滾動(dòng)的元素設(shè)置：overflow：scroll; 會(huì)出現(xiàn)滾動(dòng)條，實(shí)現(xiàn)滾動(dòng)。但是在電視機(jī)頂盒上，出現(xiàn)了：能往下滾動(dòng)，不能往上滾動(dòng)的問(wèn)題。

解決辦法：給需要滾動(dòng)的元素包裹一個(gè) 。并且必須設(shè)置display:block。；

    
      
需要滾動(dòng)的內(nèi)容
    
  

機(jī)頂盒瀏覽器的性能本來(lái)就很差，在同一個(gè)頁(yè)面的 Tab 上切換多個(gè)視頻播放，按鍵過(guò)快的情況下，UI上焦點(diǎn)連續(xù)切換過(guò)去很多個(gè)元素了，視頻的播放地址才挨個(gè)往過(guò)去切換，這個(gè)時(shí)候很容易造成卡頓或者瀏覽器假死。

防抖其實(shí)就是一個(gè)延時(shí)函數(shù)，可以想象成：刷卡上公交車(chē)，只要有人刷卡，司機(jī)就不能開(kāi)車(chē)。

$("#nav--second").keydown(function(event){
    if(event.which === 39) {
        // 這里的EVAN是一個(gè)全局的命名空間，EVAN.timer是一個(gè)全局變量
        clearTimeout(EVAN.timer);
        EVAN.timer = setTimeout(function () 
        create(EVAN.homePageVideoUrlArr[2]);
        }, EVAN.gap);  // 時(shí)間1-2s左右比較合適。
    }
});