前端老鳥的這2年

    細算下來，樓主已經作前端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/zhoushengmufc/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/zhoushengmufc/randomjson

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

 

4，正則表達式工具：rline

    樓主還本身寫了一個js版的js 正則表達式工具，能夠將正則表達式圖形化

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

 

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

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

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

 

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