2019.7.15 - 7.21 我们 36人都学了些什么？

摘要：作者陈大鱼头如果不希望职业生涯过早结束，持续学习对于开发者来说是必不可少的。最近前端面试之道的作者为了让一些人能在这块地方记录自己学习到的内容而建立起了一个学习仓库。例子如下我们首先定义一个文件叫，一个文件叫。

作者：陈大鱼头
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海洋”，随时与鱼头互动。欢迎！衷心希望可以遇见你。