做前端，不搬磚

大家好，我是若川。
從事前端五年之久，也算見證了前端數次變革，從到DW（Dreamweaver）到H5C3、從JQuery到MVC框架，無數前端大佬在為打造前端完整生態做出努力，由于他們的努力，我們開始重新思考前端的定義。作為一名前端，我們深知完美還原設計稿這部分工作簡單且枯燥繁瑣，這部分工作，我們統稱為“搬磚”，為了能減輕“搬磚”工作量，我們業內人士也做了很多努力，開發了各ui庫，但是設計稿跟UI庫的樣式往往大有徑庭，因此還需要我們還是的從根上解決問題，才能最有效的減輕“搬磚”工作量。
所以CodeFun誕生了，做為一名CodeFun的忠實粉絲，不管是出于對CodeFun的鼓勵又或者是基于開發者的分享精神，我覺得我都有必要把這樣一款變革性的開發工具推薦給大家。從前端變革的角度來講CodeFun的誕生應該是具有里程碑性的意義。JQuery的誕生，讓我們可以更方便的去操縱DOM，React/Vue/Angular等MVC框架的誕生讓我們不再去關心DOM，而CodeFun的誕生讓我們不再關心前端視圖代碼，看到這肯定很多同學要問，CodeFun究竟是個啥？
如果不想看后續文章，可以直接掃碼進群體驗產品，1024程序員節京東卡抽獎等你來。另外可以訪問官網 https://code.fun 了解。

CodeFun是個啥？？？

CodeFun是一款 UI 設計稿智能生成源代碼的工具，可以將 Sketch、Photoshop 的設計稿智能轉換為前端源代碼。這是來自CodeFun官方定義，看到這里不少同學肯定會想到另外一款工具-藍湖，如果CodeFun的作用僅僅類似于藍湖/摹客等工具，那么也不值得我花費時間寫一篇文章來推薦它，更不能將它定義為前端變革性工具。

CodeFun的特點

相比于其他工具，個人對于CodeFun的使用感受就是：智能、強大

如何智能？

CodeFun所生成的代碼是可以用智能來形容，因為無論從可擴展性還是可維護性亦或者合理性都是無可挑剔的

可維護性與擴展性

設計圖

像這樣的列表區域，我們平時都喜歡用數組循環渲染DOM。來看一下CodeFun是怎么生成的

生成代碼

//?列表數組const?data?=?{?listnLG7eFN3:?[null,?null,?null,?null,?null,?null,?null,?null,?null,?null,?null]?};return?(<div?className={`flex-col?${styles['list']}`}>//?循環渲染{data.listnLG7eFN3.map((item,?i)?=>?(<div?key={'item'?+?i}><div?className={`${styles['list-item']}?justify-between`}><div?className={`${styles['left-group']}?flex-row`}><div?className={`${styles['left-section']}`}></div><span>二級導航標題</span></div><div?className={`${styles['right-group']}?flex-row`}><span>更多</span><imgsrc="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624898575077322.png"className={`${styles['icon_1']}`}/></div></div></div>))}</div>);
}

怎么樣？是不是狠智能啊，直接CV大法即可。

合理性

設計圖

看到上面的排列布局，很多同學的寫法是浮動布局，但是都2021了，怎么能不用flex布局呢，flex布局作為前端神器，作用想必不用我多說了吧

.equal-division-item?{flex:?1?1?110px;?//?不管瀏覽器如何伸縮，圖片依舊保持三等分
}

作為一款工具，盡然能貼心的用flex布局，這還是工具嗎？這簡直就是工具人啊！！

如何強大？

上面僅僅為大家展示了CodeFun所生成的視圖代碼，是不是已經被CodeFun圈粉了呢？別急，還有更加人性化的騷操作！！！

交互行為

設計圖

上面我們展示生成了頁面列表的視圖代碼，心急的同學肯定在想，還有很多交互代碼，還不是得自己寫嗎？NO！NO！NO！CodeFun這個“工具人”已經想到了這一點，往下看！

經過一些簡單的操作，我們就可以直接將頁面上的某些元素綁定跳轉事件，是不是狠nice！

生成代碼

//?竟然用了useHistory
import?{?useHistory?}?from?'react-router-dom';export?default?function?Erjiyemian()?{const?history?=?useHistory();
//?跳轉事件都幫我生成了const?view_17OnClick?=?()?=>?{history.push('/index');};return?(//?點擊事件已經綁好。。。。<div?onClick={view_17OnClick}?className={`${styles['list-item']}?flex-col`}>//?這里的代碼已經被我干掉了，不為別的，就為你閱讀方便</div>);
}

看到這，是不是某些同學還學到點新知識-useHistory，不會吧，不會吧，都2021了還有同學不會hook寫法嗎？？？一個“工具人”都會啊，實在汗顏吶。。。。

數據綁定

跳轉事件的綁定是不是把某些同學下巴驚掉了呢？先收一收下巴，來看一下這個“工具人”另一個騷操作--數據綁定。不知道細心的同學有沒有發現，上面CodeFun為我們生成的代碼，雖然進行了數組渲染，但是數組里卻都是null，在實際使用場景中我們依舊需要數組里的數組，像這樣

//?codeFun生成const?data?=??[null,null,null,null,null];//?手動修改之后const?data?=?[{title:""},{title:""},{title:""},{title:""},{title:""}]

其實大可不必，“工具人”這個稱號可不是蓋的，看操作！！！

經過一點簡單的配置，我們就可以得到以下代碼，根本不需要做二次修改的啦🤩

const?data?=?{?title:?'傳騰訊音樂遭中國反壟斷機構調查；茶顏\n悅色回應阿里入股；Costco 登陸上海'?};

資源路徑

生成帶有img標簽代碼后，很多同學會覺得修改一下圖片路徑也很正常，畢竟是個工具嗎，要求不能太高，可是據我對CodeFun的了解，它應該舍不得讓我們受累去做這樣的事情，果然發現了動態配置資源地址的方式

通過配置資源地址，我們可以輕松生成含有對應路徑的img標簽

生成代碼

//?云路徑<imgsrc="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624930749770689.png"className={`${styles['equal-division-item']}`}
/>//?自定義路徑<imgsrc="/public/image/remote/2da259e8200dfcac7b79c4805a0a585f.png"className={`${styles['equal-division-item']}`}/>

像數單位

做h5應用的同學應該對于這rem是比較熟悉的，但是每次用rem布局都得換算，對于CodeFun來說，小case啦

選擇像數單位為rem，直接幫你生成rem單位的css代碼，就問你絲不絲滑。。。

生成代碼

//?px?單位
.equal-division-item?{flex:?1?1?110px;width:?110px;height:?74px;
}
//?rem?單位??
.equal-division-item?{flex:?1?1?6.88rem;width:?6.88rem;height:?4.63rem;
}

高光時刻

看到這里有的同學肯定會覺得這些案例也忒簡單了，實際工作中可比這復雜多了，CodeFun能解決嗎？接下來帶你見證CodeFun的高光時刻！！！

案例一

最常見的商城首頁，如果自己開發你需要用多久呢？使用CodeFun 依舊23秒 (實際使用時間取決于你CV大法的速度) 搞定

效果圖

案例二

像這樣有明顯層級感的頁面，CodeFun對于層級以及陰影的處理依舊是滿分操作

效果圖

案例三

卡片類型的頁面，CodeFun也毫不遜色！！

效果圖

黑科技來啦！！！

是不是看完高光時刻，有些同學是不是覺得還是不過癮呢，額。。。時間關系呢，還有一些功能就不一一介紹了哈（其實比較懶），不過呢，我還可以給大家推薦一個我常用的黑科技-小程序預覽功能，之所以能探索到這個黑科技，那是因為我那個比較N（S）B的老板，非得看到實際效果然后再提出設計圖的修改意見（MDZZ），不過還好，CodeFun包容了我老板的這個機智（智障）行為，一起來看看吧。

操作步驟一

選擇右上角預覽功能

操作步驟二

選擇微信小程序，點擊下一步

操作步驟三

掃描上方二維碼即可進行小程序預覽，怎么樣？四不四很贊吶！！！

END

以上只是關于CodeFun的部分功能，是不是覺得CodeFun是一款前端開發神器呢，其實關于CodeFun的其他功能還沒來得及使用，不過僅僅是上述功能已經讓我實現了“摸魚自由”，看到這你是不是也想盡快體驗一把23秒寫一個頁面呢？來，這是鏈接，別客氣：https://ide.code.fun。最后做為一名CodeFun忠實粉絲，衷心希望CodeFun團隊能為CodeFun賦予更多能力。