摘要：電視機頂盒開發總結針對東方有線機頂盒操作系統中內置的聯彤瀏覽器開發，總結一些自己在開發中遇到的問題和技巧。失去焦點事件同樣要避免使用。但是在電視機頂盒上，出現了能往下滾動，不能往上滾動的問題。

針對東方有線機頂盒UUTVOS操作系統中內置的聯彤瀏覽器web開發，總結一些自己在開發中遇到的問題和技巧。瀏覽器是基于Firefox的閹割版，所以開發中有一些莫名其妙的坑。已經嘗試過使用Vue開發機頂盒web項目，體驗較差：首次加載時間長、頁面卡頓。由于項目進度推進，當時沒有嘗試組件懶加載和路由懶加載處理，這樣做或許可以減少首次加載時間。推薦使用 JQuery 進行開發。

開發工具：WebStrom。它的Tools>Deployment可以配置連接遠程服務器。隨時上傳代碼。

開發中用到的技術：JQuery + Sass。

能用 HTML + CSS 呈現的東西，就不要用 JS 去動態控制。

避免使用“焦點”事件去觸發非必要的操作。

當某段 JS 代碼不運行的時候，試試給它加一個延時函數，遇到的問題都不再是問題。

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

標簽是不兼容的。加載從服務器請求到的 .html 請使用 JQuery 的 .load() 大法。

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

切換播放多個視頻，避免UI響應和視頻播放卡頓，“防抖動”你值得擁有。

我們的后臺是現成的，直接把代碼拷貝到服務器上，在機頂盒上就可以隨時預覽到項目。

WebStrom 的工具欄中的 Tools>Deployment 可以連接到配置遠程服務器上，每次 CTRL + S 會自動上傳項目文件,好用的不要不要的。墻裂推薦！

通過配置 WebStrom，可以監聽編譯 Sass 文件，CTRL + S 自動編譯就是這么方便。

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

如果在 WS 中使用了 Sass 或者 Less ，每次保存的時候，被編譯后的 CSS 文件是不會自動上傳到服務器上的，需要在 WS 里手動上傳。

機頂盒web開發官方文檔推薦用原生 JS 開發，目前來看的話，JQ 用起來方便一些，暫時沒有性能缺陷。

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

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

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

一個 Tab 欄下有6個選項，選項里面 HTML 結構基本都是相同的，如果你打算用 JS 復用相同結構的 HTML 代碼的話，趕緊停下，像我圖片上這樣老老實實的 copy 和 paste HTML代碼吧。不然切換 Tab 的時候，隨機的卡頓很惡心。

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

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

一定要避免使用"焦點事件"觸發相關操作，焦點事件是高頻率的系統事件，web在機頂盒運行時，焦點事件一般不受開發人員的絕對控制。“失去焦點”事件同樣要避免使用。

“焦點事件”與“上下左右按鍵事件”具有一定的耦合性，“焦點事件”使用不當，問題百出。

上下左右按鍵事件，一般都可以替換焦點事件。

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

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

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

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

機頂盒的可視區域是固定的，絕對定位是最省時省力的。

擁有絕對定位元素的父元素必須是 position:relative定位，這個是必須的！

多個塊級元素排列在同一行，考慮使用display:inline-block;，優于使用flaot:...浮動布局。

電視機的可視區域固定，整個頁面是不滾動的，業務場景中，頁面中的局部需要滾動：列表頁、詳情頁。

在PC上，給需要滾動的元素設置：overflow：scroll; 會出現滾動條，實現滾動。但是在電視機頂盒上，出現了：能往下滾動，不能往上滾動的問題。

解決辦法：給需要滾動的元素包裹一個 。并且必須設置display:block。；

    
      
需要滾動的內容
    
  

機頂盒瀏覽器的性能本來就很差，在同一個頁面的 Tab 上切換多個視頻播放，按鍵過快的情況下，UI上焦點連續切換過去很多個元素了，視頻的播放地址才挨個往過去切換，這個時候很容易造成卡頓或者瀏覽器假死。

防抖其實就是一個延時函數，可以想象成：刷卡上公交車，只要有人刷卡，司機就不能開車。

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