2017年前端工做小結，我的踩坑之旅，前端學習者的雜談

時間 2019-11-16

標籤 2017年前端小結我的之旅學習者雜談简体版

原文原文鏈接

工做差1月就要滿一年了，這一年中水平並無直接性的提高，以致於初學前端時沒法探究的諸多問題，依舊沒有頭緒，但工做就是的一次次跳坑和爬坑，它終究是帶給了我一些...javascript

關於工做，在一家創業公司（沒人帶-_-），平常開發vue，react，react-native，微信小程序（目前）項目css

關於技術棧，雜而不精沒救了...目前沉迷typescript前端

關於css

寫多少項目就得寫多少css，我曾一度輕視它，認爲實現預期效果即是大勝利，濫用各種選擇器，命名雜亂無章，爲了解決bug，而寫入行內式，而後在工做中順利的發展成爲一名css上的殘障人士，偶爾面對曾經寫過的css，老是無語凝噎，但這種狀況在近期獲得了控制。vue

BEM命名法：在初學前端時，我一直覺得本身正確的使用了它，但老是寫出沒法控制，或者混亂不堪的代碼，以致於我在一段時間裏放棄了它轉而採用了其餘方式（css-module,css in js），直到真正的花時間去理解後，才發現原來能夠寫出簡明易懂且結構化的命名，固然，配合css-module使用效果更佳。
flex與grid：flex解決了廣泛意義上的元素定位問題而grid則是在二維佈局上給出了更爲優秀的解決方案，在移動端等不存在過多兼容性問題的平臺上，能大量簡化代碼，能夠算是生產力上的提高（grid兼容性不佳，但能夠在我的項目中使用）。

主要是以上兩點解決了我我的的部分疑惑，固然實際上用於解決問題的技術遠遠不僅，例如，淘寶rem佈局方案，解決了移動端適配問題，使用less，sass，使用css原生變量....java

關於javascript

做爲前端，對於javascript愛恨交加，能夠直接的說它是Bad language，但惟一讓人不那麼悲觀的是，它正在日新月異的發展，正在不斷完善。node

相對於css來講，js的學習之路其實還算有趣，在工做中陸陸續續買了一些書，本想深刻學習惋惜都是虎頭蛇尾（高程，js設計模式，高性能js，深刻react...），能夠算的上是悲傷的故事，平常沉迷動漫遊戲，惟一值得慶幸的是零碎時間裏看了些電子書，其中閱讀後收穫最大的是《You-Dont-Know-JS》python

第一次看《You-Dont-Know-JS》是初學前端那會，當時花了一個月斷斷續續的勉強看完（跳了不少代碼），後面從新撿起來看是去年年底，花了2周，看完後莫名的有種豁然開朗的感受。雖然做者在書中夾帶了一些我的立場，但無能否認書是好書，取本身須要的知識便好，雖然書中不少內容可能偏向於理論，但頗有趣不是嗎mysql

有一個問題一隻困擾我，是一本書讀屢次仍是屢次讀不一樣的書效果好...react

javascript中的代碼命名曾一度困擾我，如今依舊。變量的命名無非是明確意義，但函數命名呢？對函數命名的猶豫不決致使不一樣項目中，大相徑庭的命名風格，簡直糟糕透了。因而給本身添加一些約定（我的意義上的）webpack

命名必須由4個部分組成，是否私有（私有加_），事件類型，事件描述，事件狀態（狀態容許爲空），例如handleUserDel，onTouchMove, routeHome, _processDateToString
事件類型的區分，非私有的綁定事件中區分類型的主要依據是事件的真實動做，route表示這將是一個調用路由跳轉的函數，handle表示處理用戶事件，on表示監聽事件...,可能會容易把handle和on搞混了，簡單的區分原則是，當用戶主觀上直到本身當前所進行的操做時，那麼就是handle，好比一個刪除按鈕，用戶點擊前，知道這個操做將會發生的後續動做。非主觀時，例如用戶無心識的點擊了網頁某處，而後彈出一個萬惡的彈窗廣告，那麼就是on。

如下爲其餘碎碎念，帶偏見的技術推薦，瞎扯。

關於前端框架，vue，react，angular。
- 站在公司的立場上，小公司使用vue能夠作到利益最大化，入門簡單，招人簡單，模板開發。站在一個好學的前端的立場上，react與angular優先，固然並非貶低vue。
- vue我只提到了入門簡單，可是它不易精通，不易優化（我的看法），精通怎麼定義呢，理解它的雙向綁定並不困難，網上相關資料一堆，可是理解後呢...路漫漫，vue入門簡單致使的另外一個問題是社區並不活躍，願意開源的或是有能力開源的開發者在vue廣大用戶中佔比太少。
- react是個好東西，雖然精通遙遙無期，但奈何平常寫着爽,react虐我千百遍我待它如初見（css in js 都是異端）。
- angular，有點興趣，順便實踐typescript就學學，順便學點設計模式之類的，挺好。（原本對angular沒任何興趣，但以前那次大漠vs尤大的時候，感受被強行被動安利了一波，而後查了相關資料，感受不錯....）
關於typescript，第一次據說ts我是帶着偏見看待它的，感受無非是給js加了類型，最後仍是得編譯爲js沒什麼大不了的，可能學了它後面就過期了，還不如學好js，es6天下第一....而後不知道是哪天，嘗試性的學了下，因而就跳不出來了....ts天下第一，學js都應該試試ts....優缺點以下，自行選擇
- vscode原生對ts有着無敵的支持，智能提示等
- 解決了開發中的痛點
- 學習ts可以爲像我這樣純粹的前端（非科班or非後端轉前端）提供一個漸進式的，接觸一些其餘領域的途徑，如泛型，接口，抽象類之類平時沒機會接觸概念，雖然如今Symbol.iterator也能夠算是接口但終歸不徹底是。
- 可以修正對於面對對象的一些錯誤概念（我的主觀意見）
- 配合node還行
- 缺點我簡單列一下，1.學習成本高，2.文檔爛，3.文檔很爛
關於immutable，redux，vuex，mobx, lodash
- immutable解決了在react，vue之類框架中，數據更新的一些問題。例如更新react數組中某對象的值，有學習的價值，但我懶得看文檔，一直處於光用不看的程度....致使了一堆問題，以致於某些項目中放棄使用了。
- redux,vuex,mobx,三個都是flux架構的具體實現，用到什麼學什麼就行了。
- lodash做爲一個優秀的函數工具庫，一直試圖去看源碼學習，由於懶癌犯了因而拖到今天，已被列入今年學習計劃中。
關於webpack，雖然看不懂，但修修改改還有必要的。且行且學，願它被取代...
node從一開始的紅紅火火到如今的歸於冷靜，在我眼裏是node將來的穩定發展的。
- koa2是目前在學的框架，雖然很基礎，但勝在易於理解，且行且學。
- mongodb是異端，能夠學，但不必深刻，有那時間學mysql就行了。
- node寫爬蟲實際上是一件頗有趣的事情，值得嘗試。
v8，做爲一名有追求的前端，學習v8的相關內容會對代碼更加深入，而且能夠對代碼進行必定的優化，如下僅做爲拋磚引玉，感興趣能夠了解。
- 去優化(v8會屢次對動態改變參數類型的函數進行去優化操做)
- Hidden Class (儘量避免在class外部添加屬性，會打亂v8內部維護的快速查找的hidden calss關係，而降級到哈希)
- gc
python 曾經花過一個月看完了python教程，也算簡單入個門，後續發現，實際意義上對前端來講，花這時間去學node或者ts，得到的收益會大得多，即便是學java也比學python好，緣由是es6和python類似度太高，學習python所收穫的遠沒有想象中那麼高。