摘要：作者陳大魚頭如果不希望職業生涯過早結束，持續學習對于開發者來說是必不可少的。最近前端面試之道的作者為了讓一些人能在這塊地方記錄自己學習到的內容而建立起了一個學習倉庫。例子如下我們首先定義一個文件叫，一個文件叫。

作者：陳大魚頭
github： KRISACHAN

如果不希望職業生涯過早結束，持續學習對于開發者來說是必不可少的。

最近《前端面試之道》的作者為了讓一些人能在這塊地方記錄自己學習到的內容而建立起了一個學習倉庫。

倉庫地址如下：

https://github.com/KieSun/tod...

這些內容通常會是一個小點，可能并不足以寫成一篇文章。但是這個知識點可能很多人也不知道，那么通過這種記錄的方式讓別人同樣也學習到這個知識點就是一個很棒的事情了。

具體的知識點如下：

我們在日常開發中可能會用到過許多 CSS IN JS 或者 CSS module 的方案，但是 JS IN CSS ，你聽說過嗎？

CSS Houdini 是由一群來自各個國際大廠的工程師所組成的工作小組，志在建立一系列的 API來讓開發者能夠介入瀏覽器的CSS引擎中，用來解決 CSS 長久以來的問題。

例子如下：

我們首先定義一個JS文件叫houdini.js，一個HTML文件叫index.html。

houdini.js 文件內容如下：

"use strict"
registerPaint("overdraw", class {
    static get inputProperties() { return ["--border-width"]; }
    paint(ctx, geom, properties) {
        const borderWidth = parseInt(properties.get("--border-width"));
        ctx.shadowColor = "rgba(0,0,0,0.25)";
        ctx.shadowBlur = borderWidth;

        ctx.fillStyle = "rgba(255, 255, 255, 1)";
        ctx.fillRect(borderWidth,
                     borderWidth,
                     geom.width - 2 * borderWidth,
                     geom.height - 2 * borderWidth);
    }
});

index.html 文件內容如下：

然后開個靜態服務器，就可以看效果了，效果如下：

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))

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 = "大傻逼".split("");
var regstr = ma.join("([^u4e00-u9fa5]*?)");
var str = "這是一篇文章,需要過濾掉大燒餅這三個詞,大燒餅中間出漢字以外的字符 大_/_燒a1v餅和 大燒a1v餅";
var reg = new RegExp(regstr , "g");
str.replace(reg,"<替換的詞>");

const express = require("express");
const compression = require("compression");
const app = express();
app.use(compression());

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

const readLines = stdout => {
  const stringArray = stdout
    .toString()
    .split(/(
)/g)
    .filter(str => str !== "
" && str);
  const dataArray = [];
  stringArray.map(str => {
    const data = str.split(/(	)/g).filter(str => str !== "	");
    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);
}

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"));

在安卓中，直接使用原生 video 會導致全屏播放，蓋住所有元素，因此使用 x5 播放器。但是 x5 播放器還是存在問題，雖然不會蓋住元素，但是會自己添加特效（蓋一層導航欄蒙層）。

這樣可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinline 屬性可以在 iOS 環境下啟用內聯播放。但是通過屬性設置內聯播放兼容性并不怎么好，所以這時候我們需要使用 iphone-inline-video[2] 這個庫，通過 enableInlineVideo(video) 就可以了。

考慮到直播中聊天數據頻繁，因此所有接收到的數據會先存入一個數組 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)

同樣考慮到直播中聊天數據頻繁插入，因此使用鏈表來存儲顯示的聊天數據，目前只存儲 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 }
    }
  }
}

要根據任務四象限劃分好每天要做的事，按緊急度去完成任務（重要緊急，重要不緊急，緊急不重要，不重要不緊急）；

學會自我總結（寫周報或日志匯總所遇到的問題，時刻翻閱）；

擁有快速定位并解決問題的能力（通過已知的條件去判斷所遇到的問題）；

要多與上下游溝通，了解團隊大家所做的事以及進度（方便自己合理安排任務）；

積極樂觀不抱怨（最好可以時常給團隊帶來正能量，而不是滿腹抱怨）；

多運動，多休息（身體革命的本錢，沒有一個好的身體就什么都做不了）。

這是一個需要大家一起分享才能持續下去的事情，光靠我，YCK或者少量幾個人分享是做不下去的。歡迎大家參與到這件事情中來，地址如下：

https://github.com/KieSun/tod...

如果你、喜歡探討技術，或者對本文有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。