SegmentFault 社區訪談 | Meathill：從業 10 餘年的年輕 Developer

上期訪談了重量級的 iView 做者 Aresn ，此次的訪談對象一樣是重量級的-- Meathill。不僅是體重，若是你常逛咱們的講堂板塊 ，你會常常在咱們的熱門推薦講座中看到他的身影。

先不說 Meathill 10 年多的從業史，清蒸簡單地說下我的對 Meathill 的一個非技術印象吧：聲正、直爽（緣由此處不作詳說，有興趣評論區見）、年輕。雖然 Meathill 從業已 10 餘年、看問題一針見血，可是心態尤爲的年輕：愛玩、愛吃，還擼劇…

下面遞 ? 給 @Meathill 讓你們對他有個技術和非技術的認識~

關於 Meathill 本人

個人花名叫「肉山」

Hi，肉山老師，簡單地和你們打個招呼，介紹下本身吧

你們好，我叫翟路佳，花名「肉山」。這個外號是高中時一位喚做「白褲頭」的同窗所取，已經伴隨我大半輩子。與 Dota 毫無關係，個人英文名是 Meathill，網上大部分 Meathill 都是我。

我 2006 年畢業於中國地質大學（武漢），沒有走校招，而後進京務工。有幸獲得一家垂直門戶垂青，入行作頁面仔。網站前端 2005~2006 年發生了巨大變化，你們基本上都是半路出家，面對互聯網和前端的高速發展，只能儘可能堅持住不要掉隊。那幾年加班很厲害，感受本身成長也很快，頭髮掉的更快，用《一拳超人》的臺詞就是：我變禿了，也變強了。

2012 年到 2016 年期間，我加入朋友的創業公司，共謀大業。中間起起伏伏，最終仍是失敗了。去年離職以後，想在培訓分享領域取得一些成長，因此今年大多數時間都在這個方向努力。成效不高。從一個無名氏到如今能接受 SF 的訪問，我以爲進步是有的；但從養家餬口來看，仍是遠遠不夠。因而8月份，我加入 OpenResty Inc，工做至今。

我常常在微博 和 SF 上活動，大家能夠在上面找到我。個人文章多數會發在個人博客 上（SF 只發技術職業相關），也歡迎你們光臨。

從業 11 年

細細數來，肉山老師已經從業 11 年了，對此，你有什麼感想嗎？

感想頗多呀，哈哈。

最大的感想是：時間過得好快呀。畢業找工做入職彷佛纔剛剛發生，如今已經工做 11 年了。剛開始工做的時候，看周圍的人以爲他們都好牛逼啊，什麼都會；現在周圍的人都好年輕啊，比我小十幾歲的比比皆是。

說點對你們有用的吧。年少的時候，我以爲世界很單純，作好本身就能夠；年長一些以後，往往回首，總會發現一些處理得不好的地方，大量時間被浪費。我建議你們平時多觀察周圍，學校公司社會，瞭解其中的運行規律。好比找工做，第一份工做最重要的就是工資。不少人以爲，能學到東西纔是最重要的。可是，若是一份工做能讓你掙到最多的錢，那它必定會給出有挑戰性的任務給你；並且，從可執行性的角度來看，只有工資，是一個明確的指標，其它工做氛圍、學到東西什麼的，都虛無縹緲幾乎沒法考察。

理解公司的運營機制，瞭解社會的運行規律並不是要你放棄理想主義與社會同流合污，而是當你面臨選擇的時候，可以作出最正確的選擇。我回顧本身的職業生涯（學生生涯浪費的一塌糊塗都懶得分析了），以爲本身大約浪費了2~3年時間，並且這些浪費理論上是能夠避免的。若是這些時間利用好了，我如今的身價翻上一翻應該沒有問題；即便沒利用好，拿來作分享在社區刷存在感，今年也沒必要舉步維艱了

愛旅行

肉山老師在本身的微博 定義本身是專業前端開發，業餘產品經理，吃貨，旅行愛好者。上個月你剛去過日本，你去過的令你最印象深入的地方是哪？

此次去印象最深的是環球影城。

個人遊記裏是這麼寫的「第一個看的項目是終結者2。開場前我還和老婆說，不會真放2個小時吧……她說：你最好擔憂別排這麼久隊只放5分鐘。結果開場後疑慮一掃而空：是完徹底全脫離正片的新冒險。固然阿諾還在，甩槍上膛的酷炫動做也還在。結合各類3D效果，舞臺影片結合，4D，3幕互動等等，看的我眼淚止不住的流。太棒了太棒了，沒想到少年最愛能以這樣的形式煥發新生。天然小朋友被嚇哭了。」

我很喜歡旅行，由於能夠見識到不少不一樣的人事物。若是你同時還喜歡思考，就更有樂趣。好比我去越南富國島，環島遊的時候看到不少當地人住在鐵皮房裏，房子很破，裏面也沒啥值錢東西，就在門口綁一個吊牀，躺在上面什麼也不幹。而後聯想所謂「赤道的詛咒」，以及新加坡前總理李光耀的話：新加坡之因此發展得這麼好，由於行政機關都裝了空調。深表贊成。

是個全棧工程師

清蒸看你的我的主頁 ，你是本科讀的是應用化學，但如今是一個 Full-Stack Developer ，當中經歷了怎麼樣的曲折呢？

哈，這個說來話長。

首先我喜歡寫代碼。我小學的時候就經過一些科普讀物瞭解到電腦和編程，而且利用各類機會嘗試編程。家裏也很支持，我在同齡人當中算比較早接觸到電腦，大約小學的時候就給我爸開發了一個預算工具，用 QBasic 寫的，跑在 DOS 上。當時好象是9四、95年，都尚未 Windows 95。

然而這幾乎是我正式工做成爲一名程序員以前，所達到的最高峯了。由於個人家裏沒有人能告訴我接下來應該幹什麼；或者這個程序怎麼改進；或者我怎麼把它產品化。以後十年，個人電腦技能除了打遊戲，大多用來裝電腦和修電腦。

因此我一直都想作一名老師，或者，可能「嚮導」更合適。幫有興趣的人進入編程領域，避免更多的電腦神童「淪爲」遊戲宅。

書歸正傳。雖然沒有更進一步的做品，但我對編程的興趣仍然很大，因此斷斷續續地學習着相關知識。高考失利，第一志願報考浙大軟件學院落榜，好在第二志願的地大把我收了，也算入讀 211。可是專業就很差選了，服從分配，學習應用化學。大學環境比起高中變化很大，一不當心就掛了科，致使大二轉專業也不行，索性一直讀到畢業。

大學期間遇到兩本很是好的書：一本是香港自由職業者 Luar 的《FLASH MX 2004 AS2.0與RIA應用程序開發》，另外一本名字做者都不記得了，只記得是 Flash + XML 作卡牌遊戲的書。這兩本書都很是貼近實戰，包含完整的產品實現過程，能夠很容易地應用到其它產品上。經過學習，我接到了學校附屬幼兒園的網站建設工做；以後，又憑藉這段產品經驗，打動了第一份工做的面試官，得以跨專業進入 Web 前端開發領域。

能夠說，沒有這兩本書，就沒有如今的我。因此我也一直很想寫一些書，幫助如今想入行的人。

工做以後的經歷相對就平淡許多。從頁面仔開始，到 Flash 遊戲，再到 PHP 後端接口；從 table 佈局，到 div 佈局，再到 CSS3；從簡單頁面，到 Hybrid，到後端開發。期間有業務驅動，但更多的實際上是自我驅動。我喜歡挑戰新技術，喜歡在安全的範圍內儘可能嘗試拓展技術技能樹，我認爲這是有追求的開發者必須具有的素質。

現遠程辦公

肉山老師所在的公司是全員遠程辦公，你以爲這個辦公形式怎麼樣？

遠程辦公看上去很美，實際問題很多，我在 新司兩月記 和 自由職業的利與弊 中說過一些，你們能夠去看一下，這裏就再也不重複了。

我只想提醒那些沒有嘗試過遠程工做，對遠程工做抱有幻想的同窗：遠程有好處，也有壞處；決定一份工做是好是壞的因素裏，遠程是相對不過重要的一個；另外，遠程可能會比坐班更花時間。

固然，就目前來講，我也還在探索階段，但願有經驗的同窗跟我分享。我還計劃明年多出去幾回，看看是否是能體驗更多遠程的樂趣。

關於 Meathill 對技術問題的見解

Promise 的由來及優點

在講座【Promise 的 N 種用法】 有小夥伴問及Promise究竟是爲了解決什麼問題而出現的？以前看《你不知道的JavaScript》這本書上說「回調的最大問題是控制反轉，它會致使信任鏈的徹底斷裂」。我仍是不清楚Promise對於普通的回調來講有哪些優點？什麼是控制反轉？肉山老師能夠簡單地作下文字回覆嗎？

你肯定是書裏寫的是「控制反轉」嗎？這個詞跟 Promise 徹底不搭呀。

先解釋「控制反轉」吧，恰好我以前還稍微研究過。控制翻轉通常針對大型軟件。好比咱們有一個 ClassA，依賴 ClassB，這個時候咱們在 ClassA 的實例 a 中若是要使用 ClassB，可能會這樣：

constructor() {
    this.b = new ClassB();
}

可是這樣作可能會帶來問題：

1. ClassB 有多個同源的類，好比 ClassB1，ClassB2，這些類的功能類似，在不一樣場合要用不一樣的類
2. b這個實例可能須要在多個實例間共享，這些實例間的初始化順序難以肯定

因而便誕生了「控制反轉」這一說法，指控制實例初始化的工做，由建立它的程序員，轉移給使用它的程序員，因此「控制」就「反轉」了。與之相關的概念還有依賴注入。

這個概念用在 Promise 這裏有些莫名其妙。回調的確有問題，它最大的問題我在《JavaScript 異步開發全攻略》中 異步的問題 中解釋過：異步回調使得須要異步執行的函數（下面簡稱「異步函數」，並不是 Async Function，請注意），和回調函數之間，棧是斷裂的。因此在異步函數中發生的問題，從回調函數中沒法捕獲；在回調函數中發生了問題，咱們也沒法肯定是哪一個異步函數觸發的。這樣會給後面的 Debug 帶來不少問題。

目前 Chrome 初步解決了這個問題，Ajax 請求的觸發和回調能夠在自動合併。

Promise 並無解決這個問題；真正解決這個問題的是支持 Async Function 異步函數（ES2017）的運行時。因此 Promise 真正的優點在於：

1. 有很好的閱讀和書寫體驗
2. 能夠把複雜的回調嵌套縮減到2~3層
3. 能夠在任意運行時裏實現，好比小程序

學習 CSS 的姿式

肉山老師曾開過一個講座叫寫 CSS 也要開腦洞：萬能的 :checked + label ，不知道肉山老師作過最有趣的 CSS 特效是什麼呢？可否展現下關鍵代碼？

嗯，其實我沒作過特別炫酷的特效……可是我這樣說會顯得很弱雞，因此我換個角度再說兩句吧。

首先推薦兩個網站給你們：CSS-tricks 爲數很少目前還在更新的我的博客網站，內容以 CSS 爲主；CodePen 在線編寫代碼的網站，上面有不少案例分享。這兩個網站是同一個做者維護的，能夠在前者學習新技術，而後到後者去練習。

CodePen 上其實有不少炫酷的 CSS 做品，不過我以爲大部分並無什麼意義——做爲練習和教學固然有意義，在生產中沒有意義。《:checked + label》這個教程頗有意義，它是大量依賴這對選擇器組合實現互動功能的基礎；但很惋惜，CSS 領域並無給咱們留下不少相似的機會。缺乏編程能力，沒法響應用戶操做，仍然會是純 CSS 組件難以成規模使用的障礙。

不少 CSS 特效雖然炫酷，但都屬於「只要肯花時間我也畫的出來」；或者「好不容易畫出來了只能在項目中用一次好虧呀」這樣的分類。我以爲這些你們看一眼，知道 CSS 能作到便可，不用特地學習。

我相信這樣能夠解釋開頭「我沒作過特別炫酷的特效」那句話了。

最後，推薦我另外一個講堂中演示的效果 ，和另外一篇文章：《純CSS實現多選組件》

組件化的顆粒度

怎麼理解你的文章【組件化的度】 說的這個度呢？

這裏的「度」天然是指組件化的顆粒度。

「組件化」這個概念並不新鮮，在整個前端界——不限於 Web 前端——組件庫實在是很是廣泛的一類產品。React 和 Vue 是其中的佼佼者，它們不只實現了組件化的開發方式，還把建立組件化架構的難度下降到幾乎人人能夠參與的程度；又滲透處處處皆組件的程度。

因而不少同窗都開始建立本身的組件化框架，或者在新項目中運用組件化的開發方式。文中的問題就在這個時候出現了：面對一個將來預期不明確的產品，咱們應該選擇什麼樣的顆粒度呢？是儘可能粗放，儘可能保留 HTML 在模板裏，業務邏輯寫在每一個組件裏？仍是儘可能細緻，能組件就組件，寫起來幾乎看不到原始 HTML？

我認爲，開發 2C 產品（免費），使用組件庫完成快速搭建是合理的；可是在面向企業客戶（付費）2B 產品中，就不合適了。緣由是多方面的：

1. 2C 產品大部分都是線上功能。好比微博微信，全部工做都在一兩個界面中就能完成。
   2B 產品不少時候須要整合客戶的線下流程。這部分流程可能涉及多環節多部門甚至多公司，因此不可能修改流程適應產品，只可能產品適應客戶。
2. 2C 產品大部分免費，用戶願意付出時間精力學習。
   2B 產品基本都收費，客戶自誇爲上帝，主觀上更強烈的要求產品配合他。
3. 免費用戶看重產品的總體表現，好比微博微信其實都存在大量嚴重的體驗問題，但只要這些問題不影響用戶的主要目標，大部分用戶是沒有那麼在乎的；同類 2C 產品之間競爭，大部分也是總體vs總體。
   2B 產品的任何一條線都不能發生問題，不然影響流程的結果是致命的。因此 2B 產品並不要求有特別亮的亮點，但必定不能出現不及格的短板。

使用組件庫必然在不少方面受限制。在 2C 產品中，咱們能夠繞過去、湊合一下，甚至放着無論等庫升級均可以；可是在 2B 產品中，就只能本身千方百計應對，結果經常花費不少時間在本不須要的地方。

因此我認爲 2B 產品開發時，應該遵循這樣的原則：

1. 儘可能使用細顆粒的組件，好比原始 HTML
2. 儘可能使用簡單直接的邏輯，方便多人協做和維護
3. 開發時注意，一個東西出現 2 次，就要準備進行組件提取；出現超過 3 次，就要動手提取組件
4. 保持先粗糙再重構的方式進行開發。直到大部分業務邏輯都完成封裝。

GitHub 的正確打開方式

肉山老師在【面試經：GitHub】 中你說起到Issues 和 PR、看文檔、觀察提交頻率、GitHub 熱門趨勢、GitHub Pages，能夠推薦幾個你以爲比較不錯的 GitHub 項目嗎？

呃，這個問題……如今幾乎全部開源項目都託管在 GitHub 上。而知名項目都很好，文檔齊全測試完整開發團隊響應及時，沒有哪一個是很差的。

分享一個小經驗吧。昨天有位同窗向我提問【安裝vue-cli 安裝老是報錯 安裝不成功】 。拿到問題以後我天然 Google 之，然而換了幾個關鍵詞都沒找到答案。因而我嘗試在個人電腦上 npm i -g vue-cli，WSL 下一遍就成功了，Windows 10 命令行也不成功，錯誤信息也同樣。因而到 Github 找到 vue-cli 的倉庫，打開 issue，最新的就是這個問題：https://github.com/vuejs/vue-... 做者表示已經修改。這其實就是最多見的使用開源項目的體驗。

面試的要求

上面說到面經，清蒸這裏想問下面過百餘人的肉山老師，你做爲面試官對應聘者有什麼技術和非技術的要求呢？

技術要求得看崗位，Title 給的高要求天然高，反之亦然。通常來講，是這樣：

1. 剛畢業的新人，要求數據結構基礎紮實（說明仍是上課了），可以寫出僞代碼
2. 有一、2年的工做經驗，CSS 知識/HTML 知識，能寫出符合要求的 JS 程序
3. 更高，有熟練使用框架的經驗；有二次開發的經驗；有和後端配合的經驗

非技術方面的話，我通常會考察候選人是否喜歡技術。並非說必定要喜歡技術，只是我會更傾向於選擇喜歡技術的人。前端開發發展很快，突飛猛進，自身不熱愛技術的話，很難期待 ta 會堅持學習和提升本身。

接下來會考察學習習慣，我但願候選人喜歡思考，善於總結，可以堅持終身學習。

若是候選人有工做經驗，我一般還會要求 ta 把以前工做當中的組織結構，職責狀況講一下，看能不能講明白。我認爲能觀察團隊協做的人，在協做的時候也會作得更好。

Meathill 和 SF 的淵源

書籍《Electron + Vue 實戰建站工具開發》的大綱

繼《JavaScript 異步開發全攻略》 以後，肉山老師的新書《Electron + Vue 實戰建站工具開發》也在撰寫中，能夠簡單地談一談本書的一個主要內容和大綱嗎？

正如前面說的那樣，我很但願可以經過寫書的方式幫到有志於從事前端開發的同窗。從上一家公司離職以後，我花了大約兩個月時間學習使用 Electron + Vue 這兩門以前沒有接觸過的新技術開發了一個靜態網站建站工具 Meart。後來在 SF 作講座，就有出版社的編輯聯繫我出書，通過討論，就選擇了這個題目。

關於這本書的內容，請你們看這個簡介：Electron + Vue 實戰開發建站工具 前言 看完應該就清楚了。還有目錄，雖然還沒寫完後面確定有變化，不過大致上應該如此：Electron + Vue 實戰開發建站工具 目錄 。

回顧以前對我影響最大的兩本書，我會盡可能在這本書裏保持「實戰」的味道，儘可能分享我在編程過程當中的所思所想。我但願讀者經過閱讀這本書，除了可以循序漸進的開發出一樣地建站工具，還能構建起完整的前端知識體系——甚至包括後端——知道接下來要學什麼，去哪裏學，等等。

我還在 SF 上創建了技術圈：Electron + Vue 實戰開發建站工具 ，並計劃把全書的內容分批次更新到圈子當中，讓加入圈子的同窗能夠提早閱讀。固然，更重要的是我可以儘早獲得反饋，隨時修正內容。

新的系列講座

在 SF 開了 11 場講座以後，肉山老師是否會開新的講座呢？此次講座是系列的嗎，主要是哪塊內容？

固然。雖然分享的收益低於個人預期，以致於我不得不提早開始全職工做。可是這個事業我仍是要堅持下去的。

關於內容方面，首先我會補齊 實戰組件開發——手機日曆 (4/6） 的最後兩講，分別是利用 GitHub 創建產品網站，與其它開發者在社區交流；以及講 jQuery 插件升級到 Vue 平臺。

接下來我還準備了關於 CSS Grid 的《Grid 十八掌》——素材積累中，目前十四掌。——並且我發現我好象是 SF 上惟一講 CSS 的，我想之後繼續補充這方面的內容，因此還打算講一次 《CSS 動畫》。

再接下來想作一個系列教程：JavaScript 設計模式。其實這個的大綱我都準備好了，是給另外一個網站準備的，結果被運營據了，說怕太深影響銷量。我以爲在 SF 平臺上應該會更受歡迎。

前面是 Live，我還打算錄幾個視頻。一個是 Windows 10 WSL 搭建完整開發環境，目前正在找人贊助筆記本中；還和一些同窗合做，準備作一個面試編程題的視頻，大約由3~4個題目組成，目前只錄了一節。

最後還想作一個 Serverless 開發獨立項目的分享，不過這個只是一個想法，離實際還遠，畢竟我都沒有有說服力的項目。我只是以爲對於廣大前端同窗來講，光「仿餓了麼」，「仿網易雲音樂」是不夠的，咱們須要拿出更有價值的做品證實本身，Serverless 是個機會。

哈哈，一說到想法就收不住了。我目前工做之餘大部分時間都會拿來寫書，畢竟簽了合同，並且很慚愧的告訴你們，已經延期了……等到年末書寫完，就會一一兌現上面的承諾。

文末福利

在這篇 Meathill 的專訪文的評論區，針對肉山老師的博客中的文章（肉山老師的博客傳送門 ）或者他在 SegmentFault 問答板塊下的回答 內容進行提問，肉山老師將贈送評論者 5 折講座票喲~

肉山老師左右講座一覽：

• 系列講座【實戰組件開發——手機日曆 (4/6）】
• jQuery, Backbone, Vue
• Web 永恆不變的主題：佈局——Box，Flex，Grid
• Promise 的 N 種用法
• 寫 CSS 也要開腦洞：萬能的 :checked + label
• 前端面試攻略：JavaScript 排序與搜索
• 前端必備技能：CSS 預處理工具 Stylus 詳解
• 前端面試攻略：肉老師的面試題詳解