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 详解
• 前端面试攻略：肉老师的面试题详解