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 上。当时好象是94、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. 有1、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 详解
• 前端面试攻略：肉老师的面试题详解