本周咱们 36 人学了什么

程序员这行若是想一直作下去，那么持续学习是必不可少的。

你们找工做一般会喜欢技术氛围好点的团队，由于这样可以帮助本身更好的成长，可是并非每一个团队都拥有这样的氛围。因而萌发一个念头，想创建一个地方，让一些人能在这块地方记录本身学习到的内容。这些内容一般会是一个小点，可能并不足以写成一篇文章。可是这个知识点可能不少人也不知道，那么经过这种记录的方式让别人一样也学习到这个知识点就是一个很棒的事情了。

若是你也想参与这个记录的事情，欢迎贡献你的一份力量，地址在这里。

本周总共有 36 我的贡献了它所学到的知识，如下是一些整合后的内容，更详细的内容推荐前往仓库阅读。

笔者在微信环境中直播功能的实践

兼容问题

视频兼容相关

在安卓中，直接使用原生 video 会致使全屏播放，盖住全部元素，所以使用 x5 播放器。可是 x5 播放器仍是存在问题，虽然不会盖住元素，可是会本身添加特效（盖一层导航栏蒙层）。

<video className='live-detail__video vjs-big-play-centered' id='live-player' controls={false} playsInline webkit-playsinline='true' x5-video-player-type='h5' x5-video-orientation='portrait' x5-playsinline='true' style={style} />
复制代码

这样能够在安卓下使用 x5 播放器， playsInline 及 webkit-playsinline 属性能够在 iOS 环境下启用内联播放。可是经过属性设置内联播放兼容性并不怎么好，因此这时候咱们须要使用 iphone-inline-video 这个库，经过 enableInlineVideo(video) 就能够了。

视频自动播放

在安卓下视频自动播放的兼容性不好，所以只能让用户手动触发视频播放。可是在 iOS 下能够经过监听微信的事件实现视频的自动播放。

document.addEventListener("WeixinJSBridgeReady", function () {
    player.play()
}, false)
复制代码

iOS 下协议问题

由于页面使用的是 HTTPS 协议，iOS 强制规定在 HTTPS 页面下也必须使用安全协议。所以使用 ws 协议的话在 iOS 下报错，后续使用 wss 协议解决。

体验问题

iOS 下键盘弹起收下

在 iOS 中，输入框弹起键盘先后，页面均可能出现问题，须要监听下键盘弹起收起的状态，而后本身滚动一下。

// 监听键盘收起及弹出状态
document.body.addEventListener('focusout', () => {
  if (isIphone()) {
    setTimeout(() => {
      document.body.scrollTop = document.body.scrollHeight
    }, 100)
  }
})

document.body.addEventListener('focusin', () => {
  if (isIphone()) {
    setTimeout(() => {
      document.body.scrollTop = document.body.scrollHeight
    }, 100)
  }
})
复制代码

性能优化

聊天数据渲染

考虑到直播中聊天数据频繁，所以全部接收到的数据会先存入一个数组 buffer 中，等待 2 秒后统一渲染。

// 接收到消息就先 push 到缓存数组中
this.bufferAllComments.push({
  customerName: fromCustomerName,
  commentId,
  content,
  commentType
})
// 利用定时器，每两秒将数组中的中的 concat 到当前聊天数据中并清空缓存
this.commentTimer = setInterval(() => {
  if (this.bufferAllComments.length) {
    this.appendChatData(this.bufferAllComments)
    this.bufferAllComments = []
  }
}, 2000)
复制代码

另外直播中其实涉及到了不少异步数据的拉取及状态的变动，这时候若是能使用 RxJS 能很好的解决数据流转的问题，后续能够尝试重构这部分的代码。

链表做为聊天数据的载体

一样考虑到直播中聊天数据频繁插入，所以使用链表来存储显示的聊天数据，目前只存储 50 条数据，这样删除前面的只要很简单。

• 使用链表的缘由是考虑到频繁的去除数组头部数据去形成空间复杂度的问题
• 另外也实现了支持迭代器的功能，代码以下：

[Symbol.iterator] () {
  let current = null; let target = this
  return {
    next () {
      current = current != null ? current.next : target.head
      if (current != null) {
        return { value: current.value, done: false }
      }
      return { value: undefined, done: true }
    },
    return () {
      return { done: true }
    }
  }
}
复制代码

JS

数组求和

let arr = [1, 2, 3, 4, 5]
eval(arr.join('+'))
复制代码

数组彻底展开

function myFlat(arr) {
  while (arr.some(t => Array.isArray(t))) {
   	arr = ([]).concat.apply([], arr);
  }
  return arr;
}
var arrTest1 = [1, [2, 3, [4]], 5, 6, [7, 8], [[9, [10, 11], 12], 13], 14];  
// Expected Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(myFlat(arrTest1)) 
复制代码

实现 sleep 函数

function sleep(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  })
}
async function test() {
  for (let index = 0; index < 10; index++) {
    console.log(index);
    await sleep(2000)
  }
}
复制代码

正则过滤违规词

var ma = "大xx".split('');
var regstr = ma.join('([^\u4e00-\u9fa5]*?)');
var str = "这是一篇文章,须要过滤掉大xx这三个词,大xx中间出汉字之外的字符 大_/_傻a1v逼和 大傻a1v逼";
var reg = new RegExp(regstr , 'g');
str.replace(reg,"<替换的词>");
复制代码

Node

开启 Gzip

const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
复制代码

统计 Git 代码行数

const { exec } = require('child_process');
const { argv } = require('yargs');

const readLines = stdout => {
  const stringArray = stdout
    .toString()
    .split(/(\n)/g)
    .filter(str => str !== '\n' && str);
  const dataArray = [];
  stringArray.map(str => {
    const data = str.split(/(\t)/g).filter(str => str !== '\t');
    const [newLine, deletedLine, filePath] = data;
    dataArray.push({ newLine, deletedLine, filePath });
  });
  return dataArray;
};


try {
  if (!argv.commit) throw new Error('')
  exec(`git diff ${argv.commit} --numstat`, (error, stdout, stderr) => {
    console.table(readLines(stdout));
  });
} catch (e) {
  console.log(e);
}
复制代码

实现一个only函数

var obj = {
    name: 'tobi',
    last: 'holowaychuk',
    email: 'tobi@learnboost.com',
    _id: '12345'
};

const only = (obj, para) => {
    if (!obj || !para) { new Error('please check your args!') }
    let newObj = {};
    let newArr = Array.isArray(para) ? para : typeof (para) === 'string' ? para.split(/ +/) : [];
    newArr.forEach((item) => {
        if (item && obj[item] && !newObj[item]) {
            newObj[item] = obj[item];
        }
    })
    return newObj;
}
// {email: "tobi@learnboost.com", last: "holowaychuk", name: "tobi"}
console.log(only(obj, ['name', 'last', 'email']));
console.log(only(obj, 'name last email'));
复制代码

其余

工做中培养起来的几点认知

1. 优先作最重要的事情，（能够本身写在笔记本上，天天的任务，也能够利用todolist相似的软件）
2. 懂得“闭环思惟”，（对领导按期汇报项目进展，对同事、下属及时同步项目进度）
3. 拥有解决问题并快速解决问题的能力（解决各类问题，锻炼解决问题的思惟，一条路不通要想别的方法）
4. 作一个靠谱、聪明、皮实、值得信赖的人。提升本身的不可替代性。
5. 凡事有交代，件件有着落，事事有回音。
6. 感激bug,是bug让本身成长，要成长必须多解决bug.多承担任务。
7. 积极乐观，作一个正能量的人。（远离负能量的人和事）

一段脚本，数组数据量超额后，内存忽然变小了？

最后

这是一个须要你们一块儿分享才能持续下去的事情，光靠我一人分享是作不下去的。欢迎你们参与到这件事情中来，地址在这里。