null
null
我在腾讯这一年
去年初，我从 Shopee 离职加入了腾讯文档前端团队，当时也是奔着大名鼎鼎的 AlloyTeam 去的。 原本最初的目标是去找一份做跨端开发或者 NodeJS 开发的工作，但还是被当时的组长以 "我们是华南地区最强前端技术团队之一" 给诱惑了。 思来想去，在线文档确实是前端天花板项目了，再加上是知名技术团队，觉得比较靠谱。 ## 核心竞争力 当时对自己的实力还是有自信的，我觉得自己看源码速度很快，刷过各种库的源码，懂各种原理，还在慕课网写过一本教程。 以前做过移动端开发，也做过管理系统，也做过 NodeJS、CI 等等，涉及到的技术栈很多，但都缺少深度，只是多而杂。这里的深度并非指读源码，而是在某一个领域有非常深的造诣。 其实做一百个页面和十个页面其实没有本质区别，来一个应届生一样可以做，那为什么还需要我呢？ 所以在从 Shopee 离职的时候，我一直在思考，自己的核心竞争力在哪里呢？ 基于对这些的思考，加上当时已经快四年经验了，内心也是比较焦虑的。按照当时的水平，如果去面阿里，一定是到不了 P7 的。实际上去面了一圈，虽然大厂 offer 都拿了，但职级就是上不去。 当时的想法是，一定要好好选一个靠谱的前端团队，选择一个领域多耕耘几年。 ## 腾讯文档 刚入职的时候，比较能够感受到腾讯文档浓厚的技术氛围。这边是我待过最大的前端技术团队（一百多号人），很多业界的技术大牛都在这边。...
## 1. 前言 在前端圈子有这样一种说法，Vue 入门最简单，React 学习曲线太陡，Angular...我还是选择狗带吧。 在 React 诞生之初，Facebook 宣传这是一个用于前端开发的界面库，仅仅是一个 View 层。前面我们也介绍过 React 的组件通信，在大型应用中，处理好 React 组件通信和状态管理就显得非常重要。 为了解决这一问题，Facebook 最先提出了单向数据流的 Flux 架构，弥补了使用 React 开发大型网站的不足。 Flux： ![image_1dvghf5eo1b121baocp1dbek119.png-10.5kB][1] 随后，Dan Abramov 受到 Flux 和函数式编程语言 Elm...
![image_1e4411le1meo5qg1v8nllo7ov1g.png-1150.8kB][1] > 只听空相大声道：“请道长立即禀报张真人，事在紧急，片刻延缓不得！”那道人道：“大师来得不巧，敝师祖自去岁坐关，至今一年有余，本派弟子亦已久不见他老人家慈范。” ## 前言 在武侠小说中，经常看到这样的桥段。某位武林人士前来拜访德高望重的帮派掌门，往往需要经过手下弟子的通报。如果掌门外出或者不想见来人，就会让弟子婉拒。 今天要讲的 Proxy 和这个有异曲同工之妙。顾名思义，Proxy 的意思是代理，作用是为其他对象提供一种代理以控制对这个对象的访问。 > 本文会涉及到 [Proxy][2] 和 [Reflect][3]、[Function][4]、[扩展运算符][5] 等知识，主要以实践为主，对语法不会进行详细地讲解，建议配合阮一峰的 [ES6入门][6] 中相关章节服用。 ![code.png-74.3kB][7] ## 1. Proxy 提供了哪些拦截方式？ Proxy 一般是用来架设在目标对象之上的一层拦截，来实现对目标对象访问和修改的控制。Proxy 是一个构造函数，使用的时候需要配合 `new` 操作符，直接调用会报错。 ![image.png-21.9kB][8] Proxy...
> 这是上周给学弟学妹们进行的一次在线分享，这里整理成了文章。 ## 1. 什么是 whistle？ 首先来看官网的定义是这样的： > > whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。 > >不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。 > whistle 相当于一个连接客户端和远程服务器的“中转站”，当你向服务器发出请求后，代理服务器先获取用户的请求，再将服务请求转发至远程服务器，并将远程服务器反馈的结果再转交给客户端。 whistle 是一种正向代理，和 nginx 的反向代理刚好相反，那么两者有什么差异呢？可以看下面这两张图。 正向代理：  反向代理：  用更通俗的话语来描述就是，假如我们去租房，这里我就是”客户端“，中介是”正向代理服务器“，房东是”互联网“，这里我为了找房子，就去某家找了中介，让他（代理服务器）帮我去寻找房源，这是一个主动的行为，是正向代理。 如果我们去租房，没有去找代理，我在某瓣租房小组找到了房源，现场去看房，结果发现这是个二房东，很生气。在这种场景下，”二房东“就是反向代理服务器，我们的目的是找房，但真正的房东（服务器）被中介（代理服务器）给屏蔽了，我甚至不知道房东（服务器）是谁。 通过 whistle 我们可以很方便的修改响应内容，比如 mock 各种状态码、错误信息，甚至是给网页插入一段脚本等。...
这是机械工业出版社的《编写可读代码的艺术》的读书笔记。 ### 第一章： + 好的名字、好的注释以及好的代码格式 ### 第二章： + 选择专业的词，比如从网上获取到数据，用fetch比用get要好得多  + 避免空泛的名字。 比如在for循环里面，我们直接用i、j、k这种命名在嵌套复杂的时候并不适合，比如我们遍历一个users，我们可以用ui来代替。 + 用具体的名字代替抽象的名字。 + 为名字附带更多信息。 比如一个变量保存了ID，但是是十六进制的，用hex_id就比id好。 如果变量是一个度量的话，可以给名字带上单位，比如start_ms比start好。  + 把握住名字长度 在小的作用域里面可以使用短的名字，但是在更大的作用域甚至全局作用域最好就别这样。 有时候，别用首字母缩写的方式来命名变量，但是可以用eval代替evaluation，doc代替document。 + 拿掉没用的词 比如convertToString就不如用ToString这个名字，这样没有丢失任何有用的信息。 在html里面，可以用下划线给id命名，但是用-来分开class里面的单词 ### 第三章：...
九月初的一天早上，heyli 找我聊了一件事。他说，我们这边想在武大华科开办一门前端课程，要找人回去授课。刚好你是武大毕业的，也在慕课网写过一本教程，很适合这个任务，问一下你的意愿。 我当然很开心做这件事情。还记得以前我经常会吐槽大学不教前端课程，都什么年代了还在教 JSP 这些课程，这么多优秀的学生不都浪费了吗？  于是我愉快的接下了这个任务。已经脱离学校几年了，还不清楚现在学生的水平。就联系到了大学的辅导员炳哥，他推给了我计算机学院辅导员的联系方式。 我联系到计算机学院杨老师后，原本想找几个学生来抽样调查一下，后来想到用腾讯文档的收集表会更方便一些。  统计的结果也比较符合预期，绝大部分学生还是没有前端方面的基础，有一部分学生都已经有完整的项目经历了，还熟悉 Vue/React 这些框架。 在九月底之前，我设计出了课程大纲，覆盖了 React、TypeScript、Webpack、ES2015、Eslint、Jest 等内容，希望能培养一批优秀的实习生。 同时还准备了一份课前预习材料，让学生们利用十一提前预习一下前端基础知识，免得上课跟不上进度。  在部门又招募到另外三位讲师，一位武大学长和我负责武大的课程，另外两位同事负责华科的课程。大家一起商定了最终的课程设计大纲。 上周六是第一次正式上课，我要出差去武汉。出发前和 heyli 聊了一下，他说你已经是个成年人了，可以一个人出差了。我表示一下子面对这么多人还是有点儿紧张。 所以在上周四的时候，找了一个会议室给他试讲了一遍，给我提了一些建议。 比如要多和学生互动，可以提问一些问题，不然自己讲完太累了。看到学生们玩手机打瞌睡，立即停一停，给他们讲一些校园或者公司里面的事情，引起他们的注意力。 周五下午早早赶飞机到了武汉，天河机场实在太远了，到酒店后就已经十一点了。一路上很颠簸，也没时间备课，于是周五晚上备课到了两点多。 考虑到这些建议，始终觉得 PPT 里面的内容太多，讲起来会很繁琐。于是临时把最后一节关于 Chrome 调试的改了一下，从讲 PPT...
## 1. 前言 针对毕业一年左右的前端面试题，根据社区面试题以及自己面试的经验进行整理。 可能你会说不就是个面试吗？为啥还写了那么多？因为我是个非常注重细节的人，做事之前也喜欢先规划好。 前端面试大都是两轮或三轮技术面，一面问基础知识，二面问项目，一般面试内容分为三部分： 1. 计算机基础知识（算法、网络、Web 安全、性能优化） 2. 前端基础知识（ES6、闭包、原型链等等） 3. 项目经历和技术栈（Vue/React、小程序、RN等等） ![面试.jpg-46.2kB][1] ## 2. 简历 简历是敲门砖，最重要的就是展示能力，推荐一个叫[【五百丁】][2]的网站，可以在线编辑简历（可以借我的终身会员用）。 这里是我已经写好的简历，作为参考，请点击下载，提取码：k8a9： ### 2.1 简历大纲 1. 姓名、联系方式（电话、邮箱） 2. 工作经历 3. 项目经历 4. 学历...
## 1. 前言 这是 React 系列的最后一篇，在前面我们讲了很多 React 相关的技术栈，也带大家理解了 React Hooks、Redux、Mobx 等原理，今天就带领大家来攻克 React 的原理。 由于篇幅有限，本文只是简单地实现了一个“乞丐版”的 React，方便引导大家对 React 后续的深入学习。 我将这个这个简单的 React 放到了我的 GitHub 上面：[simple-react][1] ## 2. 编译 JSX 在开始写之前，我们再来回顾一下 JSX 的语法： ```js...
## 前言 前面我们已经深入讲解过 JavaScript 中的类与继承，也举了不少 ES5 中实现的例子，那么 ES6 中 `class` 和 `extends` 又是如何实现的呢？ 这节课将带领你深入理解 babel 编译后 `class` 和 `extends` 的实现方式。 > 注意：本文涉及到 立即执行函数（ [IIFE][1] ）、[instanceof][2]、[Object.defineProperty][3]，如果还未接触过，建议先点击链接学习。 ## 准备工作 在开始之前，我们需要一个 babel 的环境，方便查看...
本文是改善 JavaScript 系列专栏的第一篇，主要介绍了 JavaScript 的由来、ECMAScript 的历史版本、新的语法从提案到被加入到 ECMAScript 标准中需要经历的步骤。读完本文，相信可以提高你对 JavaScript 的认识。 ## JavaScript的由来 在 JavaScript 诞生之前，必须要将表单数据发送到服务端才能实现一些验证的操作。在那个网速只有10kb左右的年代，这样的操作实在是太耗时了，如果可以将这些数据在发送到服务端前就进行检验，无疑大大提高了用户的体验。 为了增强 Navigator 浏览器的交互性，Netscape 公司决定开发一种可以嵌入网页的脚本语言，用来控制浏览器的一些行为。 1995年，就职于 Netscape 公司的 Brendan Eich 着手开发这门脚本语言，他借鉴了C语言的基本语法、Java语言的数据结构、Scheme的函数、Self语言基于原型的继承机制等等，仅仅用了10天，就设计完成了这种语言的第一版。由于设计比较匆忙，也导致了 JavaScript 语言本身存在各种各样的问题。 Netscape 公司的这种浏览器脚本语言最初名字叫做 Mocha，1995年9月改为...