电视大屏社交H5轮询策略分享

前言：

第一次写社交类的h5,一开始拿到这个需求的时候，觉得根本没有市场，估计功能也很简单，因为大家用过很多款社交app，对它的想法也是，豁，这不是用脚就能写好么？
但其实里面有两个复杂的问题，轮询和大屏特有的焦点问题，再把这两个放到一块，难度是平方级的。

在涉及到轮询策略上，有几点可以分享的；

1. 如何配合接口使用可配置轮询；

   自定义轮询间隙

POLLINGFREQ = [
  {
    'freqSpace': '3',
    'freqUnit': '600'
  },
  {
    'freqSpace': '30',
    'freqUnit': '1800'
  },
  {
    'freqSpace': '120',
    'freqUnit': '1800'
  }
]

读取栈顶的轮询时间，读完推到下一个元素

if (isLoopNext) { // 如果当前策略跑完了 读取下一个策略
          isLoopNext = false
          if (pollingFreq.length < 1) {
            newTopEle = null
          } else {
            topEle = newTopEle ? deepClone(newTopEle) : null
            newTopEle = pollingFreq.shift()
          }
        }

2. 轮询和主动调取接口冲突如何处理；
3. 如何优雅地更新dom；（一个接口查列表和详情）
4. 如何记住上一个焦点；

在涉及到多级焦点的移动问题上，有几点可以分享的；

refreshPoint (args) {
      const { focusRef = null, refName = '', isChild = false, goTarget = true } = args || {}
      if (refName) {
        // 对比新旧焦点， 如果相同， 不刷新新旧焦点
        if (this.rememberPointer.refName == refName &&
        refName.includes('nav2Item') && !refName.includes('nav2Item0')) {
          console.log('新旧refName相同', refName)
          return
        } else {
          this.rememberPointer.refName = refName
        }
      }
      this.rememberPointer.isChild = isChild
      this.refreshPointBol = true
      if (goTarget) {
        if (focusRef) this.$service.move(focusRef)
        else {
          if (refName) {
            const targetRef = isChild ? this.$refs[refName][0] : this.$refs[refName]
            this.$service.move(targetRef)
            if (refName == 'friends' || refName == 'chats') {
              this.refreshNav2Class()
            }
          }
        }
      }
    },

1. 指定dom跳转，记录上一级焦点；
2. 上一级的选择态、 及epg的bug；

 :class=" {'dingdong_2_nav_item_add': id==='add',
              'nav_selected': rememberId == id && (showSelected =='yes'),
              'item_focus': rememberId == id && (showSelected =='focus')
    } "

3. refs含有子节点。isChild
4. 弹框组件及焦点

元旦演示问题复盘：（一个css3 filter导致的性能问题）

1. 没有及时问题上报，风险把控；

2. 每天做到三事清， 沟通协调方面的问题清掉，个人开发模块的问题清掉，团队研发的问题跟进。

3. 大屏社交作为一个整体的页面，去分模块测试会暴露很多问题，时间紧张，导致bug量比较多。

4. 没有把盒子作为主要开发环境，前期一直在浏览器上开发；

疑问？

• 1.对于极为复杂的单页面，如何优化开发？
• 2.如何提前预知风险？