ntv.js框架源码解读 - 4navigation.js _焦点

2019独角兽企业重金招聘工程师标准>>>
【ntv.js框架源码解读 - 4navigation.js】.js源代码：
ntv.类，处理页面焦点移动和确认、刷新等操作动作。
在讲解框架处理焦点移动前，先讲解下机顶盒上焦点移动的工作原理，以便开发者能更好的了解框架采用这种方式的目的和优点。
机顶盒浏览器上页面的焦点移动(控制)原理：
在PC平台上我们可以通过鼠标来直观的操作页面，而在机顶盒上采用的是遥控器操作，这就面临像页面滚动、页面元素选择等问题。在机顶盒平台上，解决这部分问题需要浏览器与页面通过一些代码来配合处理。下面将详细讲解这部分处理：
?1. 焦点选择?
常规的处理方法是通过在页面代码上将希望获取焦点的元素包裹在标签内，如文字、图片。浏览器可识别出这些元素，并且通过这些元素在页面的距离位置来响应遥控器的焦点移动操作。
代码示例A：
Example.list{margin:100px 100px;}.list ul{clear: both;}.list li{float: left; width: 100px; height: 100px; margin: 50px 50px;}

文章插图
文章插图
文章插图
文章插图

文章插图
文章插图
文章插图
文章插图

页面效果A-1 ， SHDV中间件浏览器、NGB-H规范中间件浏览器、PC平台( Chome)：
页面效果A-2 ，中间件浏览器：

文章插图
示例A的代码在机顶盒浏览器上运行的结果如页面效果A-1 和页面效果A-2 。我们也可以看出基本除了获取焦点元素的边框颜色和大小不一样，其他都相同。这时我们通过遥控器按键上/下/左/右就可以移动焦点了，并且按确认键浏览器就会打开当前焦点所在的元素的href属性值内的链接。
实际业务情况：
在实际的应用设计时，界面设计可能要求如下需求A：
1. 要求所有机顶盒下获取焦点的元素，边框颜色大小统一。（遵循界面风格统一的原则）
解决方案：通过代码测试，在、SHDV、NGB-H中间件浏览器下不支持 a:focus{} 伪类来自定义焦点样式，也没有私有API接口来自定义浏览器焦点的颜色。无法实现。
2. 要求采用换图的方式（1个图片有2种颜色，获取焦点一种，失去焦点一种）来表示当前获取的焦点，不使用浏览器默认的焦点边框。（采用更美观、友好的设计）
解决方案：可以通过标签的和事件来实现当元素获取焦点后更换子元素
的 src属性值。但是在SHDV、NGB-H中间件浏览器下无法禁用浏览器默认的焦点边框。无法实现。
代码示例B：

Example.list{margin:50px 100px;}.list ul{clear: both;}.list li{float: left; width: 100px; height: 100px; margin: 50px 50px;}.list li a{display: block; width: 100px; height: 100px;}.list .item-2{margin-top:80px;}.list .item-4{margin-left:80px;}.list .item-5{margin-left:20px;}



文章插图





文章插图





文章插图





文章插图





文章插图





文章插图





文章插图





文章插图

页面效果B ，中间件浏览器：
示例B的代码在机顶盒浏览器上运行的结果如页面效果B 。这时我们通过遥控器按键上/下/左/右来移动焦点，你会发现下面2种情况：
1. 当焦点元素1往下按，焦点会跑到7（而不4），往右按会跑到3（而不是2）。与预期焦点移动动作不一致。

文章插图
2. 当焦点元素2往下按，焦点会跑到5 ，往右会跑到3 ，往左会跑到1 。与预期焦点移动动作一致。
实际业务情况：
在实际的应用设计时，对于用户的操作，界面上的响应可能有如下需求B：
1. 当前元素焦点在1 ，往下是4 ，往右是2 ，往左不动，往上不动。
解决方案：浏览器的默认焦点移动与需求不符。可以实现的方式是通过获取遥控器上/下/左/右事件来动态给指定元素设置 .focus() 事件。
2. 当前元素焦点在2 ，往下是5 ，往右是3 ，往左是1 ，往上不动。
解决方案：浏览器的默认焦点移动与需求一致。
?2. 页面滚动?
在机顶盒上，由于操作的不便捷性和用户视觉方面的考虑，页面整幅的上下移动（滚动）操作没有，页面都是按照一屏来设计。但是在涉及图文类展示时，如果内容超过一屏，也是需要通过上下滚动的方式来读取过长的图文内容。在PC平台浏览器上如果内容过长，浏览器默认会显示滚动条，用户可以通过拖拉滚动条来实现阅读，但在机顶盒上我们之前提到了设计都是一屏的，所以需要开发者通过编写监听遥控器按键动作来实现内容容器的移动。
页面效果C-1 ，中间件浏览器：

文章插图
如页面效果C-1显示，机顶盒上是通过移动内容区域容器来实现过长内容的展示，用户可以通过遥控器上/下键来阅读内容。
ntv.js框架如何处理这些问题：