本週咱們 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. 積極樂觀，作一個正能量的人。（遠離負能量的人和事）

一段腳本，數組數據量超額後，內存忽然變小了？

最後

這是一個須要你們一塊兒分享才能持續下去的事情，光靠我一人分享是作不下去的。歡迎你們參與到這件事情中來，地址在這裏。