做前端，不搬磚

大家好，我是考拉。從事前端五年之久，也算見證了前端數(shù)次變革，從到DW（Dreamweaver）到H5C3、從JQuery到MVC框架，無數(shù)前端大佬在為打造前端完整生態(tài)做出努力，由于他們的努力，我們開始重新思考前端的定義。作為一名前端，我們深知完美還原設(shè)計(jì)稿這部分工作簡單且枯燥繁瑣，這部分工作，我們統(tǒng)稱為“搬磚”，為了能減輕“搬磚”工作量，我們業(yè)內(nèi)人士也做了很多努力，開發(fā)了各ui庫，但是設(shè)計(jì)稿跟UI庫的樣式往往大有徑庭，因此還需要我們還是的從根上解決問題，才能最有效的減輕“搬磚”工作量。

所以CodeFun誕生了，做為一名CodeFun的忠實(shí)粉絲，不管是出于對(duì)CodeFun的鼓勵(lì)又或者是基于開發(fā)者的分享精神，我覺得我都有必要把這樣一款變革性的開發(fā)工具推薦給大家。從前端變革的角度來講CodeFun的誕生應(yīng)該是具有里程碑性的意義。JQuery的誕生，讓我們可以更方便的去操縱DOM，React/Vue/Angular等MVC框架的誕生讓我們不再去關(guān)心DOM，而CodeFun的誕生讓我們不再關(guān)心前端視圖代碼，看到這肯定很多同學(xué)要問,CodeFun究竟是個(gè)啥？

CodeFun 現(xiàn)已支持上傳 PSD 設(shè)計(jì)稿，別問我怎么知道的，掃碼進(jìn)入群聊體驗(yàn)最新內(nèi)測(cè)功能

CodeFun是個(gè)啥？？？

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

CodeFun的特點(diǎn)

相比于其他工具，個(gè)人對(duì)于CodeFun的使用感受就是：智能、強(qiáng)大

如何智能？

CodeFun所生成的代碼是可以用智能來形容，因?yàn)闊o論從可擴(kuò)展性還是可維護(hù)性亦或者合理性都是無可挑剔的

• 可維護(hù)性與擴(kuò)展性

設(shè)計(jì)圖

像這樣的列表區(qū)域，我們平時(shí)都喜歡用數(shù)組循環(huán)渲染DOM。來看一下CodeFun是怎么生成的

生成代碼

// 列表數(shù)組
  const data = { listnLG7eFN3: [null, null, null, null, null, null, null, null, null, null, null] };

  return (
    <div className={`flex-col ${styles['list']}`}>
    // 循環(huán)渲染
      {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>二級(jí)導(dǎo)航標(biāo)題</span>
            </div>
            <div className={`${styles['right-group']} flex-row`}>
              <span>更多</span>
              <img
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/60e57f7ffaa6670013254a0b/6157ff3d460a150011ec3267/16331624898575077322.png"
                className={`${styles['icon_1']}`}
              />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

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

• 合理性

設(shè)計(jì)圖

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

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

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

如何強(qiáng)大？

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

• 交互行為

設(shè)計(jì)圖

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

經(jīng)過一些簡單的操作，我們就可以直接將頁面上的某些元素綁定跳轉(zhuǎn)事件，是不是很 nice！

生成代碼

// 竟然用了useHistory
import { useHistory } from 'react-router-dom';

export default function Erjiyemian() {
  const history = useHistory();
// 跳轉(zhuǎn)事件都幫我生成了
  const view_17OnClick = () => {
    history.push('/index');
  };

  return (
  // 點(diǎn)擊事件已經(jīng)綁好。。。。
    <div onClick={view_17OnClick} className={`${styles['list-item']} flex-col`}>
      // 這里的代碼已經(jīng)被我干掉了，不為別的，就為你閱讀方便
    </div>
  );
}

看到這，是不是某些同學(xué)還學(xué)到點(diǎn)新知識(shí)-useHistory，不會(huì)吧，不會(huì)吧，都2021了還有同學(xué)不會(huì)hook寫法嗎？？？一個(gè)“工具人”都會(huì)啊，實(shí)在汗顏吶。。。。

• 數(shù)據(jù)綁定

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

// codeFun生成
 const data =  [null,null,null,null,null];
 // 手動(dòng)修改之后
 const data = [{title:""},{title:""},{title:""},{title:""},{title:""}]

 

其實(shí)大可不必，“工具人”這個(gè)稱號(hào)可不是蓋的，看操作！！！

經(jīng)過一點(diǎn)簡單的配置，我們就可以得到以下代碼，根本不需要做二次修改的啦??

  const data = { title: '傳騰訊音樂遭中國反壟斷機(jī)構(gòu)調(diào)查；茶顏\n悅色回應(yīng)阿里入股；Costco 登陸上海' };

• 資源路徑

生成帶有img標(biāo)簽代碼后，很多同學(xué)會(huì)覺得修改一下圖片路徑也很正常，畢竟是個(gè)工具嗎，要求不能太高，可是據(jù)我對(duì)CodeFun的了解，它應(yīng)該舍不得讓我們受累去做這樣的事情，果然發(fā)現(xiàn)了動(dòng)態(tài)配置資源地址的方式

通過配置資源地址，我們可以輕松生成含有對(duì)應(yīng)路徑的img標(biāo)簽

生成代碼

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

• 像素單位

做h5應(yīng)用的同學(xué)應(yīng)該對(duì)于這rem是比較熟悉的，但是每次用rem布局都得換算，對(duì)于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;
}

高光時(shí)刻

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

案例一

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

效果圖

案例二

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

效果圖

案例三

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

效果圖

黑科技來啦！！！

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

• 操作步驟一

選擇右上角預(yù)覽功能

• 操作步驟二

選擇微信小程序，點(diǎn)擊下一步

• 操作步驟三

掃描上方二維碼 即可進(jìn)行小程序預(yù)覽，怎么樣？四不四很贊吶！！！

END

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

PS：CodeFun現(xiàn)已支持上傳PSD設(shè)計(jì)稿，別問我怎么知道的，掃碼進(jìn)入下方群聊，不僅能收到最新消息，還可以體驗(yàn)內(nèi)測(cè)功能～ 也可以點(diǎn)擊閱讀原文訪問官網(wǎng) https://code.fun/ 了解