webApp开发实战经验总结19年的前半年基本都在开发webApp，中间遇到不少坑。此处做下总结。由于多次进入房间而没

19年的前半年基本都在开发webApp，中间遇到不少坑。此处做下总结。

socket.io重复事件监听，导致页面卡顿严重

开发的应用因为要考虑到实时性，基于websocket，引入了socket.io，每个用户进入房间之后，分配角色之后监听socket事件进行数据处理，如下：

this.$socket.on(Event.Broadcast, (data) => {
    console.log('app broadcast')
})
this.$socket.on(Event.Update, (data) => {
    console.log('app update')
})
this.$socket.on(Event.Assign, (data) => {
    console.log('app assign')
})

由于多次进入房间而没有及时移除socket监听事件，导致旧的事件都会触发，导致app严重卡顿。解决方法只需一行代码即可，一次性移除所有监听事件：

this.$socket.removeAllListeners()

当然你也可以根据具体事件去移除监听，如下：

this.$socket.removeListener(eventName, listener)

iPhone摇晃之后提示撤销键入

这也是测试过程中发现的奇葩问题。解决方案也比较简单，引入cordova插件cordova-plugin-ios-disableshaketoedit，别看github上它的star很少，但亲测好用，一键解决无痛点~

cordova plugin add cordova-plugin-ios-disableshaketoedit

iPhone上`position:absolute;`定位错误

这个问题可能大家遇到比较多，同样的绝对定位，安卓机上都是渲染正常，到了iPhone上就位置偏了。细看样式，发现只有将left,top或right,bottom写完整才能正常占位。emmm，原理还没去深究。。

iPhone上`position:fixed;`元素出现错位

这个也是吐槽比较多的点了，最优的解决方案是能不用fixed定位，就不用fixed，虽然有点绝望，不过苹果就是这么不考虑开发者的感受。。解决方案就是用absolute定位取代fixed定位，将父容器设置为width:100%;height:100%;一般布局都没太大问题。

iPhone上禁用数字唤醒电话

这个比较常见，只需在html的head加入<meta name="format-detection" content="telephone=no">即可顺利解决。

平滑滚动到指定元素

这个其实实现方案很多，以前用jQuery可以很快速解决，项目是Vue+Cordova，为了一个简单功能引入jQuery未免小题大做。基于偷懒原则，查询了一番npm包之后，发现了vue-smoothscroll，简单好用易上手，如下：

import vueSmoothScroll from 'vue-smoothscroll'
Vue.use(vueSmoothScroll)
let ele = document.getElementById('ele')
let cxt = document.getElementById('content')
this.$SmoothScroll(ele, 500, cb, cxt, 'y')

网络丢包率的计算

由于项目需要实时监控网络状态，包括丢包率和延时。延时比较直观，每次请求所耗费的时间就是延时。策略其实就是初始化一个长度为40的数组，每3秒请求一次，成功或失败之后进入队列，顶部元素出队列，然后计算出失败的次数占总数的比率，即为简易化的丢包率。如果要提高计算的准确性，可以把40基数提高。大概逻辑如下：

setInterval(() => {
    let now = new Date().getTime()
    axios.get(`${this.hostName}/api/ping`, {
        timeout: 3000
    }).then(() => {
            let ping = new Date().getTime() - now
            this.set_ping(ping)
            this.ping_arr.shift()
            this.ping_arr.push('success')
            this.calcLossRate()
        })
        .catch((err) => {
            this.set_ping(3000)
            this.ping_arr.shift()
            this.ping_arr.push('fail')
            this.calcLossRate()
        })
}, 3000)
calcLossRate() {
    let loss = 0
    this.ping_arr.forEach((item) => {
        if (item === 'fail') {
            loss ++
        }
    })
    let rate = parseInt((loss / 40) * 100)
}

webApp开发实战经验总结