echofun / blog Goto Github PK

我们是 今日头条 的商业化广告前端团队；

我们每天都在考虑，如何使我们广告在头条全线的产品中有着更高的变现效率和更好的体验效果 ；
我们也在做着一些非常有意思的事情；
例如： Node.js, Koa, Express，Vue, VueX, Github, FullEnd, FullStack, Angular.js, WebviewJavascriptBridge, Bootstrap … …

如果 ...

• 你对这些词不陌生并且如数家珍，同时也是某个技术垂直领域的活跃开发者；
• 对其中的某些技术的解决方案，团队的管理见解独到，能够运斤成风；
• 对细节有着处女座样的坚持，对技术有着偏执狂一样的追求；

• 能够精通 HTML/CSS/Javascript 等技术点，拥有着扎实的前端技术基础； 对于实际生产中遇到的各类疑难杂症能够有着强大的解决能力 ；
• 自信，能够勇于真诚的表达自己；
• 较强的学习能力，对于业内新动向的发展能够保持了较好的敏锐性；

欢迎过来跟我们聊一聊！！ 坐标帝都，知春里；

对于这个职位

• 会负责广告前端的一些基础设施的建设；
• 会指导初级工程师的成长与发展；
• 会支持广告各个业务线的前端研发业务，为头条的亿万用户提供最好的广告体验；

我们只能给出参考待遇： 20 ~ 40K ；
通过了我们的面试，最终还是希望你 诚恳&放开 的跟 HR 同学聊一聊钱的问题；如果你意犹未尽，我们再来聊聊其他的方向； ^_^

欢迎加我微信：

当我下定决心开始做一个有趣而有意义的事情时，我都没有想到自己的动力会那么大，被自己都吓到了~ 哈哈 :)

在博客杂草重生的荒废了n个月之后，趁着最近略有闲暇，噌噌噌的花了两个星期的业余时间，把博客重新又搞起来了。
新在Github上开了一个repo，把原先的数据库由mongodb改成了mysql。于是乎还是发现mysql用起来比较顺手啊~ VPS由原先的burstNet升级到了linode，express更新到了最新的版本，作为老本行的前端也做了深层次的优化。
瞬间有种鸟枪换炮，犀利哥走上了巴黎时装周感觉~

当然，博客最重要的还是内容啦。
从2010年6月份开始，到2014年的10月份，将近四年的时间遇到过不少人不少事，有**的，又聪明的，有二逼的，有装逼的，有真诚的，有需要感谢的，有永远不想见的，有开心的，有难过的，有值得骄傲的，有痛苦的 ... ...
博客换过域名，换过内容，换过主题，换过技术架构。
总之贯穿了我毕业后的整个职业历程，也记录下了我的成长。看着自己从一个整天自怨自艾的小青年变成今天的自己。想想还是蛮欣慰的。这些年，没有白白的从指缝间溜走。
大大小小的写了约有四十来篇文章，网站迁移过几回，丢失了不少文章和图片。懒得去翻硬盘里那些百八十年的老数据去找了。以往对数据备份完全没啥概念的我，这回可是深有体会了。纸上得来终觉浅，这就算是成长的学费了吧。

总体看来，技术文章的数量在不断的减少，但是质量越来越高了，多了些体会和感悟。
重新上路，相聚无时，后会有期！

2015年又结束啦。按照惯例，总要在年末记上一笔流水账。

跟2014年一样，依旧是过得忙忙碌碌。团队从7个人一下子扩张到近20人。
相比于2014年，多了一点不一样的色彩。跟很多很多人沟通，学习。对于所做的事情，对于所遇到的人。都有了新的理解。这，应该就是所谓的 “成长” 吧。

遇到了某个小妞，我觉得可能是过去二十多年里最幸运的事情之一了。
有很多感谢的话要说，就都先憋着吧。今年的生日过的很开心，谢谢。
忙忙碌碌的工作，搞得我有点迷失了自己，对于什么是重要的什么是不重要的。我觉得有必要需要重新静下心来思考思考了。

希望呢，2016年不要那么忙了。能有精力抽出来，考完驾照，买辆车。练练吉他，写首歌。多把精力陪陪身边的人，带着我们家小妞去很多有意思的地方，把我们家小妞带回家 ：) ，这也算是新年的愿望吧，哈哈。
认认真真的生活，好好的对待身边的人。
踏踏实实的专注于手头的工作。
其他呢，看运气嘞 ~

本文中用到的示例代码：

<script src="./prototype.js"></script>
<div>
  <div class="node_1" id="node_1"> 
    <span class="node_3" id="node_3"></span> 
  </div> 
  <div class="node_2" id="node_2">
    <span class="node_4"></span> 
    <span class="node_4"></span> 
  </div> 
  <form id="test"> 
    <input name="ipt_a" type="text" /> 
    <input name="ipt_b" type="text" /> 
    <input name="ipt_c" type="text" />
  </form>
</div>
```html

$美元符号。

关于对这个美元符号的认识。
普通前端：哦，这不是jQuery选择符号吗？
文艺前端：这是一个自定义的函数哦！
2B前端：我擦，尼玛钱啊！

好吧，让我们言归正传。$符号，在很多编程语言中源于他的长度简洁（好吧，一个字符，没啥好说的了），标志性强（美元啊！），在很多地方都被广泛的使用了。
最有名的地方应该是属于PHP了吧。PHP的一般变量都是以$符号打头的了。说道前端，jQuery让他在前端的圈圈雷贯耳。以至于很多前端的新手，都会以为$就是jQuery的代名词。
今天我们说的是prototype.js，在这套框架中和$相关的函数有$, $$, $F, $A, $H, $R, $w… 好吧，别晕。让我们来一个个细数下这些函数。

$ —— 这个很简单没有什么好说的了。就是一个简单的id选择器。
举个栗子来说：

```javascript
$('node_1'); // 返回值就是node_1元素
```javascript

$$ —— 参数是个css选择器（你懂的），返回时是个按照在文档中顺序排列的数组。
官方的解释：采用随意数目的css选择器作为参数，返回的是被扩展过的（注：prototype会对原生的DOM元素进行扩展）DOM元素按照在文档中排序的数组。
和jQuery做个简单的类比，jQuery的方法$，其实就是整合prototype.js的$和$$，在prototype.js中，id选择器和css选择器被分离开来。至于优劣，不做过多评价。更多习惯
更多选择。
其实从实现的原理上讲，都是采用了Sizzle选择器。想要更深入了解的朋友请看这里
举个栗子：
```javascript
$$('#node_1'); $$('.node_4'); // 这样的方式也很熟悉吧，不就是和jQuery一样的嘛，简直弱爆了啦。如果你现在就这么认为了，那你就错了。
```javascript
$A —— 将任何array-like的结构变成array，是 Array.from的别称。
这里就涉及到了一个概念array-like的结构。这个也是js中独有的结构。
什么样的结构会是array-like的呢？array-like的结构和普通的结构又有什么区别？
在js中arguments, HTMLCollection, 这样的结构就是array-like的。和普通的数组的区别，就在于他不存在普通数组中的一些像pop, push等等常用的方法。《javascript精粹》中业提到过，
这种array-like的结构，其实是javascript设计中的一个缺陷。具体的一些差别，在这里就不做细讲了。
具体代码额实现也很简单，可以查看Github.
```javascript
function testCase() { 
  var arg = arguments; 
  console.log( typeof arg.push); // 输出为undefined   
  arg = $A(arg); 
  console.log( typeof arg.push); // 输出为function 
}

 testCase('a', 'b', 'c');
```javascript
$H —— 创建一个哈希列表
感觉这也没啥好讲的了，直接上例子
```javascript
var h = $H({ name : 'John', age : 26, country : 'Australia' }); 

// Equivalent to: 
var h = new Hash({ name : 'John', age : 26, country : 'Australia' }); 

// Can then be accessed the classic Hash way h.get('country'); // -> 'Australia'
```javascript

前段时间折腾了一台小车，使用树莓派进行的控制。DEMO 和硬件相关的部分如下所示：

视频地址

软件相关部分分为了三个端
一个是小车端（在树莓派中运行）；
一个是服务器端，用来中转手机发送的指令给小车；
一个是手机端，用来做小车的遥控器；
三个端使用 socket 协议链接。相关代码分享在了 Github 上。
代码仓库分别是：
小车代码仓库 ，服务器端仓库 ，遥控器代码仓库
其中小车的代码仓库中。积累了不少对树莓派的控制相关代码演示（高低电平以及PWM信号）。
欢迎一起交流。

Enjoy it !
转载请注明出处
botobe.net
本文Github链接

无论是对我们的代码解释执行，还是编译执行，词法分析都是作为第一个环节开始的。
词法分析的过程，可以理解为将字符序列转换为单词（Token）序列的过程。
本文中以如下的coffeescript代码为示例：

# Assignment:
number = 42
opposite = true
# Conditions:
number = -42 if opposite
# Functions:
square = (x) -> x * x

这里的单词（Token）是指一系列最小的对程序来说有意义的单元，例如"number", "=", "(换行)", "(空格)"等等。
对于coffeescript而言，有10中类型的token

1. identifier（标识符）：脚本中各种独立的标示符，例如number,opposite等等
2. comment（注释）
3. whitespace（空格）
4. line（换行）
5. heredoc（本地注释）：以"""或者'''开头的代码注释
6. string（字符串）：匹配的coffeescript中得字符串，例如'test'（coffeescript中得字符串用单引号围起来）
7. number（数字）：匹配的数字，包括了8进制数字和16进制的数字
8. regex（正则表达式）
9. js（js）：匹配的正则为/^[^\\](?:.[^\`])*`/，我觉得我的解释太TM多余了，还是看代码来的直观
10. literal（加减乘除，位运算，与或之列的符号）
    输入的是如上的一串coffeescript的代码，输出则是按照这是种token分类好的程序的最小单元的一个数组，提供给语法分析器继续进行分析。
    例如：
    

Enjoy it !
转载请注明出处
botobe.net
本文Github链接

2016年的年末 [ 12.24] ，我在美团外卖满了三周年的时间。
回过头来看看自己，这几年的变化确实还不小。看着往年留下的寥寥数笔，决定今年还是写些什么把。就当是这几年的一个总结。

迷茫

如果把毕业后的生活，按照五年一个阶段的划分。对于这部分应该是第一个五年计划中的阶段。初出茅庐，一直处于比较焦虑的状态。隐隐的有种声音经常在我的内心盘绕“在最好的年华，你想去做点啥有价值的事情嘞~ ”

对于这个问题，其实我也不知道该怎么回答。

于是乎，为了找寻答案。我折腾，再折腾的从南京到了北京到无锡再回南京再回北京。近三年的时间内，换了很多城市，走了很多地方。捣鼓了不少项目。遇到了不少各式各样的人。



不过值得一提的是蹉跎的时间中，不经意间练就了一手吉他的技巧，哈哈哈。经常跟朋友们开玩笑，以后可以上地铁，天桥下捞点外快了。

缘起

来到美团外卖是个偶然的机会。

当年的美团，在团购大战中异军突起。团购的这种模式，却是一直饱受质疑的。

13年巧合的机缘下，来美团面试：

一面是前端的技术面，聊了很多基础方面的题目，聊得应该还行。

二面是我后来的老板，看着是个瘦瘦小小其貌不扬的人。但是非常的精神，谈吐之间中气十足

面试完了我就回去了。美团的面试我也没放在心上，直到后边美团的HR联系了我。说三面不需要了（一脸黑线）。知道我算是通过了可以到了谈 OFFER 的阶段了。

手头当时就有了几份 OFFER，选择美团只是感觉美团 OFFER 略高的同时，跟HR聊天起来比较直接。不想某司的 HR，为了 500块钱，墨迹上好几天。甚至威胁就算不发 OFFER，也必须卡在这儿的。哈哈哈。我也是很无语。



在未来老板一通一通电话的 “慰问下”，于是13年底加入了美团的一个内部创业小项目“美团外卖”。当时的团队包括我只有6个RD。三个后端RD，一个iOS，一个安卓。我也是作为了项目组第一个前端工程师加入了美团外卖。



当年的我，对“创业”，做从0到1的事情。其实并没有太多的概念。大部分的程度上，我能理解的了的，都是父母那代人，或者老师们。给我们灌输的找个好工作，好好干活的**。


后来，我才逐步的意识和学习到，我从来没接触过的很多事。某种意义上讲，美团外卖的这段工作经历，算是我工作生涯中的第一个职业导师。

成长

a). 关于技术
在外卖的三年多时间里。见识学习了很多牛人的做事和工作的方式。

从零开始搭建了美团外卖的前端基础设施，应用在了大部分外卖的业务系统中。参与过外卖早期基本上所有的业务线。前两年多的事件里，一直在写代码，技术上有着不小的长进。
在这个过程中，也逐步的拉扯起了一只20多人的团队。



前端圈子中关于技术的撕逼比较厉害。隔三差五的会在微博上发起一波。



具体技术的优劣，我就不做评判了。但是我的观点始终如一“存在即合理”。至于有的框架的流行，有的框架的默默无闻。很大程度上其实取决于们暴露的 API 设计是否符合了大众开发者的口味而已。所以，其实我一直认为，一个好的工程师，某种意义上，也会是一个不错的产品经理。

流行框架的作者，一方面，是他们有着一定的技术功底，其次，他们也有着能被大部分接受的技术理念理念，在他们的框架中得以落实。
例如 jQuery 的 “select and do”，这个简单直接的理念最容易被大部分人接受的。早期 Moontools 比较推崇的 “一切皆是对象”，就没有这么好的运气，慢慢的会被淹没。



自己的框架能够被大部分人使用，对其作者也会有不断地敦促的作用。进而进行不断的迭代，迭代过程中会变得越来越完善。

有的时候是一些业务场景来倒逼了技术的提升，之前 @玉伯也叫黑侠 在文章中也提到过。眼瞅着 npm 的作者 isaacs，从 npm 项目之初，这个小伙的代码质量，从稀松平常到不断的老练。


a). 关于业务
在大部分的场景中，技术是服务于业务的。脱离了业务技术的独立存在毫无意义。脱离了技术的驱动，业务进展的也未必会顺风顺水。把持好两者的平衡，不是一件简单的事情，尤其是在一个高速发展，存在于了生死边缘的业务而言。对于一个技术管理者，会有不小的压力。



美团外卖刚开始所属的部门叫做新产品部，在团购的格局趋于稳定的情况下。作为一个新尝试性项目在内部发起。

几个RD同学在码砖之余，甚至会去帮助销售发发传单、搞搞地推。经常的大清早，就能够听见一群人在会议室响亮有节奏的喊口号。当时我们也都开玩笑道，我司是不是有传销的业务~ ？

美团外卖的业务，从我刚加入的时候每天十来单，短短的三年事件里就，到峰值时候的 900 多万单/天。这样的业务场景不多，能够见证了这个过程，陪同这么多牛人一起走过中间的路。回头想想，实在是不容易，也是幸运至极。

中间有一起开心过，也有一起针锋相对过。时过境迁，应该都算是一种财富吧。

a). 关于招聘
我的前端团队，从最初的一个人，到目前的24人。粗略的算下来，面试了约 400多 名候选人。

招聘的过程，我也在不断的反思。
在我看来，很多的面试官，都不是合格的。包括我们自己的面试官，往往会陷入一种，以己之长，考别人之短的陷阱，然后基于此得出一个结论。但是撇开“己长”，又如何去考察候选人呢？



衡量一个优秀的候选人，我跟跟 @左耳朵耗子 老师的观念大概的一致。

高效的学习能力，解决问题的能力。专业能力，固然非常的重要，但是在大部分的职位需求中，这两点相比较，会显得不那么重要的。当然，拥有这两种能力的人，我相信通常情况下，专业能力也不会差。

闻道有先后，术业有专攻。在前端知识体系的这个大杂烩之下，知识点纷杂又繁多。极少极少的人，能够做到多面手。有着较大的概率遇到的一个候选人，跟自己的知识体系不在一条路子上，然而这些人也很优秀。



衡量解决问题的能力这块。我个人而言，有两种方式，一种是做问题的情景假设。一种是手写代码。问题的情景假设这个很好理解，对于我扔出来的一个问题，候选人接触到过最好。就算没有接触过，也没关系。

聊聊解决的思路是否足够鲁棒，足够细腻，边界情况是否考虑得到，是否可以根据已有的知识沉淀触类旁通，举一反三。这个过程会显得尤为的重要。



高效的学习能力。这个则需要从候选人过往的经历中评断出来。外卖之前有位面试官，有种有意思的考察学习能力的思路。跟你介绍下一门新语言的特性，让你用新语言去迅速的描述一段逻辑。

招聘这块，还有个对面试官较大考验的，是否有足够的胸怀。一个团队，一个业务的长足发展，需要大量的人才。而往往的牛人，是有着自己比较独特的脾气、秉性的。这样的人在加入团队以后，会给团队带来新鲜血液的同时，也会带来一些较大的不确定性。这对候选人，甚至管理者的权威是个挑战，所以有时候需要一定的胸怀来包容着一切。



这也就是我们常说的，一流的人招一流的人，二流的人招三流的人。


d). 关于团队
一个团队需要多种不同的角色，才能运作的更好。有的人把这几种角色称之为：将才，帅才，兵才。也有的人把它称之为唐僧，猪八戒，孙悟空。

各种说法，我都有耳闻。但是我想，本质上是想通的。一个独立的团队，需要有人坐镇指挥大旗的方向，团队的价值观，团队的愿景，团队的文化，团队的氛围等等。这一切是跟这个团队 leader 的个人的性格息息相关的。

如果团队足够大。再细分下午需要有人带领小团队高效的执行拆解出来的任务的，任务完成的50%和120%的漂亮，全部依赖于这个小团队的负责人的决策。

也需要高效的执行者。

一个团队良好的氛围，也需要团队的成员不断的带动起来。


e). 做有价值的事情
相比于刚毕业时候的混沌。对于过去的几年，我该去做什么样的有价值的事情，这个问题的答案也在我心中变得不断明晰起来。花了我很多时间去不断地思考和试错。

作为一名工程师，一名管理者。是需要去解决一些实际存在的问题，让各种的 bad case 变得更好的。

去选择性的做一些真正有价值的事情，才是一个工程师的价值所在。

什么是“有价值”三个字并非那么容易的做的到的。往往需要有着长时间的阅历，积淀，能够妥善的给予现状的分析并作出规划的。

眼界，思路，想法比技术来的重要。技术可以进行闭关，短期的内强化，而有些东西是无法一蹴而就的。

未来

一路走来，从一个愣头青小伙。到目前负责20多人的大型业务的前端团队的蜀黍。一路不容易，需要感谢很多人给予的机会和指导。



对未来的期许，始终不灭吧。

五年记为一个成长，毕业七年。练就了一手的技能，继续去做一些更有意思的事情吧。


我们是谁？

我们是美团网的前端团队，负责美团外卖业务
我们是有趣的年轻人，待人真诚，做事靠谱，创业团队氛围，简单可依赖

工作职责？

指导初级工程师
持续优化，建设前端基础设施
支持美团外卖各个业务线前端开发需求，为用户呈现最好的界面交互

职位要求？

能独立完成前端开发工作；
了解对各种情形下的前端解决方案；
精通 HTML/CSS/Javascript 等前端技术，能轻松写出符合 W3C 标准、兼容主流浏览器的代码；

本科以上学历，计算机、数学等相关专业毕业（或者计算机基础非常扎实）；
熟练的使用一门后台技术（ node.js/python/PHP/java ），因为我们觉得，行于前端，而不应止于此;

同时，我们坚信一点，闻道有先后，术业有专攻，上边的都可以无视
我们欣赏的同学，需要有强大的自驱力；积极主动，有想法；并且知道如何不断持续的提升自己；精于问道，勤于实践
对技术有一定的热忱和激情，发自内心的热爱这份职业

我们提供了什么？

一份会令你满意的薪 [ 20k起 ]，和能力成正比；优秀的同学会有期权激励
一套程序猿的顶级梦幻装备， Retina 屏幕的 MBP ，一把超舒适的人体工程学座椅，以及 27 寸外接大屏
一群聪明的小伙伴们
一个能够充分发挥你才能的轻松，愉快的工作环境
一家满了极客氛围的公司

所以？

坐标帝都，望京

如果你觉的似乎和我们存在了那么一点儿的相似和联系，就可以过来和我们聊聊吧
不用担心档期的问题，这个职位我们会长期为你留着！
邮件发送简历至： xukai#meituan.com => (# 改为 @)

没有想到。用这样的方式，一个人迎来了我26周岁的生日，却没有任何心情对自己，或者是接受别人的“生日快乐”。
生活中充满了无奈，悲伤和委屈。我猜，应该是没有人会知道我每天傻乐傻乐的背后，会藏着这样的心情吧！
据说对着生活微笑，她也会还你一个微笑~ 你TMD是没有注意到我么？

看了下上篇记在2013年双12的日记。为什么次都是在生日前夕，生活会给我开这么一个玩笑，让我猝不及防。我不敢再留什么预期，明年的这个时候究竟还TM会发生什么？

这一年过得实在是太快了，回头猛看，好像没有一丝痕迹。
对于未来，我曾经无数次的在脑海中勾勒出一幅幅的场景，应该这儿有这个，在那边儿安排个那个。生活却像一个调皮的小孩，挥舞着双手，不断的抹去我画出来的轮廓。
渐渐的，我似乎偏离了生活的重心，忘了给生活中的各个主题加上个应有的权重。理性一面想把自己拉回到主干道上来，但是感性的却在不断的逃避一些客观的问题，我不是个足够勇敢的人，害怕失去已经拥有的东西。
似乎印证了墨菲定律，越是害怕发生的，越是会发生。
于是乎，一切都在不断的轮回，重新开始，再重新开始，哎！

这篇文章应该是充满了负能量，让我放肆的对着互联网发发牢*，怒吼几声草拟大爷！！不想看不到对面，也不想不见回音。
然后，就让我一个人静一静，静一静。

谁能告诉我，一切都会好起来的，是吗？

小程序的起源，缘起腾讯张小龙的一次分享：
继而一次分享，以及小程序的公测引爆了整个小程序的 High 点。

Mark

工欲善其事，必先利器。我们用node-inspector来调试coffeescript的编译。
用全局的方式安装node-inspector

sudo npm install node-inspector -g 

新建一个叫coffee得目录，用来作为我们的工作目录。
在目录中新建一个package.json文件，可将如下内容填入其中（截止目前为止我们用coffeescript最新的1.8版本进行调试）

{
  "name": "coffee-debugger",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "coffee-script": "1.8.0"
  }
}

再命令行中运行如下命令安装当前工程依赖的coffeescript

sudo npm install 

在我们的工作目录中，新建一个用来测试的coffeescript脚本main.coffee
这个时候工程中的目录结构应该是这样

下边就可以正式的开始进入主题了，打一个命令行，启动node-inspector

node-inspector

再打开一个命令行，并且进入到coffee目录中

node --debug-brk node_modules/coffee-script/bin/coffee -c main.coffee

在浏览器中打开URL 127.0.0.1:8080/debug?port=5858 就可以开始调试coffeescript的编译过程了（-c开关表示将main.coffee编译成为main.js脚本）

Enjoy it !
转载请注明出处
botobe.net
本文Github链接