关于前端:原生TV端焦点处理框架-focusjs-V106-前端-JS

这个框架使用十分的简略，简略应用就 3 步，实用于用原生写 TV 端需要的前端，即便素来没开发过 TV 端的看完根本应用也能够把握, 十分好用！
github 链接：https://github.com/simpleRobort/TV-Focus.js (感觉不错的麻烦 github 给个 star，万分感激)

I. 根本应用

1. 事后写好页面，保障你所有可能获取焦点的 dom 元素领有一个对立结尾的 id 个别为 “item?”, 其中? 为数字，从 0 开始, 上不封顶

        <!--     保障元素领有定位     -->
<div class="dom" id="item0" style="position: absolute;left:200px;top:200px;width:150px;height:150px"> 这是第个 0dom</div>
<div class="dom" id="item1" style="position: absolute;left:400px;top:200px;width:150px;height:150px"> 这是第个 1dom</div>
<div class="dom" id="item2" style="position: absolute;left:600px;top:200px;width:150px;height:150px"> 这是第个 2dom</div>
<div class="dom" id="item3" style="position: absolute;left:200px;top:400px;width:150px;height:150px"> 这是第个 3dom</div>
<div class="dom" id="item4" style="position: absolute;left:400px;top:400px;width:150px;height:150px"> 这是第个 4dom</div>
<div class="dom" id="item5" style="position: absolute;left:600px;top:400px;width:150px;height:150px"> 这是第个 5dom</div>

对应 css:

        .focus {border: 2px solid #0f0f0f; /* 这里就是获取焦点的实现原理了，Focus.js 会给获取焦点的元素增加一个名字叫做 focus 的 class 类 */}

2. 从源码里下载 focus.js( 点击下载 )，在你的 html 页面中引入

<script src="./focus.js"></script>

3. 在引入之后创立一个 script 标签，new 一个 FOCUS 对象并且传入参数

<script>
        var vm = new FOCUS({
            focusId: 'item3', // 页面首先获取焦点的 dom 元素的 Id, 不传默认 item0
            event: {keyOkEvent: function (focusId) {console.log("点击了确认键，以后取得焦点的索引为：" + focusId)
                    switch (focusId) {
                        case 0:
                           
                            break
                    }
                },
                keyBackEvent: function (focusId) {console.log("点击了返回键，以后取得焦点的索引为：" + focusId)
                    switch (focusId) {
                        case 6:
                        case 7:
                            
                            break
                    }
                }
            }
        })

</script>

到这里最简略的焦点挪动曾经被增加好了，你就能够关上页面看成果了

根本应用测试地址

II. 进阶应用

1. 应用后辈选择器显示暗藏图片与 dom 元素

根本应用里咱们只是简略的给 focus 增加了一个边框，十分的简便，然而当咱们须要通过焦点与否显示不同的图片的时候，只是简略的给 focus 增加边框并不够用，这时候就须要 css 的后辈选择器了

css:

.dom .select {
  position: absolute; /* 须要增加定位，不然会被未选中显示的内容挤下去 */
  display: none; /* 未被选中时暗藏选中才显示的内容 */
}

.dom .unselect {display: block; /* 未获取焦点时显示没被选中须要显示的内容 */}

.focus .select {display: block; /* 获取焦点时显示被选中的须要显示的内容 */}

.focus .unselect {visibility: hidden; /* 获取焦点时暗藏未被选中须要显示的内容 */}

html:

<!-- 以下图片为本地数据，如复制应用请批改 -->
<div id="bg">
    <div class="dom" id="item0" style="position: absolute;left:890px;top:100px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/gengduo.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/gengduo.png" alt=""></div>
    </div>
    <div class="dom" id="item1" style="position: absolute;left:200px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/1.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/1.png" alt=""></div>
    </div>
    <div class="dom" id="item2" style="position: absolute;left:500px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/2.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/2.png" alt=""></div>
    </div>
    <div class="dom" id="item3" style="position: absolute;left:800px;top:200px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/3.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/3.png" alt=""></div>
    </div>
    <div class="dom" id="item4" style="position: absolute;left:200px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/4.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/4.png" alt=""></div>
    </div>
    <div class="dom"  id="item5" style="position: absolute;left:500px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/5.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/5.png" alt=""></div>
    </div>
    <div class="dom"  id="item6" style="position: absolute;left:800px;top:400px;width:150px;height:150px">
        <div class="unselect"><img src="../image/unselect/5.png" alt=""></div>
        <div class="select" style="left:0px;top:0px;"><img src="../image/select/5.png" alt=""></div>
    </div>
</div>

js:

   var vm = new FOCUS({
        focusId: 'item3', // 页面首先获取焦点的 dom 元素的 Id
        event: {keyOkEvent: function (focusId) {console.log("点击了确认键，以后取得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 0:

                        break
                }
            },
            keyBackEvent: function (focusId) {console.log("点击了返回键，以后取得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 6:
                    case 7:

                        break
                }
            }
        }
    })

应用后辈选择器示例地址

2. 应用强制焦点变换 (forceMove)

实用的场景个别有两个：

1. 你须要这个元素按某一个方向键不切换焦点或者切换到本人想要的焦点（哪怕隔了一座山哈哈）

2. 你的 ui 设计稿十分的不法则（焦点默认的逻辑无奈满足需要，焦点默认挪动的逻辑是以 dom 的宽高地位发射一道射线，第一个触碰到的 dom 元素就会成为下一个焦点）

显然没有别的元素的话，这个两个元素无奈互相跳转，有人问我为什么不把断定范畴改大一点，我也试过，天然是解决了，然而有更多的问题呈现了，我这就不一一举例了哈哈，
回到正题，应用办法很简略，只须要在 new FOCUS 传入的对象里新增一个属性 focusMove 即可

var vm = new FOCUS({
            focusId: 'item3',
            forceMove: {// 须要被强制的焦点 id:[ 上，左，下，右]
                item0: [-1,-1,"item1",-1],
                item1: ["item0",-1,-1,-1],
            }
        })

forceMove 也是一个对象，须要传入属性，属性值为一个数组，顺次为方向键上左下右，参数有三种取值，如下

3. 事件处理 (event)

tv 端除了上下左右方向键与数字键，还有其余的事件，这里也提供了 api

 var vm = new FOCUS({
        focusId: 'item3',
        event: {keyOkEvent: function (focusId) {console.log("点击了确认键，以后取得焦点的索引为：" + focusId)
                switch (focusId) {
                    case 0:

                        break
                }
            },
            changeIndexBeforeFind: function (dir,focusId) {// 两个传参 (dir 代表方向：上左下右顺次为 0123, 以后焦点 id)
                // Focus 会在主动寻找下一个焦点前触发这个事件，如果这个函数返回了一个指定索引
                // 那么框架就不会浪费时间去寻找下一个焦点，间接应用你返回的索引
                // 例：if (dir == 3 && focusId == 0) {return 2} 
                // 当在焦点索引为 0 的 dom 按下 右方向键，返回一个索引 2，框架会放弃计算
                // 间接让索引为 2 的获取焦点
            },
            changeIndexAfterFind: function (dir,focusId,nextId) {// 三个传参 ( 前两个同上，nextId 为计算实现的焦点，如果没有适合的焦点就会返回 -1)
                 // Focus 会在寻找完焦点后触发这个事件，如果这个函数返回了一个指定索引
                 // 那么框架就摈弃原本应该成为焦点的 nextId，间接应用你返回的索引
           
             },
            
        }
    })

4. 二级以上页面 (pageState)

当页面有若干个焦点是在触发某一个事件才可能被获取焦点的，在事件未触发时不应该被获取焦点，如果通过下面的强制事件频繁的增加 -2，那可太麻烦了，这时候就 pageState 就呈现了

应用办法：

 var vm = new FOCUS({
        pageState: {// 非凡焦点: 页面索引 ( 默认为 1)
                item4: 2,
                item5: 2
            },
    })

5. 办法 (methods)

为了尽量使页面的外围代码保留在 FOCUS 传参内，增加了相似 vue 的 methods 来不便代码治理

应用办法：

 var vm = new FOCUS({
        methods: {handleTest: function () {console.log("你点击了 methods")
                    }
                },
         event: {keyOkEvent: function (focusId) {this.handleTest()
                  }
              }
    })

传参时传入一个 methods 对象，用来保留办法，this 指向 Focus，也通过 this. 办法名来调用 methods 外部办法

methods 示例地址

5. 暗焦点 (darkFocus)

tv 端常常会有一个需要，页面上会有多个焦点，比如说一个节目，你可能会须要其余的焦点来示意以后所属于的分类，咱们称之为暗焦点

 var vm = new FOCUS({darkFocus:[[1,0,2,3,4],[5,6,7,8]], // 暗焦点列表一个数组蕴含多个数组，参数为 id 后的索引，代表这几个 dom 为一块暗焦点，并且数组第一个索引为默认选中的暗焦点
        darkGroup:[true,true], // 长度与 darkFocus 对应，代表每次进入暗焦点列表时，是否始终让这个列表的暗焦点被选中
        darkClass: "active", // 暗焦点被增加的 class , 默认就是 active
        event: {darkFocusEvent: function (id) {
                // 你有可能会须要在焦点切换时依据以后的分类渲染新数据，// 咱们心愿你应用的是这个事件而不是 focusEvent
                // 这是为了防抖, 在暗焦点没扭转时反复获焦不会反复触发这个事件
                console.log("获取暗焦点",id) 
            },
            undarkFocusEvent: function (id) {console.log("失落暗焦点",id)
            },
            focusEvent: function (id) {console.log("获取焦点",id)
            },
            unfocusEvent: function (id) {console.log("失落焦点",id)
            },
        }
    })

6. 使用各 api 实现一个 tv 端常见 demo (demo)

tv 最多的就是多级栏目的需要，在焦点切换时，对应的子列表，子节目都要发生变化，本文章次要介绍框架的应用，
故具体内容可下载源码与 focus 文件理解

demo 地址

7. 生命周期 (生命周期)

按目前的需要引入了一个初始创立时的生命周期 created

应用形式:

 var vm = new FOCUS({created: function (next) {this.addDiv()
             next() // 必须调用，不调用无奈库就不执行初始化},
         methods: {addDiv: function () {var div = document.createElement("div")
                 div.classList = "dom"
                 div.id = "item6"
                 var newContent = document.createTextNode("生命周期增加的 dom");
 
                 div.appendChild(newContent);
 
                 document.body.appendChild(div);
             }
         }
     })

demo 地址

III new FOCUS 传参

var vm = new FOCUS({})

传参为一个对象，其中对象外部的属性如下:

IV 框架的 Api

应用办法：

在实例外部应用: 示例：this.requireFocus(0)

在实例内部应用: 示例：vm.requireFocus(0) (vm 为实例对象)

        var vm = new FOCUS({
            event: {keyOkEvent: function (focusId) {this.requireFocus(6) // 在实例外部应用
                }
            }
        })
        vm.requireFocus(6) // 在实例内部应用 

V 版本日志

其余

如果这个框架可能被很多应用到，我想我会十分的开心，如果你有什么感觉框架须要减少的好的倡议，我很荣幸可能晓得，这是我的联系方式，请表明来意, 心愿您能给我一个点赞，这是对我最大的激励

vx:DoubleU-_

QQ:1026990903