2017年前端工作小結,個人踩坑之旅,前端學習者的雜談

jiangqizheng發表於2019-03-04

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

關於工作,在一家創業公司(沒人帶-_-),日常開發vue,react,react-native,微信小程式(目前)專案

關於技術棧,雜而不精沒救了…目前沉迷typescript

關於css

寫多少專案就得寫多少css,我曾一度輕視它,認為實現預期效果便是大勝利,濫用各類選擇器,命名雜亂無章,為了解決bug,而寫入行內式,然後在工作中順利的發展成為一名css上的殘障人士,偶爾面對曾經寫過的css,總是無語凝噎,但這種情況在近期得到了控制。

  • BEM命名法:在初學前端時,我一直以為自己正確的使用了它,但總是寫出無法控制,或者混亂不堪的程式碼,以至於我在一段時間裡放棄了它轉而採用了其他方式(css-module,css in js),直到真正的花時間去理解後,才發現原來可以寫出簡明易懂且結構化的命名,當然,配合css-module使用效果更佳。
  • flex與grid:flex解決了普遍意義上的元素定位問題而grid則是在二維佈局上給出了更為優秀的解決方案,在移動端等不存在過多相容性問題的平臺上,能大量簡化程式碼,可以算是生產力上的提升(grid相容性不佳,但可以在個人專案中使用)。

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

關於javascript

作為前端,對於javascript愛恨交加,可以直接的說它是Bad language,但唯一讓人不那麼悲觀的是,它正在突飛猛進的發展,正在不斷完善。

相對於css來說,js的學習之路其實還算有趣,在工作中陸陸續續買了一些書,本想深入學習可惜都是有始無終(高程,js設計模式,高效能js,深入react…),可以算的上是悲傷的故事,日常沉迷動漫遊戲,唯一值得慶幸的是零碎時間裡看了些電子書,其中閱讀後收穫最大的是《You-Dont-Know-JS》

第一次看《You-Dont-Know-JS》是初學前端那會,當時花了一個月斷斷續續的勉強看完(跳了很多程式碼),後面重新撿起來看是去年年末,花了2周,看完後莫名的有種豁然開朗的感覺。雖然作者在書中夾帶了一些個人立場,但無可否認書是好書,取自己需要的知識便好,雖然書中很多內容可能偏向於理論,但很有趣不是嗎

有一個問題一隻困擾我,是一本書讀多次還是多次讀不同的書效果好…

javascript中的程式碼命名曾一度困擾我,現在依舊。變數的命名無非是明確意義,但函式命名呢?對函式命名的猶豫不決導致不同專案中,截然不同的命名風格,簡直糟糕透了。於是給自己新增一些約定(個人意義上的)

  • 命名必須由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所收穫的遠沒有想象中那麼高。

零零碎碎寫到現在花了一個多小時,流水賬就是好寫,最後附帶下未來的技術展望,以及學習路線。

  • 學習typescript=>學習設計模式=>有機會的話看看一些相關框架的原始碼=>學習node
  • 2018計劃產出:個人部落格,前端react,管理端angular,後端koa2

相關文章