小記-我的前端開發工作經歷

大家好，我叫海瑞菌，從事web前端開發工作4年，期間在咪咕數媒旗下開發咪咕專案，以咪咕閱讀為主。一個手機閱讀軟體。

咪咕閱讀APP介面，app採取webview開發模式（前端H5頁面+app功能殼（B+C））。部分頁面及功能採用原生開發，內容展示採用前端頁面

前2年專案使用的是freemarker+css+es5+zepto(jquery)的開發模式開發的。freemarker是一種jsp模板引擎，使用碎片化開發思維，用於輸出伺服器響應資料轉化成html，本地寫好的freemarker程式碼複製到UES編輯系統中執行，拖入碎片進行搭建頁面。頁面渲染採用css+es5+zepto開發模式。

編寫碎片程式碼，採用freemarker模板引擎+html

管理線上頁面、碎片、樣式、指令碼、風格，採用編輯管理系統

開發樣式指令碼採用本地開發完傳入編輯系統，並預覽

本地除錯線上頁面採用fiddler代理除錯工具

直至開發除錯完成，測試通過，運營通知上線。

後2年專案採用react(es5版)+sass+webpack+gulp進行重構和新需求開發，多頁開發模式，頁面首屏資料是放在全域性變數pageData中的json，一個頁面中有多個元件，元件初始化時從props中獲取到當前元件的首屏資料。前端渲染資料為檢視。更新的地方使用ajax請求後臺微服務介面拿到json，使用setState方式更新檢視。經常使用的react生命週期：getInitialState（元件初始化）、componentWillMount（元件渲染前）、componentDidMount（元件第一次渲染後）、componentWillReceiveProps（元件接收到新屬性時）、render（渲染），其他較少使用。

頁面間跳轉使用a連結或使用客戶端開啟新webview，之所以多頁面是為了老架構向新架構過度，不影響原先頁面。

專案react本地開發環境

tomcat+gulp本地伺服器

react（es5）開發模式

sass預處理樣式

cmrsdk為jsBridge物件。可調取app原生方法，進行app互動

使用假資料在本地開發除錯元件。本地伺服器編譯檢視本地效果

元件通過svn上傳至測試或線上伺服器，由伺服器編譯後，通過編輯系統管理線上頁面。以及測試線上頁面。完成釋出。

使用fiddler抓包工具進行頁面代理，除錯線上頁面。

個人感覺公司技術使用上比較低端，業務卻比較繁重。沒太多時間學習，想跳出去卻很難，已掌握的技術低端，高階技術的專案經驗又不足。