title: 【周記】2018.03.26-2018.03.31
date: 2018-03-31
tags: [周記]
categories: 瑣事
孤山寺北賈亭西困后，水面初平云腳低麸祷。幾處早鶯爭(zhēng)暖樹兔港，誰家新燕啄春泥婶溯。亂花漸欲迷人眼，淺草才能沒馬蹄的猛。最愛湖東行不足爷贫，綠楊陰里白沙堤。 - 白居易《錢塘湖春行》
關(guān)鍵字：
- 百樂門培訓(xùn)
- 訂閱管理上線前優(yōu)化需求
- 回顧 js 異步發(fā)展史 callback => promise => co + generator => async + await + promise
- 回顧箭頭函數(shù)
- 閱讀 webpack 官方指南/掘金小冊(cè)艇炎，還有視頻
- 初讀 koa 源碼酌伊，重點(diǎn)：koa 中間件實(shí)現(xiàn)原理
- 買了 15 個(gè)月的騰訊云服務(wù)器
- 明朝那些事兒【朱佑樘，朱厚照】
- 返校
工作
-
周四晚上到周六一整天都是公司新員工培訓(xùn)缀踪，周四晚上組隊(duì)并且進(jìn)行團(tuán)隊(duì)介紹居砖，周五前往西溪濕地公園“尋寶”，周六培訓(xùn)業(yè)務(wù)相關(guān)（然而我已經(jīng)回學(xué)校了）驴娃。
一點(diǎn)感觸奏候，不要因?yàn)樽约菏菍?shí)習(xí)生就對(duì)別人太 過于 有禮貌，正常交流即可唇敞，可能技術(shù)比工作了五年的老哥們差了不少蔗草，但大家都會(huì)是正式員工，是平等的疆柔，不存在上下級(jí)關(guān)系咒精，弱勢(shì)久了能想象得到以后工作很麻煩。
盡量多思考婆硬，不要一有問題就發(fā)問狠轻，實(shí)在不行正常請(qǐng)教即可奸例，不用擺出學(xué)生姿態(tài)彬犯，放自然點(diǎn)，沒人在意你是實(shí)習(xí)生還是新人查吊。
西溪濕地很漂亮谐区，三月的尾巴離開了杭州，這個(gè)春夏過渡的很自然逻卖。
上幾張圖咯宋列。
- 訂閱管理上線前優(yōu)化需求。特意留了一個(gè)星期來修復(fù) bug评也，結(jié)果偏偏最后一天冒出四五個(gè)需求炼杖，還撞上了培訓(xùn)， 真是全場(chǎng)最佳盗迟。還好有暖心的同事坤邪。
學(xué)習(xí)
- 回顧 js 異步發(fā)展史，真的真的特別重要罚缕，原來直接跳過了 generator 到了 async艇纺，這周靜下心來梳理了一下，配合 co 也算是會(huì)入門使用了，但是沒有去看 co 的源碼黔衡，下周可以看看蚓聘。上碼：
const fs = require('fs')
// 第一階段 callback
function readFile(cb) {
fs.readFile('./package.json', cb)
}
readFile((err, data) => {
if (!err) {
data = JSON.parse(data)
console.log(data.name)
}
})
// 第二階段 promise
function readFileAsync(path) {
return new Promise((reslove, reject) => {
fs.readFile(path, (err, data) => {
if (err) reject(err)
else reslove(data)
})
})
}
readFileAsync('./package.json')
.then(data => {
data = JSON.parse(data)
console.log(data.name)
})
.catch(err => {
console.log(err)
})
// 第三階段 co + generator function + promise
const co = require('co')
const util = require('util')
co(function*() {
let data = yield util.promisify(fs.readFile)('./package.json')
data = JSON.parse(data)
console.log(data.name)
})
// 第四階段 async
const readAsync = util.promisify(fs.readFile)
async function readWithAsync(path) {
let data = await readAsync(path)
data = JSON.parse(data)
console.log(data.name)
}
readWithAsync('./package.json')
- 回顧箭頭函數(shù)，上碼盟劫。
const luke = {
id: 1,
say: function() {
setTimeout(function() {
console.log('id:', this.id)
}, 500)
},
sayWithThis: function() {
let that = this
setTimeout(function() {
console.log('this id:', that.id)
}, 1000)
},
sayWithArrow: function() {
setTimeout(() => {
console.log('arrow id:', this.id)
}, 1500)
},
sayWithGlobalArrow: () => {
setTimeout(() => {
console.log('global arrow id:', this.id)
}, 2000)
}
}
luke.say()
luke.sayWithThis()
luke.sayWithArrow()
luke.sayWithGlobalArrow()
-
系統(tǒng)性的學(xué)習(xí)了一下 webpack夜牡，對(duì) webpack 在瀏覽器上實(shí)現(xiàn)模塊化進(jìn)行了一些思考（webpack 在多頁應(yīng)用單頁應(yīng)用使用情景的差別），部分筆記如下：
- ES6,7/react => babel
- css 相關(guān) => css-loader style-loader extra-text-webpack-plugin
- 代碼規(guī)范 => eslint
- 圖片侣签，字體 => file-loader url-loader
- 開發(fā)熱更新環(huán)境 => webpack-dev-server
- Common chunk
- Code splitting && lazy load
- Uglify && Minisize
提取公共代碼：CommonChunkPlugin 通過將公共模塊拆出來氯材，最終合成的文件能夠在最開始的時(shí)候加載一次，便存到緩存中供后續(xù)使用硝岗。這個(gè)帶來速度上的提升氢哮，因?yàn)闉g覽器會(huì)迅速將公共的代碼從緩存中取出來，而不是每次訪問一個(gè)新頁面時(shí)型檀，再去加載一個(gè)更大的文件冗尤。4.0 版本已經(jīng)移除
css 相關(guān)：
- css 引入：
- style-loader ：創(chuàng)建 style 標(biāo)簽
- css-loader：使得 css 可被 import
- Css modules
- 配置 less/sass/stylus
- 抽離 css： extra-text-webpack-plugin 可以將 css 或各種預(yù)處理器[轉(zhuǎn)換成 css]抽離出來，有利于緩存胀溺，異步組件無法抽離裂七，需要配置 fallback，不能抽離的 css 動(dòng)態(tài)生成 style 標(biāo)簽仓坞，官方文檔很完善【重復(fù)@import 的 css 代碼若不抽離會(huì)被打入 js 兩次】
代碼分割和懶加載： 不需要配置 webpack背零，只需要自己在代碼中實(shí)現(xiàn)即可。
- import(). [react-loadable]
- require.ensure([],function(){})
- 因?yàn)榉指畛闪硕鄠€(gè)文件无埃，共同依賴存在重復(fù)打包的問題徙瓶，在入口處進(jìn)行引入減少重復(fù)打包
- webpack 異步加載的原理
-
koa 中間件原理。koa-compose:
好累，寫不動(dòng)了织阅。
生活
- 看關(guān)鍵字壳繁，好貴。
- 看關(guān)鍵字荔棉，終于看了課外書闹炉。
- 看關(guān)鍵字，爽死了润樱。
