前端 技術總結

 

文章目錄

• 技術拔高

• 技術成長

• 總結展望

今年是拔高和成長的一年。重構技術的拔高和前端知識的補充成長。
今年申請成爲了CSDN博客專家，對寫博客產生了一種特殊的感情。
今年一全年都沒有「刷」和「發」朋友圈，對微信朋友圈失去了興趣，我嘗試打開看了幾回，最後都以爲無聊關掉了。

 

技術拔高
到如今，專職重構也快三年了。今年主要在移動web開發和css基礎及技巧上有了必定的拔高，對動畫有必定的理解。

移動web開發
經過對移動web開發的實踐與理解，持續輸出基礎文章，最後結合工做實際狀況，總結了一套移動web（H5）開發的知識體系，並在團隊分享，若是你有興趣，能夠看如下文章：

專欄：《移動Web開發實戰》
PPT：《移動Web開發實戰專欄總結（PPT分享）》

這是今年成就感最高的一個輸出。

CSS基礎及技巧
CSS基礎沒有太多成體系和理論的東西，全靠本身平時細心的積累，厚積薄發，處理一些問題，兼容性（如IE8）等，處理的是否足夠優雅和巧妙，能不能利用在重構知識上的優點幫助開發進行用戶體驗的優化，這裏推薦兩個。

基礎：《CSS屬性建議書寫順序》
技巧：《CSS技巧-根據兄弟元素的數量來設置樣式》

動畫
專職重構（UI開發）的同窗可能有體會，基礎的就是HTML、CSS、動畫。可是如何在基礎上進行深刻呢，好比UI組件庫、命名規範、模塊組件的劃分、動畫的形式，調性，性能等，咱們該如何最終實現用戶體驗的優化，這是一個積累的過程。我將動畫的基礎理解和性能對比進行了梳理總結，輸出兩篇文章：
《Web動畫形式》
《幀動畫的多種實現方式與性能對比》

 

 

技術成長
除了基礎的重構知識技巧提升，我對前端的知識體系也有了成長，包括在Canvas技術、JS面向對象編程、jQuery插件、Git基礎操做、Vue/Nuxt、小程序等方面有必定的實踐。

Canvas技術、JS面向對象編程
去年閱讀和實踐了SVG，入門了，雖而後續沒有精進，可是這種技術就是需求驅動的。Canvas也同樣。今年實踐了一些Demo，體系瞭解經常使用開發功能，掌握了Canvas的基礎，雖然下次再用起來什麼都不記得了，可是不要緊，忘了用，用了忘，最後就熟悉了。在實現Canvas效果的同時，也將JS面向對象編程加入進去實現，最後輸出了兩篇文章。同時對JS面向對象編程也有了必定的體會。

Demo目錄：https://github.com/xiangshuo1992/canvas-demo
分享文章：《Canvas星空效果（JS面向對象）》、《Canvas繪製時鐘（面向對象版）》

 

jQuery插件
在重構的過程當中，爲了實現全屏適配的效果，以前咱們在作移動端的時候已經找出了一種實踐方案，後來須要作PC的需求，同時須要兼容IE8，在同事的啓發下，我將移動端和PC的全屏適配的實現方案優化輸出成JQ插件，並分享出來。
在作頁面loading的重構時，我將圖片預加載實現了一個JQ插件並分享。經過這兩個插件的實現，體會了如何開發一個簡單的JQ插件。

《單屏（全屏）適配解決方案（jQuery插件）》
《Preload圖片預加載（jQuery插件）》

 

Git基礎操做
以前團隊使用的是SVN，因此對Git命令一直不是很瞭解，今年10月轉崗後，前端開發須要用到Git協做，因此在一邊學習，一邊實踐的狀況下，很短的時間就學會了Git的基礎操做，複雜的還不會哈，知道了Git工做流等協做模式，以後我也將這些基礎的操做分類進行整理，好比文件管理，分支管理，標籤管理等。後面我也將Git操做整理了一個專欄。

專欄：《Git操做管理》

Vue/Nuxt
轉崗以後，由於以前也有Vue基礎，因此才能快速整合重構流程，並上線了一個需求，後面又將這個需求改爲Nuxt架構，同時將開發中遇到的問題整理輸出。相似這樣的文章，你們感興趣能夠看個人主頁。

《Nuxt項目如何配置使用 Sass/postcss-px2rem/webpack-spritesmith》

 

 

總結展望雖然上面寫了不少，可是放到一年來看，好像也沒學習多少內容，工做上的具體細節也不方便說，但願本身保持對技術的探索與渴望，繼續精進和成長，也但願在新的一年裏，本身在前端技術領域有更多的掌握和領會，繼續在博客上輸出總結，讓本身的分享幫助更多的人。