Daguo的每周清單：第六期

回廣東工作後，再次感受到了3月初就可以穿短袖的氣候，不過才熱了幾天就又冷了回去，馬上就是要迎接回南天的到來了吧？還記得前年去廣州實習的時候連續3個多月的梅雨天氣，廣東的雨季，也是久違了。

前端基礎

• 談談 Vue 業務組件

來自餓了么前端團隊對於組件和業務組件封裝的理解，通常在寫業務代碼的時候，我們需要對一些基礎的組件庫進行封裝，最簡單的添加個樣式，修改一下顏色，或者添加個圖標，很多基礎組件沒有提供出來介面，有時候還需要寫一些比較有入侵性的代碼，比如根據組件內部的結構樣式，寫一些樣式來改變展示效果，添加一些自定義方法等。

• 一勞永逸的搞定 flex 布局

現在寫頁面布局我都傾向於用flex來搞定，真的非常好用，在舊版瀏覽器已經被普羅大眾拋棄的今天，它兼容性不足的問題似乎微不足道了。

技術視野

• 前端神器：一行命令，React 組件轉 Vue 組件!

很久之前就在想像element-ui和ant design這些前端組件庫，基於某種框架實現後，為了迎合市場需求，必然會提供出多種框架實現，比如element原本是基於vue的，後來也退出了基於react和angular的版本，組件開發團隊是如何重構的呢？基於一種框架實現，了解另一種框架語法後自己一個個去重構吧？後來我看到vue和react都支持render函數去渲染逐漸，這是一些語法差異，完全可能通過映射關係編譯成不同的參數寫法。然後我就看到了這個轉換的工具，雖然不能完全無縫地編譯轉換React組件，但是可以節約很多重構組件的時間，如果在轉換地過程能輸出React哪些東西無法映射轉換為Vue，並給出提示和方案就好了。

• 美團開源小程序開發框架mpvue

這也是一個代碼的轉換工具，將vue工程代碼轉為小程序。感覺現在前端輪子越來越多之後，基於webpack的一些轉換編譯工具突然就火了起來，其實這是很正常的現象，原先我們開發小程序需要了解小程序的語法不說，小程序開發工程對組件化的不支持，讓很多習慣了前端工程化的jser感覺很彆扭。mpvue除了支持將vue語法直接轉成小程序之外，使用前端統一的樣式規範和標籤集，讓代碼可以多端服用，不過現在還不支持vue-router這個比較重要的功能。原先的wepy其實也是解決相同的痛點，不過wepy只是基於vue的語法，但它並不是原生vue語法，還是有學習成本在。

• 看清楚真正的 Webpack 插件

webpack如今已經成為前端工程化事實上的基礎，構建，打包，各種配置功能，如今已經很少看到曾經gulp和grunt的身影了，通過loader和plugin的不斷豐富webpack的能力，像共同代碼提取，markdown文檔解析，服務代理等等，讓前端開發越來越規範化。

• 我模擬了一個用瀏覽器挖礦的代碼，沒多複雜但別走歪路

區塊鏈技術給予的啟示，但我總覺得就是分散式計算的思想。

• 危險的 target=」_blank」 與 「opener」

前端的黑客技術總是給人驚喜，在非常簡單的角落，用幾個簡單的API就能製造web攻擊，之前完全沒想到點外鏈跳轉還有這種攻擊操作，漲姿勢了。

良心推薦

• eolinker:國產的API管理工具

在線API文檔，支持代碼注釋直接抽取為API文檔並在線部署，可以導入swagger文件，支持mock，自動化測試，減少前後端溝通成本。

• The 105 Best Tools to Start Your Business in 2018

創業團隊必須知道的105款工具，幾乎都來自美帝，不得不佩服這工具鏈實在是強大，親測了幾款都很好用。

• 飛冰 - 海量可復用物料，通過 GUI 工具極速構建中後台應用

阿里開源的網頁生成器，採用阿里淘寶內部最佳實踐，統一工程目錄和代碼結構，解決淘寶的業務交接成本，目前支持的可復用物料，即組件是基於React的，阿里目前內部正在統一用React作為標準，但也像業界提供Vue相關的物料組件，後續支持。

總結&吐槽

感覺現在在技術上遇到一些瓶頸，想要突破 還是需要靜下心來細讀一些文章，實踐一些代碼呀。

推薦閱讀：