工作差1月就要滿一年了，這一年中水平并沒有直接性的提升，以至于初學(xué)前端時(shí)無(wú)法探究的諸多問題，依舊沒有頭緒，但工作就是的一次次跳坑和爬坑，它終究是帶給了我一些...

關(guān)于工作，在一家創(chuàng)業(yè)公司（沒人帶-_-），日常開發(fā)vue，react，react-native，微信小程序（目前）項(xiàng)目

關(guān)于技術(shù)棧，雜而不精沒救了...目前沉迷typescript

關(guān)于css

寫多少項(xiàng)目就得寫多少css，我曾一度輕視它，認(rèn)為實(shí)現(xiàn)預(yù)期效果便是大勝利，濫用各類選擇器，命名雜亂無(wú)章，為了解決bug，而寫入行內(nèi)式，然后在工作中順利的發(fā)展成為一名css上的殘障人士，偶爾面對(duì)曾經(jīng)寫過(guò)的css，總是無(wú)語(yǔ)凝噎，但這種情況在近期得到了控制。

• BEM命名法：在初學(xué)前端時(shí)，我一直以為自己正確的使用了它，但總是寫出無(wú)法控制，或者混亂不堪的代碼，以至于我在一段時(shí)間里放棄了它轉(zhuǎn)而采用了其他方式（css-module,css in js），直到真正的花時(shí)間去理解后，才發(fā)現(xiàn)原來(lái)可以寫出簡(jiǎn)明易懂且結(jié)構(gòu)化的命名，當(dāng)然，配合css-module使用效果更佳。
• flex與grid：flex解決了普遍意義上的元素定位問題而grid則是在二維布局上給出了更為優(yōu)秀的解決方案，在移動(dòng)端等不存在過(guò)多兼容性問題的平臺(tái)上，能大量簡(jiǎn)化代碼，可以算是生產(chǎn)力上的提升（grid兼容性不佳，但可以在個(gè)人項(xiàng)目中使用）。

主要是以上兩點(diǎn)解決了我個(gè)人的部分疑惑，當(dāng)然實(shí)際上用于解決問題的技術(shù)遠(yuǎn)遠(yuǎn)不只，例如，淘寶rem布局方案，解決了移動(dòng)端適配問題，使用less，sass，使用css原生變量....

關(guān)于javascript

作為前端，對(duì)于javascript愛恨交加，可以直接的說(shuō)它是Bad language，但唯一讓人不那么悲觀的是，它正在突飛猛進(jìn)的發(fā)展，正在不斷完善。

相對(duì)于css來(lái)說(shuō)，js的學(xué)習(xí)之路其實(shí)還算有趣，在工作中陸陸續(xù)續(xù)買了一些書，本想深入學(xué)習(xí)可惜都是有始無(wú)終（高程，js設(shè)計(jì)模式，高性能js，深入react...），可以算的上是悲傷的故事，日常沉迷動(dòng)漫游戲，唯一值得慶幸的是零碎時(shí)間里看了些電子書，其中閱讀后收獲最大的是《You-Dont-Know-JS》

第一次看《You-Dont-Know-JS》是初學(xué)前端那會(huì)，當(dāng)時(shí)花了一個(gè)月斷斷續(xù)續(xù)的勉強(qiáng)看完（跳了很多代碼），后面重新?lián)炱饋?lái)看是去年年末，花了2周，看完后莫名的有種豁然開朗的感覺。雖然作者在書中夾帶了一些個(gè)人立場(chǎng)，但無(wú)可否認(rèn)書是好書，取自己需要的知識(shí)便好，雖然書中很多內(nèi)容可能偏向于理論，但很有趣不是嗎

有一個(gè)問題一只困擾我，是一本書讀多次還是多次讀不同的書效果好...

javascript中的代碼命名曾一度困擾我，現(xiàn)在依舊。變量的命名無(wú)非是明確意義，但函數(shù)命名呢？對(duì)函數(shù)命名的猶豫不決導(dǎo)致不同項(xiàng)目中，截然不同的命名風(fēng)格，簡(jiǎn)直糟糕透了。于是給自己添加一些約定（個(gè)人意義上的）

• 命名必須由4個(gè)部分組成，是否私有（私有加_），事件類型，事件描述，事件狀態(tài)（狀態(tài)允許為空），例如handleUserDel，onTouchMove, routeHome, _processDateToString
• 事件類型的區(qū)分，非私有的綁定事件中區(qū)分類型的主要依據(jù)是事件的真實(shí)動(dòng)作，route表示這將是一個(gè)調(diào)用路由跳轉(zhuǎn)的函數(shù)，handle表示處理用戶事件，on表示監(jiān)聽事件...,可能會(huì)容易把handle和on搞混了，簡(jiǎn)單的區(qū)分原則是，當(dāng)用戶主觀上直到自己當(dāng)前所進(jìn)行的操作時(shí)，那么就是handle，比如一個(gè)刪除按鈕，用戶點(diǎn)擊前，知道這個(gè)操作將會(huì)發(fā)生的后續(xù)動(dòng)作。非主觀時(shí)，例如用戶無(wú)意識(shí)的點(diǎn)擊了網(wǎng)頁(yè)某處，然后彈出一個(gè)萬(wàn)惡的彈窗廣告，那么就是on。

以下為其他碎碎念，帶偏見的技術(shù)推薦，瞎扯。

• 關(guān)于前端框架，vue，react，angular。

  • 站在公司的立場(chǎng)上，小公司使用vue可以做到利益最大化，入門簡(jiǎn)單，招人簡(jiǎn)單，模板開發(fā)。站在一個(gè)好學(xué)的前端的立場(chǎng)上，react與angular優(yōu)先，當(dāng)然并不是貶低vue。
  • vue我只提到了入門簡(jiǎn)單，但是它不易精通，不易優(yōu)化（個(gè)人見解），精通怎么定義呢，理解它的雙向綁定并不困難，網(wǎng)上相關(guān)資料一堆，但是理解后呢...路漫漫，vue入門簡(jiǎn)單導(dǎo)致的另一個(gè)問題是社區(qū)并不活躍，愿意開源的或是有能力開源的開發(fā)者在vue廣大用戶中占比太少。
  • react是個(gè)好東西，雖然精通遙遙無(wú)期，但奈何日常寫著爽,react虐我千百遍我待它如初見（css in js 都是異端）。
  • angular，有點(diǎn)興趣，順便實(shí)踐typescript就學(xué)學(xué)，順便學(xué)點(diǎn)設(shè)計(jì)模式之類的，挺好。（本來(lái)對(duì)angular沒任何興趣，但之前那次大漠vs尤大的時(shí)候，感覺被強(qiáng)行被動(dòng)安利了一波，然后查了相關(guān)資料，感覺不錯(cuò)....）

• 關(guān)于typescript，第一次聽說(shuō)ts我是帶著偏見看待它的，感覺無(wú)非是給js加了類型，最后還是得編譯為js沒什么大不了的，可能學(xué)了它后面就過(guò)時(shí)了，還不如學(xué)好js，es6天下第一....然后不知道是哪天，嘗試性的學(xué)了下，于是就跳不出來(lái)了....ts天下第一，學(xué)js都應(yīng)該試試ts....優(yōu)缺點(diǎn)如下，自行選擇

  • vscode原生對(duì)ts有著無(wú)敵的支持，智能提示等
  • 解決了開發(fā)中的痛點(diǎn)
  • 學(xué)習(xí)ts能夠?yàn)橄裎疫@樣純粹的前端（非科班or非后端轉(zhuǎn)前端）提供一個(gè)漸進(jìn)式的，接觸一些其他領(lǐng)域的途徑，如泛型，接口，抽象類之類平時(shí)沒機(jī)會(huì)接觸概念，雖然現(xiàn)在Symbol.iterator也可以算是接口但終歸不完全是。
  • 能夠修正對(duì)于面對(duì)對(duì)象的一些錯(cuò)誤概念（個(gè)人主觀意見）
  • 配合node還行
  • 缺點(diǎn)我簡(jiǎn)單列一下，1.學(xué)習(xí)成本高，2.文檔爛，3.文檔很爛

• 關(guān)于immutable，redux，vuex，mobx, lodash

  • immutable解決了在react，vue之類框架中，數(shù)據(jù)更新的一些問題。例如更新react數(shù)組中某對(duì)象的值，有學(xué)習(xí)的價(jià)值，但我懶得看文檔，一直處于光用不看的程度....導(dǎo)致了一堆問題，以至于某些項(xiàng)目中放棄使用了。
  • redux,vuex,mobx,三個(gè)都是flux架構(gòu)的具體實(shí)現(xiàn)，用到什么學(xué)什么就好了。
  • lodash作為一個(gè)優(yōu)秀的函數(shù)工具庫(kù)，一直試圖去看源碼學(xué)習(xí)，因?yàn)閼邪┓噶擞谑峭系浇裉?#xff0c;已被列入今年學(xué)習(xí)計(jì)劃中。

• 關(guān)于webpack，雖然看不懂，但修修改改還有必要的。且行且學(xué)，愿它被取代...

• node從一開始的紅紅火火到現(xiàn)在的歸于冷靜，在我眼里是node未來(lái)的穩(wěn)定發(fā)展的。

  • koa2是目前在學(xué)的框架，雖然很基礎(chǔ)，但勝在易于理解，且行且學(xué)。
  • mongodb是異端，可以學(xué)，但沒必要深入，有那時(shí)間學(xué)mysql就好了。
  • node寫爬蟲其實(shí)是一件很有趣的事情，值得嘗試。

• v8，作為一名有追求的前端，學(xué)習(xí)v8的相關(guān)內(nèi)容會(huì)對(duì)代碼更加深刻，并且可以對(duì)代碼進(jìn)行一定的優(yōu)化，以下僅作為拋磚引玉，感興趣可以了解。

  • 去優(yōu)化(v8會(huì)多次對(duì)動(dòng)態(tài)改變參數(shù)類型的函數(shù)進(jìn)行去優(yōu)化操作)
  • Hidden Class (盡可能避免在class外部添加屬性，會(huì)打亂v8內(nèi)部維護(hù)的快速查找的hidden calss關(guān)系，而降級(jí)到哈希)
  • gc

• python 曾經(jīng)花過(guò)一個(gè)月看完了python教程，也算簡(jiǎn)單入個(gè)門，后續(xù)發(fā)現(xiàn)，實(shí)際意義上對(duì)前端來(lái)說(shuō)，花這時(shí)間去學(xué)node或者ts，獲得的收益會(huì)大得多，即使是學(xué)java也比學(xué)python好，原因是es6和python相似度過(guò)高，學(xué)習(xí)python所收獲的遠(yuǎn)沒有想象中那么高。

完

零零碎碎寫到現(xiàn)在花了一個(gè)多小時(shí)，流水賬就是好寫，最后附帶下未來(lái)的技術(shù)展望，以及學(xué)習(xí)路線。

• 學(xué)習(xí)typescript=>學(xué)習(xí)設(shè)計(jì)模式=>有機(jī)會(huì)的話看看一些相關(guān)框架的源碼=>學(xué)習(xí)node
• 2018計(jì)劃產(chǎn)出：個(gè)人博客，前端react，管理端angular，后端koa2

總結(jié)

以上是生活随笔為你收集整理的2017年前端工作小结，个人踩坑之旅，前端学习者的杂谈的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。