概述

新年都第二週了才來寫總結的也是沒誰了。看了下17年元旦是自己一個人在家的，好好思考了下接下來要做什麼，雖然17年已經過完，證實當時的計劃有很多都偏離了方向，但是定個目標還是很重要的，這樣讓自己可以有節奏的掌握自己的規劃進度。剛好接下來也要定18年上半年的KPI和IDP了，去年下半年的基本都完成了，因為給自己的定的目標不是很高，但是好在切實有效的執行完了，感覺還是有點收穫的。像這種碎碎唸的文章其實沒什麼乾貨的，我一般是寫給自己記錄的。

工作變化（前端-重構）

去年上半年換了工作，加入新的團隊，接觸新的工作流程以及新的知識層面。
工作流程從以前的 產品——設計——前端——後端
變成了現在的 產品——互動——視覺——重構——前端——後端

作為前端可能會關注業務邏輯和資料互動，但是作為在設計中心的重構，崗位職能跟前端是有一定區別的，首先重構主要寫HTML和CSS，更關注視覺還原，互動體驗，使用者體驗，以及更好的配合前端開發。

因為關注視覺還原，所以對設計稿的還原會比較較真，基本做到畫素級還原
因為關注互動，所以會更在意使用上的互動邏輯和互動方式
因為關注使用者體驗，所以在頁面的製作過程中，基本上都會自然而然的加上一些動畫效果，這也促使我去年在transition、transform、animation補間動畫、幀動畫（主要CSS3動畫）方面有了一定的積累，對動畫有了新的認知，或者說動效，微動效等，可以瞭解谷歌Material Design動效指南。

移動Web

之所以單獨拿出移動Web來說，是因為去年大部分時間是在做移動web的需求，主要配合產品做一些運營活動和開發一些APP內嵌頁面。
最主要的收穫應該是對移動端頁面適配有了比較好的認知，而且有了自己的一套應對方案，比如單屏頁面，滑屏頁面，內嵌內容型頁面，活動長頁面等型別。flex佈局，百分比佈局，rem佈局，vw單位佈局等，具體我在專欄裡面也分享了一些，可以戳這裡看《移動Web開發實戰》，目前已經分享了 移動Web開發基礎 系列12篇。

對移動端佈局和css技巧也有了一點點積累，可以很好的滿足工作需求，並在不斷學習中。

程式碼規範和元件化

因為團隊還算挺大，負責的專案也是錯綜複雜，多個專案之間需要來回切換，有時移動端PC端來回切換都有點懵，所以為了團隊之間協作方便，提高開發效率，保證產品體驗統一，視覺風格統一，元件統一，做好程式碼規範顯得尤為重要，所以嚴格按照團隊規範開發是很有必要的。

具體的規範實施從元件化做起，將產品開發過程中重複的元件梳理出一套基礎元件，然後根據專案業務，梳理出一套業務元件，元件的命名、結構保持統一風格，這樣開發多個專案其實跟開發一個專案一樣的。
目前是靜態元件庫，後面會用vue開發成可直接使用者生產的UI元件庫，方便快速開發產品。

工作流程

相信有很多老前輩也這麼說過了，寫程式碼只是完成需求的一部分，最重要的一部分其實是業務理解，需求分析，跟產品，設計溝通，提出自己的疑問或者建議，站在使用者的角度看待這個需求，一般看具體需求，有些需求會提前先跟設計溝通，提出建議，有些是會等設計直接提供設計稿之後，對照需求分檔和設計稿進行分析，將疑問以及建議彙總，然後再找產品對，最後才開始動手寫。
為什麼這麼複雜呢，因為不管哪個環節，都有遺漏的可能，所以我們要在我們這一環儘可能的降低這種分享，重構這個環節直接涉及到頁面DOM的節點，所以確定性很重要。
同時設計經常會遺漏一些狀態，比如無資料，無網路，錯誤提示，toast提示，彈框提示，分享提示，滑鼠hover態，按壓態等，這些設計最好能有個自查表，交付的時候，當前作為重構要需要對前端同學有個自查表啦，這樣就降低了來回修改的風險和成本。
如果你說這只是因為前端和重構分開工作的原因，如果是一個人完成的話就不存在這些流程，但是我覺得其實不然，即使一個人開發來回修改是視覺結構，甚至修改業務邏輯，這其實對開發影響挺大的，所以這不是分工的問題。

學習總結

大家對於學習都很認真執著，會花時間認真探討，會快速執行和善於總結，團隊去年梳理出UI元件庫，動效庫，總結文章幾十篇，每週會有一次分享，這拓寬了我的知識面，讓我對行業有了更多的認識。去年一整年其實自己寫的文章很少，只有四十篇左右，這其中主要包括了我學習小程式開發中的一些記錄，實際意義不是很大，希望自己還是要多學習，多總結，多輸出！

18展望

2018年希望自己繼續對前端基礎技術進行深入學習，打好JS基礎，對H5開發有更多的探索，比如H5小遊戲，canvas動畫等，也希望近期學習的SVG及動畫能有更多的實踐應用。
紮實重構技能，探索H5，關注前端開發，實踐小專案。