翻了翻這些年寫過(guò)的博客础芍，點(diǎn)點(diǎn)滴滴就像日記一樣記錄著自己的成長(zhǎng)歷程。上次寫年終總結(jié)還是在2019年1月3日数尿，寫給2018......
2018仑性，是從Android轉(zhuǎn)做前端的一個(gè)開始。
從接手一個(gè)小的前端功能模塊右蹦，接觸到了項(xiàng)目腳手架的概念诊杆，基于此了解到React、Fusion組件庫(kù)何陆。最先接觸的dva當(dāng)中的connect晨汹、mapStateToProps、mapDispatchToProps 等等相關(guān)技術(shù)點(diǎn)是一臉蒙圈贷盲，只會(huì)照葫蘆瓢實(shí)現(xiàn)基本功能淘这，不敢有任何大膽的其他寫法。
漸漸就會(huì)對(duì)接觸到的任何技術(shù)點(diǎn)存留各種各樣的問(wèn)號(hào)巩剖，出于無(wú)盡的求知欲铝穷，就會(huì)知其然，也想知其所以然佳魔，一點(diǎn)點(diǎn)學(xué)習(xí)曙聂、積累、應(yīng)用鞠鲜，總結(jié)宁脊。反反復(fù)復(fù)。
Redux說(shuō)起
Redux贤姆，一種數(shù)據(jù)管理方式朦佩。它的思想和核心源碼都相對(duì)比較簡(jiǎn)單。一開始我有結(jié)合相關(guān)書籍和github源碼做過(guò)一次淺析《Redux》解讀庐氮。
Redux中通過(guò)store.dispatch派發(fā)的action语稠，reducer立即算出 state，這叫做同步；action 發(fā)出以后仙畦，過(guò)一段時(shí)間再執(zhí)行 reducer输涕，這樣的異步改怎么樣實(shí)現(xiàn)呢？
這就不得不提及中間件慨畸，中間件其實(shí)就是一個(gè)函數(shù)莱坎，對(duì)store.dispatch方法進(jìn)行了改造，在發(fā)出 action 和執(zhí)行 reducer 這兩步之間寸士，添加了其他功能檐什。
我讀了兩篇文章，受益匪淺弱卡。《中間件middleware》《中間件和異步操作》
redux-thunk中間件乃正，改寫dispatch，使得他可以接收函數(shù)入?yún)ⅰ?br>
redux-promise中間件婶博，改寫dispatch瓮具，使得它可以接收promise入?yún)ⅰ?/p>
但是這遠(yuǎn)遠(yuǎn)不夠，你發(fā)現(xiàn)React和Redux各自為伍凡人，如何讓兩位兄弟互幫互助名党，打工讓我掙錢，早日讓老板實(shí)現(xiàn)財(cái)富自由呢挠轴？react-redux`就這樣誕生了传睹。《 The History and Implementation of React-Redux 》幫你了解它的實(shí)現(xiàn)和歷史。
connect函數(shù)可以將Redux相關(guān)屬性和方法注入組件中岸晦，你可以通過(guò)分發(fā)actions注入數(shù)據(jù)和回調(diào)來(lái)改變數(shù)據(jù)蒋歌。
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
// that renders your component
<WrappedComponent
{/* with its props */}
{...this.props}
{/* and additional props calculated from Redux store */}
{...mapStateToProps(store.getState(), this.props)}
{...mapDispatchToProps(store.dispatch, this.props)}
/>
)
}
componentDidMount() {
// it remembers to subscribe to the store so it doesn't miss updates
this.unsubscribe = store.subscribe(this.handleChange.bind(this))
}
componentWillUnmount() {
// and unsubscribe later
this.unsubscribe()
}
handleChange() {
// and whenever the store state changes, it re-renders.
this.forceUpdate()
}
}
}
}
繼承和原型鏈
閱讀《JavaScript高級(jí)程序設(shè)計(jì)》，印象最深的是第六章——面向?qū)ο蟪绦蛟O(shè)計(jì)委煤。顛覆了之前類繼承的思維模式堂油，深入了解了函數(shù)原型，原型繼承的技術(shù)碧绞。再閱讀MDN的《繼承和原型鏈》 加以鞏固府框。這個(gè)內(nèi)容很重要！很重要讥邻！很重要迫靖！
這里有我的《JavaScript高級(jí)程序設(shè)計(jì)》讀書筆記
函數(shù)
一句“函數(shù)是一等公民”，勾起了我對(duì)它的無(wú)盡想象兴使。
純函數(shù)的最佳實(shí)踐：redux中的reducer系宜；
高階函數(shù)最佳實(shí)踐：閉包，Array中map发魄，reduce盹牧，filter俩垃，find，some汰寓，every......
閉包的最佳實(shí)踐：bind口柳、react-redux中的connect，redux中間件
閉包
閉包一出有滑，求知欲也呼之欲出跃闹。
《JavaScript高級(jí)程序設(shè)計(jì)》：閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。
MDN：函數(shù)和對(duì)其周圍狀態(tài)（lexical environment毛好，詞法環(huán)境）的引用捆綁在一起構(gòu)成閉包（closure）望艺。
閉包的第一個(gè)用途是使我們?cè)诤瘮?shù)外部能夠訪問(wèn)到函數(shù)內(nèi)部的變量。通過(guò)使用閉包肌访，我們可以通過(guò)在外部調(diào)用閉包函數(shù)找默，從而在外部訪問(wèn)到函數(shù)內(nèi)部的變量，可以使用這種方法來(lái)創(chuàng)建私有變量场靴。
閉包的另一個(gè)用途是使已經(jīng)運(yùn)行結(jié)束的函數(shù)上下文中的變量對(duì)象繼續(xù)留在內(nèi)存中，因?yàn)殚]包函數(shù)保留了這個(gè)變量對(duì)象的引用港准，所以這個(gè)變量對(duì)象不會(huì)被回收旨剥。
作用域
當(dāng)你感覺(jué)充實(shí)的時(shí)候，作用域一詞是否曾經(jīng)波動(dòng)了你的心弦浅缸。
作用域和執(zhí)行環(huán)境是緊密聯(lián)系在一起的轨帜。當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)，會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈衩椒。作用域鏈的用途是蚌父，保證對(duì)執(zhí)行環(huán)境有權(quán)訪問(wèn)的變量和函數(shù)可以有序訪問(wèn)。如下圖毛萌，在控制臺(tái)就可以見(jiàn)到只聞其名不見(jiàn)其身的作用域
我有故事《理解JavaScript中的作用域》苟弛，你備酒。
學(xué)習(xí)了解XSS和CSRF阁将、防抖和節(jié)流膏秫、HTTP和HTTPS、TCP三次握手/四次揮手做盅、強(qiáng)緩存和協(xié)商緩存缤削、defer和async。
優(yōu)化是一個(gè)永恒的話題吹榴，首屏優(yōu)化亭敢、性能優(yōu)化、網(wǎng)絡(luò)優(yōu)化图筹、webpack優(yōu)化帅刀、react優(yōu)化。
曾經(jīng)我遇到一個(gè)面試題是，網(wǎng)頁(yè)輸入url劝篷，回車之后哨鸭，不聊發(fā)生了什么。只聊各個(gè)環(huán)節(jié)優(yōu)化的點(diǎn)和方法娇妓。
算法
工作了這么多年像鸡，算法其實(shí)都沒(méi)有真正的深入學(xué)習(xí)過(guò)，只停留在冒泡排序終歸說(shuō)不過(guò)去哈恰。我開始跟隨labuladong的步伐進(jìn)行了第一輪的學(xué)習(xí)只估，在github上做了相關(guān)的實(shí)踐algorithm-javascript，同時(shí)在leetcode上刷了一些相關(guān)的題目着绷。
涉及到插入排序蛔钙、希爾排序、選擇排序荠医、堆排序吁脱、冒泡排序、快速排序彬向、歸并排序兼贡、二叉樹的深度優(yōu)先遍歷（前、中娃胆、后序遍歷）遍希、廣度優(yōu)先遍歷、二叉搜索樹
最后
寫了印象深的一些東西里烦，要去學(xué)習(xí)的有太多太多凿蒜，2021繼續(xù)加油！
要記得要去主動(dòng)參加一些面試胁黑，在這個(gè)過(guò)程中真正檢驗(yàn)?zāi)銓?duì)各方面知識(shí)點(diǎn)的掌握程度废封，去發(fā)現(xiàn)不足。
認(rèn)識(shí)自己很重要丧蘸！
