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

时间 2019-11-16

标签 2019.7.15 7.21 咱们学了什么繁體版

原文原文链接

做者：陈大鱼头

github： KRISACHAN

若是不但愿职业生涯过早结束，持续学习对于开发者来讲是必不可少的。javascript

最近《前端面试之道》的做者为了让一些人能在这块地方记录本身学习到的内容而创建起了一个学习仓库。html

仓库地址以下：前端

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

这些内容一般会是一个小点，可能并不足以写成一篇文章。可是这个知识点可能不少人也不知道，那么经过这种记录的方式让别人一样也学习到这个知识点就是一个很棒的事情了。git

具体的知识点以下：github

CSS

CSS Houdini

咱们在平常开发中可能会用到过许多 CSS IN JS 或者 CSS module 的方案，可是 JS IN CSS ，你据说过吗？web

CSS Houdini 是由一群來自各个国际大厂的工程师所组成的工做小组，志在创建一系列的 API来让开发者可以介入浏览器的CSS引擎中，用来解決 CSS 长久以来的问题。面试

例子以下：chrome

咱们首先定义一个JS文件叫houdini.js，一个HTML文件叫index.html。express

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 文件内容以下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>demo</title>
    <style>
      .overdraw {
        --border-width: 10;
        border-style: solid;
        border-width: calc(var(--border-width) * 1px);
        border-image-source: paint(overdraw);
        border-image-slice: 0 fill;
        border-image-outset: calc(var(--border-width) * 1px);
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="overdraw"></div>
    <script>
      'use strict';
      if (window.CSS) {
        CSS.paintWorklet.addModule('houdnini.js');
      }
    </script>
  </body>
</html>

而后开个静态服务器，就能够看效果了，效果以下：

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 = "大傻逼".split('');
var regstr = ma.join('([^\u4e00-\u9fa5]*?)');
var str = "这是一篇文章,须要过滤掉大烧饼这三个词,大烧饼中间出汉字之外的字符 大_/_烧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'));

实际业务问题

视频兼容相关

在安卓中，直接使用原生 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[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海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。