近期开发极光tv的项目，需求在原生js支持下单页面动态渲染，借此优化重构了一下当时冗余的遥控器上下键焦点功能

Create 直接上代码

value.component为数据个体组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 查询执行焦点  
// 查询执行焦点
function focused(val) {
  if (val == 'down') {
    value.componentNumber++
  } else if (val == 'up') {
    value.componentNumber--
  } else if (typeof val == 'number') {
    value.componentNumber = val
  }
  var code = value.component[value.componentNumber];
  var codePyte
  switch (code) {
    case "topContent": //顶部
      codePyte = topContent
      break;
    case "indexSingle": //上选集
      codePyte = indexSingle
      break;
    case "indexTotal": //下选集
      codePyte = indexTotal
      break;
    case "specialList": //专题
      codePyte = specialList
      break;
    case "assetList": //推荐
      codePyte = assetList
      break;
    case "indexNews": //推荐
      codePyte = indexNews
      break;
  }
  areaObj = codePyte;
  codePyte.addCss(true)
}

单组件上下键脱离控制调用

1
2
3
4
down or up: function () {
    this.removeCss();
    focused('down')
  },

键值控制接入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
onKeyPress = function (keyCode) {
  switch (keyCode) {
    case "up": //上边
      areaObj.up();
      break;
    case "down": //下边
      areaObj.down();
      break;
    case "left": //左边
      areaObj.left();
      break;
    case "right": //右边
      areaObj.right();
      break;
    case "back":
      // player.stop();
      if (areaObj != descriptionBox) {
        exit();
      } else {
        areaObj.back()
      }
      break;
    case "enter":
      areaObj.enter();
      break;
    case "home":
      areaObj.home();
      break;
    case "menu":
  }
};

组件手动删除方法

1
2
3
4
5
6
7
8
9
value：组件名
removeArray: function (value) {
    var index = this.component.indexOf(value);
    if (index > -1) {
      this.component.splice(index, 1);
    }
  }

删除组件对应的页面不渲染