电视机顶盒web开发总结，避免踩坑。

摘要：电视机顶盒开发总结针对东方有线机顶盒操作系统中内置的联彤浏览器开发，总结一些自己在开发中遇到的问题和技巧。失去焦点事件同样要避免使用。但是在电视机顶盒上，出现了能往下滚动，不能往上滚动的问题。

针对东方有线机顶盒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左右比较合适。
    }
});