- 做者:陳大魚頭
- github: KRISACHAN
若是不但願職業生涯過早結束,持續學習對於開發者來講是必不可少的。javascript
最近《前端面試之道》的做者爲了讓一些人能在這塊地方記錄本身學習到的內容而創建起了一個學習倉庫。css
倉庫地址以下:html
這些內容一般會是一個小點,可能並不足以寫成一篇文章。可是這個知識點可能不少人也不知道,那麼經過這種記錄的方式讓別人一樣也學習到這個知識點就是一個很棒的事情了。java
具體的知識點以下:git
咱們在平常開發中可能會用到過許多 CSS IN JS
或者 CSS module
的方案,可是 JS IN CSS
,你據說過嗎?github
CSS Houdini 是由一羣來自各個國際大廠的工程師所組成的工做小組,志在創建一系列的 API來讓開發者可以介入瀏覽器的CSS引擎中,用來解決 CSS 長久以來的問題。web
例子以下:面試
咱們首先定義一個JS文件叫houdini.js
,一個HTML文件叫index.html
。chrome
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>
複製代碼
而後開個靜態服務器,就能夠看效果了,效果以下:
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(/(\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);
}
複製代碼
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或者少許幾我的分享是作不下去的。歡迎你們參與到這件事情中來,地址以下: