細算下來，樓主已經做前端7年了，也算前端老鳥了，隨著經驗的積累，樓主也造了很多輪子，也經歷了很多事情，本文就記錄下樓主這2年在技術上的一些積累。

樓主按從頁面到組件，到工具化的東西一一陳訴

1，頁面開發：前端自適應方案adaptive.js及px-rem工具

樓主之前一直在做webapp,解決頁面自適應問題首當其沖，樓主當時選擇了rem了，網上的資料很多都是和淘寶的flexible思路一致，其最大缺點是計算不方便，樓主當時想了一個解決方案，讓設計圖的1px對應0.01rem,這樣開發起來就非常方便，後來就開發了adaptive.js。樓主2年前做這個的時候，還沒有這麽計算的，現在網上已經很多了。

關於adaptive.js可以查看：adaptive.js

雖然計算很方便，但是還會遇到很多問題，比如如何兼容px為單位的外部組件，如何更加方便地只需要輸入px就轉換為rem。樓主當時項目構建采用的是webpack,就開發了一個webpack loader工具，px-rem,它可以實時轉換px到rem。它還可以將靜態的css中的px按一定規則轉換為rem。

px-rem地址：https://github.com/finance-sh/px-rem

2，組件：H5萬能選擇器iosselect

前端開發，組件必不可少，樓主從jquery,zepto,backbone,angular,react一路走來，各種輪子造了不少，重復的輪子就不一一介紹了，這裏重點介紹下iosselect。當年設計師要求我在H5中實現ios中滾動控件的效果，樓主當時就懵比了，後來樓主借用iscroll造出這個輪子，後來又不斷完善，使其支持多種場景，包括地址選擇，時間選擇，日期選擇，高度可定制。而且能應用於各種js框架中，所以我稱它為萬能選擇器。

iosselect地址:https://github.com/zhoushengmufc/iosselect

3，前後端分離方案：realmock

前後端分離有助於提高開發速度，雖然現存的前後端分離方案也有很多，但是都不符合樓主的胃口，於是樓主顯示開發了一個json生成工具：randomjson。它用來生成隨機json，可以快速生成不同的數據，生成大量的數組，生成指定大小的圖片，降低我們mock數據時的手動輸入量。基於randomjson和express，樓主總結了一個解決方案，realmock，它借住與express，可以根據條件返回不同的數據，可以模擬接口返回延時，也可以返回不同的http狀態。而且都是前端js,對於前端開發者來說，非常容易上手。

randomjson地址：https://github.com/finance-sh/randomjson

realmock地址：https://github.com/zhoushengmufc/realmock

4，正則表達式工具：rline

樓主還自己寫了一個js版的js 正則表達式工具，可以將正則表達式圖形化

rline地址：https://github.com/finance-sh/rline

5，es6官方標準文檔翻譯：

樓主目前在翻譯 ECMAScript? 2016 語言規範 中文版

地址：https://github.com/zhoushengmufc/es6

總結：前端技術更新太快，樓主隨著年齡上升，感覺精力沒以前那麽旺盛了，但是樓主還是和廣大程序員同胞一樣，盡力學習新東西，新技術，以跟上時代的步伐。前端不易，與君共勉。

前端老鳥的這2年