做前端，不搬磚

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

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

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

CodeFun是個啥？？？

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

CodeFun的特點

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

如何智能？

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

• 可維護性與擴展性

設計圖

像這樣的列表區(qū)域，我們平時都喜歡用數(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>二級導航標題</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大法即可。

• 合理性

設計圖

看到上面的排列布局，很多同學的寫法是浮動布局，但是都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寫法嗎？？？一個“工具人”都會啊，實在汗顏吶。。。。

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

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

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

 

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

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

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

• 資源路徑

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

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

生成代碼

// 云路徑
 <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應用的同學應該對于這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的高光時刻?。?！

案例一

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

效果圖

案例二

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

效果圖

案例三

卡片類型的頁面，CodeFun也毫不遜色?。?/p>

效果圖

黑科技來啦?。?！

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

• 操作步驟一

選擇右上角預覽功能

• 操作步驟二

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

• 操作步驟三

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

END

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

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