摘要:作者陳大魚頭如果不希望職業生涯過早結束,持續學習對于開發者來說是必不可少的。最近前端面試之道的作者為了讓一些人能在這塊地方記錄自己學習到的內容而建立起了一個學習倉庫。例子如下我們首先定義一個文件叫,一個文件叫。
作者:陳大魚頭
github: KRISACHAN
如果不希望職業生涯過早結束,持續學習對于開發者來說是必不可少的。
最近《前端面試之道》的作者為了讓一些人能在這塊地方記錄自己學習到的內容而建立起了一個學習倉庫。
倉庫地址如下:
https://github.com/KieSun/tod...
這些內容通常會是一個小點,可能并不足以寫成一篇文章。但是這個知識點可能很多人也不知道,那么通過這種記錄的方式讓別人同樣也學習到這個知識點就是一個很棒的事情了。
具體的知識點如下:
CSS CSS Houdini我們在日常開發中可能會用到過許多 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 文件內容如下:
demo
然后開個靜態服務器,就可以看效果了,效果如下:
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(/( )/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); }實現一個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 播放器還是存在問題,雖然不會蓋住元素,但是會自己添加特效(蓋一層導航欄蒙層)。
這樣可以在安卓下使用 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海洋”,隨時與魚頭互動。歡迎!衷心希望可以遇見你。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116117.html
摘要:作者陳大魚頭如果不希望職業生涯過早結束,持續學習對于開發者來說是必不可少的。最近前端面試之道的作者為了讓一些人能在這塊地方記錄自己學習到的內容而建立起了一個學習倉庫。例子如下我們首先定義一個文件叫,一個文件叫。 作者:陳大魚頭 github: KRISACHAN 如果不希望職業生涯過早結束,持續學習對于開發者來說是必不可少的。 最近《前端面試之道》的作者為了讓一些人能在這塊地方記...
摘要:其中經歷了入門到放棄系列的火熱,想起了此題目,可直到其熱度褪去依然沒有開寫。再之前的實習也是上午面試下午入職的。 這是前幾篇前端面試文章的結尾,是很多個月前就該寫下的事情。其中經歷了入門到放棄系列的火熱,想起了此題目,可直到其熱度褪去依然沒有開寫。不能再拖了,否則事情估計都快忘光了。 面試過程 依然是某金融集團的外包,這次換了一個外包公司。首先是電話面試,還是還是些常見的前端問題,自己...
摘要:首先一上來就分享了兩個學習方法建立知識架構追本溯源。列一份前端知識架構圖在這章節中,分享了本專欄要學習的知識架構瀏覽器的實現原理和前端工程實踐四個模塊。最后一個是前端工程實踐,從性能工具鏈持續集成搭建系統架構與基礎庫五個方面講起。 明確你的前端學習路線 自己特別喜歡屯課,看著自己買的課,有種滿足感,仿佛知識都是我的了,翻看極客時間買的課,決定這段時間把重學前端專欄學習一遍。 從周六到今...
摘要:好好打基礎,然后多嘗試不同風格的框架,因為只有嘗試過后才能理解比如徐飛提到的各種權衡,也只有嘗試過后才能知道哪個能真正提升自己的開發效率。 今天看了幾篇關于這三個主流框架的PK,如標題:react.js,angular.js,vue.js學習哪個好?相信每個人都有這種問題。 現在的前端框架層出不窮,作為前端開發者何去何從?fackbook的react.js盛世火熱,react nati...
摘要:看起來沒有集合框架,線程,等那么耀眼,但它可是很多框架的基礎啊回復反射查看相關文章,先把基礎學會,后面的得用到它。 回頭看看, 我進入Java 領域已經快15個年頭了, 雖然學的也一般, 但是分享下我的心得,估計也能幫大家少走點彎路。[入門]我在2001年之前是C/C++陣營, 有C和面向對象的基礎, 后來轉到Java ,發現沒有指針的Java真是好簡單, 另外Java 的類庫好用的讓...
閱讀 4361·2021-11-22 09:34
閱讀 2689·2021-11-12 10:36
閱讀 741·2021-08-18 10:23
閱讀 2636·2019-08-30 15:55
閱讀 3110·2019-08-30 15:53
閱讀 2081·2019-08-30 15:44
閱讀 1359·2019-08-29 15:37
閱讀 1400·2019-08-29 13:04