blog
blog copied to clipboard
livoras
Too young, too simple. Sometimes, naive.
微信前端面试经历
（前言：本文写的是”经历“，不是”经验“，废话很多，没什么干货，所以建议不要看） 在所有大公司实习生都招完以后再来找实习简直就是作死，而我绝对是作死中的楷模。 还好我有一堆堆在阿里、腾讯等大公司实习的师兄大大们，叫他们内推一下应该不成问题。于是我就找了微信黄思程大大内推我去微信做Web前端实习生，当晚就交了[简历](https://github.com/livoras/resume)。 第二天就有声音甜美媲美10086客服的HR妹子打电话给我：“请问是戴嘉华同学吗。”她问了我一些问题，为什么这么晚才找实习，为什么要从之前的创业团队离开，课能不能修完，然后最后问我意向去微信还是邮箱（广研就这两个部门）。我说微信，然后她说微信满人了（那还问个蛋啊），我说最好是微信，如果不行的话邮箱也可以。 过了两天她告诉我微信确实满人了，只能去邮箱。因为前些天同时也让陈学家大大内推去阿里，考虑到与其去邮箱还不如去阿里，然后我就说很抱歉我不能去了，挂了电话，就一心去阿里了。第二天HR妹妹又告诉我微信有童鞋毁约了，现在有个位置，问我去不去，我当然说去，然后就给我发了三天以后面试的通知。 后来阿里那边实习生也已经招满了，跟我们说校招的时候再来。好在有个微信有个家伙毁约了，不然两头不着岸就GG了。 三天时间不知道在干嘛，想准备一下也不知道从何准备，胡乱地看了一通http、js、性能优化之类的。听说微信前端面试有时候会有搞后端的面试官，突然感觉受到了恐吓，还去学了几个排序算法，感觉时间太短也做不了什么大的准备，最后只好作罢。 约了三天后下午3点的时间，我知道自己一定会迷路，所以就提早了点，果不然，去的时候坐过了站，回来的时候又坐过了站，天才。 乘坐广州地铁到客村站A出口，走几步就可以到达伪文艺逼格如画的T.I.T创意园，腾讯广研独自占据了里面4、5座红砖建筑，沿着一条干净的小道，两遍是各种咖啡屋，精品店，还有买不知道什么东西的店，阳光斜斜地洒下来，几个扫地大伯时而低头，时而驻足，无不让人联想起宫崎骏《侧耳倾听》里面那只诡异的大肥猫消失的长廊。 穿过玻璃大门，必须承认果然是大公司，前台妹子都这么漂亮，前台妹子让我在咖啡厅里面等，她联系面试官，后来我才发现妹子长得漂亮是腾讯的公司文化，因为包括咖啡厅里面、咖啡厅外面、和端咖啡的妹子都很漂亮#不知道为什么#。 咖啡厅整体格调昏黄，装修得很有范儿，门口摆放着星球大战里面的机器人的半身铜像，不知道是干嘛用的，几个沙发，几张桌子，一个吧台，有喝的有吃的，一个落地玻璃大门，门外的几张桌子也是咖啡厅的一部分，里外都有休闲的人，除了差了点音乐，一切都完美了。如果不时有短裤拖鞋脚毛大叔经过，我真以为我来到了一个高端洋气的酒吧。 不一会儿，面试官来了，一个胖胖的大哥哥，露着可爱的笑容，我很喜欢他。还以为他会带我到什么奇奇怪怪的地方，原来直接就在咖啡厅里面坐下来了，就开始了面试。 > 大哥哥：看你的简历，你说你有两年的Web经验，据我所知现在的学校都没有教这些东西，你可以说说你的经验吗。 > > 我（内心：为什么没有让我自我介绍，准备的台词都木有聊）：我从大一开始学习Web编程的，学校教的都是C/C++，我一直觉得没有什么意思，只到有一天看到一个师兄在捣鼓CSS，我突然感觉被雷劈了一样，才发现原来编程可以这样子，然后就自己捣鼓起来。。。。blablabla 他针对我简历上的一些项目问了我一些问题，我就跟他侃我做过的项目，在项目中用到的一些框架，我们遇到什么问题，怎么解决的，基本上就是[这篇博客](http://www.livoras.com/post/14)的内容。侃前端的架构，框架，测试，性能，版本管理，项目管理，模块划分，各种侃，非常高兴地看到话题一直停留在我熟悉的领域，说到大哥哥有共鸣的地方，大哥哥都给我露出了赞许笑容。最后问了一下在项目中我有没有遇到什么性能问题，怎么解决的，我就说我们怎么用requirejs做开发，自己构建脚本进行打包压缩代码，控制Cache-controll，怎么用调试工具找出应用中的性能瓶颈，使用内存池提高性能ect。看到我做过浏览器tab同步的类库，就问我用了什么原理，怎么做的。问的基本都是简历上相关项目的问题，没什么特别难的算法、智力题之类的，都是在我认知范围内的东西，大哥哥也是前端的，长吁了一口气。 最后大哥哥说比较喜欢我会质疑、会思考，遇到问题能够尽力地解决和优化，他很喜欢我这点。然后他让我等一下，他去找他leader来。额，我以为这就完了，原来要轮着来，看了手机，大概过了半个小时。 不一会儿，他就带着一个造型炫酷的大叔叔，留着可爱的小辫子，满脸的络腮胡子，带着一顶小麦子，WoW，LoL，简直酷！我一眼就喜欢上他了，但是大叔叔一直都没有露出什么感情，感觉干干的，不过这不妨碍我们又侃了半个小时。叔叔来了，哥哥就走了，叔叔坐下来， > 大叔叔：你是黄思程推荐的吧（后来才知道原来他也是思程大大的leader） > > 我：是 > > 大叔叔：你自我介绍一下吧。 > >...
**作者**：戴嘉华 **转载请注明出处，保留原文链接和作者信息** --- ## 目录 - 前言 - 基于帧的动画算法（Frame-based） - 基于时间的动画算法（Time-based） - 改良基于时间的动画算法 - 总结 ## 前言 前段时间无聊或有聊地做了几个移动端的HTML5游戏。放在不同的移动端平台上进行测试后有了诡异的发现，有些手机的动画会“快”一点，有些手机的动画会“慢”一点，有些慢得还不是一两点。 通过查找资料发现，基于帧的算法（Frame-based）来实现动画会导致不同帧率的平台体验不一致，而基于时间（Time-based）的动画算法可以很好地改良这种情况，让不同帧率的情况下都能达到较为统一的速度上的体验。 本文介绍的就是基于帧动画算法和基于时间动画算法的差异，以及对基于时间算法的改良。 ## 基于帧的动画算法（Frame-based） 相信做过前端的人对使用JavaScript实现动画的原理都很熟悉。现在让你实现一个让一个div从左到右来回移动的JS代码，你可能嗖嗖就写出来了： ``` javascript function moveDiv(div, fps) { var...
**作者**：戴嘉华 **转载请注明出处，保留原文链接和作者信息** --- ## 目录 - 前言 - 仓库（Repository） - 源仓库 - 开发者仓库 - 分支（Branch） - 永久性分支 - 暂时性分支 - 工作流（workflow） - 总结 - 参考资料 ## 前言 （本文假设各位已经对基本git的基本概念、操作有一定的理解，如无相关git知识，可以参考[Pro Git](http://git-scm.com/book/zh/)这本书进行相关的学习和练习） 很多项目开发都会采用git这一优秀的分布式版本管理工具进行项目版本管理，使用github开源平台作为代码仓库托管平台。由于git的使用非常灵活，在实践当中衍生了很多种不同的工作流程，不同的项目、不同的团队会有不同的协作方式。...
博客搬家
# 博客搬家 还是觉得用Github的issue来做博客方便一点： 1. 支持图片拖拽上传。 2. 全屏的Markdown语法编辑器。 3. 用issue的label来做issue分类管理。 4. 连评论也是Markdown语法的。 5. 不要自己做SEO。 所以，原来的[博客](http://livoras.com)搬到这里了！ 之前的文章不打算搬过来了，也没什么东西，一切重新开始吧~！
这是一个系列的文章，通过分析 [nestscript](https://github.com/livoras/nestscript)，一个基于虚拟机的 JavaScript 小程序动态执行的方案。讲述如何使用编译原理技术使得小程序可以动态执行代码，让大家理解程序编译的过程，涉及到代码语法、代码生成、虚拟机的实现原理等。可以让你对代码的运行机制，计算机的原理有更深入的了解。 ## 背景 众所周知，原生小程序里面 JavaScript 是没办法动态加载的，微信甚至禁止了 `eval` 和 `new Function` 的能力。 但是这并不能阻止人们想出各种千奇百怪的方案来在小程序上做到动态加载，例如很多方案都是通过动态加载 JavaScript 文本字符串，然后通过 parser 分析成 AST，然后做一个 AST 解析运行器。 这么做会比较慢，需要在前端做 AST 的解析，而且基于 AST 的运行可以优化空间比较小。其实可以仿照成熟的编程语言的实现方式：把 AST 编译成二进制字节码，然后在前端做一个虚拟机，网络下载直接运行字节码。可以在运行时减少程序的编译成 AST...
**UPDATE（2015-10-29）：更新MV*关于业务逻辑的描述，此处感谢 @LuoPQ @finian 指出错误** 作者：戴嘉华 转载请注明出处并保留原文链接（ https://github.com/livoras/blog/issues/11 ）和作者信息。 ## 目录： - 前言 - MVC - MVC Model 2 - MVP - Passive View - Supervising Controller - MVVM - 结语...
**作者**：戴嘉华 **转载请注明出处，保留原文链接和作者信息** ## 1. 前言 最近面试季，有不少同学在面试前端的时候遇到一些问题来问我的的时候，才发现之前博客里面介绍的关于前端架构有些东西没有说清楚，特别是关于如何使用事件巧妙地进行模块的解耦。特意写这篇博客详细说一下。 本来想一篇写完，但是写着写着发现废话比较多。决定开个系列分2～3篇来写，本文主要介绍： 1. 观察者模式在前端中的体现形式 2. 事件在组件化的前端架构中的应用 这算是（一），接下来的（二）会介绍事件在前端游戏开发中的应用。 ### 1.1 观察者模式在前端中的表现形式——事件机制 （了解的同学可以直接跳过这一节） 在构建前端应用的时候免不了要和事件打交道，有些同学可能觉得事件不就是鼠标点击执行特定的函数之类的吗？ 此“事件”非彼“事件”。这里的“事件”，实际上是指“观察者模式（Observer Pattern）”在前端的一种呈现方式。所谓观察者模式可以类比博客“订阅/推送”，你通过RSS订阅了某个博客，那么这个博客有新的博文就会自动推送给你；当你退订阅这个博客，那么就不会再推送给你。 用JavaScript代码可以怎么表示这么一个场景？ ``` var blog = new Blog; // 假设已有一个Blog类实现subscribe、publish、unsubscribe方法 var readerFunc1...
作者：戴嘉华 转载请注明出处并保留原文链接（ https://github.com/livoras/blog/issues/14 ）和作者信息。 ## 目录 - 1. 前言 - 2. 问题的提出 - 3. 模板引擎和 Virtual-DOM 结合 —— Virtual-Template - 4. Virtual-Template 的实现 - 4.1 编译原理相关 - 4.2 模版引擎的EBNF -...
**作者**：戴嘉华 **转载请注明出处并保留原文链接（ https://github.com/livoras/blog/issues/13 ）和作者信息。** ## 目录： - 1 前言 - 2 对前端应用状态管理思考 - 3 Virtual DOM 算法 - 4 算法实现 - 4.1 步骤一：用JS对象模拟DOM树 - 4.2 步骤二：比较两棵虚拟DOM树的差异 - 4.3 步骤三：把差异应用到真正的DOM树上 -...
**未经允许，请勿转载。** --- （如果对SPA概念不清楚的同学可以先自行了解相关概念） 平时喜欢做点小页面来玩玩，并且一直采用单页面应用（Single Page Application）的方式来进行开发。这种开发方式是在之前一年做的一个创业项目的经验和思考，一直想写篇博客来总结一下。 个人认为单页面应用的优势相当明显： 1. 前后端职责分离，架构清晰：前端进行交互逻辑，后端负责数据处理。 2. 前后端单独开发、单独测试。 3. 良好的交互体验，前端进行的是局部渲染。避免了不必要的跳转和重复渲染。 当然，SPA也有它自身的缺点，例如不利于搜索引擎优化等等，这些问题也有其相应的解决方案。 下面要介绍的这种方式可以说是一种模式或者工作流，和前端使用什么框架无关，也和后端使用什么语言、数据库无关。不能说是The Best Practice，我相信经过更多人的讨论和思考会有A Better Practice。:) ## 概览 下图展示了这种模式的整个前后端及各自的主要组成：  看起来有点复杂，接下来会仔细地对上面每一个部分进行解释。看完本文，就应该能理解上图中的各部件之间的交互流程。 ## 前端架构 把上图的前端部分单独抽出来进行研究：  前端中大致分为四种类型的模块： 1....