记得以前知乎上看到过一个问题：面试一个 5 年的前端，却连原型链也搞不清楚，满口都是 Vue，React 之类的实现，这样的人该用吗？ 。写文章的时候又回去看了下这个问题，300 多个回答，有很多大佬都回答了这个问题，说明这个问题还是挺受关注的。最近几年，随着 ES6 ，TypeScript 及类似的中间语言的流行，我们平时做业务开发很少能接触到原型，基本上都是用 ES6 class 来去更简单的，更直观的实现以前构造器加原型做的事情。

其实在我看来，我觉得原型链是一个非常重要的基础知识。如果一个人说他 C 语言很精通，但是他汇编不熟，你信吗？我觉得 winter 说的挺简洁到位的：

这又涉及到我之前讲过的面试官技巧，面试，是对一个人的能力系统性评价，搞清楚一个人擅长什么不会什么，所以问知识性问题，为了避免误判，一定要大量问、系统化地问。

不会原型很能说明问题，至少他在库的设计方面会有极大劣势，而且可能学习习惯上是有问题的，也有可能他根本就不太会 JS 语言，但是这不意味着凭借一个问题就可以判定这个人不能用。

本文包括以下内容：

1. JavaScript 原型
2. 构造器和 prototype
3. 原型链
4. 原型的用途
5. ES6 class 和构造器的关系
6. 原型继承
7. JavaScript 和原型相关语法特性
8. 原型污染

前不久我写了一个 chrome 扩展，作为一个前端弄潮儿，我当然想用上各种前端界最 fashion 的开发工具。于是乎，折腾到最后使用了 webpack + TypeScript + react 这么一套技术栈。在 github 上研究了几个模板项目之后，发现大多数都太初级了，功能太简单，而且有一个我觉应当提供的很基础的功能始终没发现有哪个项目支持，也就是当修改了 content script 之后自动 reload 扩展和刷新注入了 content script 的页面这个问题。这个问题如果解决了，你就不需要每次修改了扩展代码还去 chrome 扩展列表页面点下刷新按钮刷新扩展。最后在研究了 webpack 的热更新机制和查阅了 webpack 和 chome 扩展官方文档之后解决了这个问题。在开发完我那个扩展之后，我便将其提取成了一个模板项目 awesome-chrome-extension-boilerplate。

其实我在使用 webpack + TypeScript + react 这套技术栈开发 chrome 扩展时碰到的问题真不少，如果全拿出来讲没个两万字我估计是写不完。这篇文章主要聊聊 webpack 开发 chrome 扩展的热更新问题，并重点讲解我是如何实现修改了 content script 之后自动 reload 扩展和刷新注入了 content script 的页面的，这也是我那个模板的最大特色，也算是给它的 README 做个补充。

在阅读文章之前，希望读者对 webpack 和 chrome 扩展开发有基本的了解。本文的主要内容分为：

1. 我对 chrome 扩展的理解
2. 各种页面的热更新问题分析
3. 如何实现修改了 content script 之后自动 reload 扩展和刷新注入了 content script 的页面

相信到了年底，不少前端都准备找工作跳槽了。而作为春招大军的一员，估计很多准备春招的应届生和我一样这个年过得很焦虑。JavaScript 类型是前端面试中考察 JavaScript 基础的常考知识点，经常性第一个问题就是 JavaScript 中有哪些类型。

笔者今年从春招实习到秋招经历了挺多的面试，也总结了一些规律：一般来讲第一轮面试往往就是考察基础，就算你简历很牛逼那也得走个流程啊。而考察基础一般就按照 HTML，CSS，JavaScript，计算机网络，常见的 web 安全，后端知识如数据库，鉴权，再就是最后来两道算法题或智力题或数学题。

最近几个月我都很少像以前那样一天到晚刷掘金和知乎的文章，基本上就是在开源项目中实战学习，我觉得刚入门前端的人确实需要多看一些优质的博客。刚入门更需要广度，随后是广度和深度并行，最后才是深度。其实说人话就是：刚开始入门时因为没怎么写过项目，懂得太少，所以需要多看，被动吸收。到后来有一定广度了，你会发现其实你在写一个项目的时候往往碰到的问题就是因为你的深度不够，这个时候你会更注重深度。最后当你广度慢慢到了一定程度后，由于网络上 99% 的文章都是小白文，你看了标题之后就大概闻的出文章是啥内容，看了对你也没啥用，这个时候你更因该把时间花在一个小的领域，注重深度，深度才是最能体现一个程序员技术价值的地方。

前面唠叨了一堆废话，下面正式开始本文内容。本文内容主要分两部分：

1. 总结 JavaScript 中各种类型一些值得注意的地方，小技巧和个人心得
2. JavaScript 如何进行类型判断

系统，扎实的 javascript 语言基础是一个优秀的前端工程师必须具备的。在看了一些关于 call，apply，bind 的文章后，我还是打算写下这篇总结，原因有几个。首先，在如今 ES6 大行其道的今天，很多文章中讲述的它们的应用场景其实用 ES6 可以更优雅的解决，但是基本上·没有文章会去提 ES6 的解法。再则，讲它们的实现原理的文章其实不少，但是或多或少实现的有些不够完美，本文将把它们通过代码一一比较完美的实现，让它们不再神秘。不谦虚的说，关于 call，apply，bind 的知识，看这一篇文章就够了。

浏览器 HTTP 缓存是一种常见的 web 性能优化的手段，也是在前端面试中经常被考察的一个知识点。本文通过配置 koa2 服务器，在实践中带你探究浏览器的 HTTP 缓存机制。

9102 年了，前端工程化发展在 nodejs 的基础上已经发展的非常完善了，各种前端构建辅助工具层出不穷。ES6 编译器 babel，css 辅助工具 postcss / sass / less，代码风格检测工具 eslint / prettier / stylelint，git 辅助工具 husky / lint-staged / commitizen / commitlint，自动化构建工具 webpack / gulp / grunt，测试工具 jest / mocha 等等。

这么多开发辅助工具每次写项目都去配置一遍那也太浪费时间了，自己维护一套模板有得时不时去更新。比较方便的配置开发环境还是使用 cli 或者一些热门的 bolierplate。本篇文章将以 react 官方维护的 cli 工具 create-react-app （简称 cra）为基础，以不 eject 的方式去配置 ant design，以及一些 cra 并没有内置的辅助工具。

这几天电脑总是蓝屏，有时候重启时还显示找不到系统，然后多重启几次又正常进入系统。昨天电脑蓝屏重启不下十次，忍无可忍，无须再忍，只好重装系统，换上了最新的 win10 1903。1903 在用户界面上做了挺多优化，窗口阴影，浅色主题，磨砂锁屏等，还有 windows 沙盒等新玩意。

但是换了之后还是会蓝屏重启，说明是硬件的问题。怀疑是主板有问题，平时用的是笔记本自带的键盘，很容易进灰，有时候边看视频边吃饭的时候可能进了些菜水什么的。今天把电脑后盖拆了之后清了清灰，用吹风机对着自带键盘吹了半天热风，再次重新装了系统。一天下来，啥也没干，装各种软件，配环境，用到现在也没蓝屏，不知道能持续几天。这不，现在要重新配下 git，顺便写篇文章记录一下，省的以后重新配的时候还要到处查资料。

虽然有点标题党的嫌疑，但是内容绝对是满满的的干货。很多扩展功能比较单一，直接用一张图就能很清楚说明它的用途啦。出于篇幅的限制，我在这里会重点介绍一些我个人比较用得上的一些扩展。因为平时前端开发的比较多，所以偏向前端程序员的扩展可能会比较多一些。

我本人对 chrome 扩展比较挑，一般有同类型的扩展我会选择维护比较积极的，使用人数更多的。像有些 3 年都没更新过的扩展我基本上是不会用的，除非这个扩展本身功能比较简单，不需要更新。我平时有事没事就会去 chrome 扩展市场去逛逛，所以积累的优秀扩展比较多。一大波图片即将袭来, 请在 wifi 条件下或者流量充足的情况下阅读。

其实爬虫是一个对计算机综合能力要求比较高的技术活。

首先是要对网络协议尤其是 http 协议有基本的了解, 能够分析网站的数据请求响应。学会使用一些工具，简单的情况使用 chrome devtools 的 network 面板就够了。我一般还会配合 postman 或者 charles 来分析，更复杂的情况可能举要使用专业的抓包工具比如 wireshark 了。你对一个网站了解的越深，越容易想出简单的方式来爬取你想获取的信息。

除了要了解一些计算机网络的知识，你还需要具备一定的字符串处理能力，具体来说就是正则表达式玩的溜，其实正则表达式一般的使用场景下用不到很多高级知识，比较常用的有点小复杂的就是分组，非贪婪匹配等。俗话说，学好正则表达式，处理字符串都不怕 🤣。

还有就是掌握一些反爬虫技巧，写爬虫你可能会碰到各种各样的问题，但是不要怕，再复杂的 12306 都有人能够爬，还有什么是能难到我们的。常见的爬虫碰到的问题比如服务器会检查 cookies, 检查 host 和 referer 头，表单中有隐藏字段，验证码，访问频率限制，需要代理, spa 网站等等。其实啊，绝大多数爬虫碰到的问题最终都可以通过操纵浏览器爬取的。

这篇使用 nodejs 写爬虫系列第二篇。实战一个小爬虫，抓取 github 热门项目。想要达到目标:

1. 学会从网页源代码中提取数据这种最基本的爬虫
2. 使用 json 文件保存抓取的数据
3. 熟悉我上一篇介绍的一些模块
4. 学会 node 中怎样处理用户输入

这篇文章主要记录一下平时自己实践得到的, 博客中学习的以及在一些项目源码中看到的 javascript 技巧。有些东西可以说是奇淫技巧，有些可能是 ES6+ 中一些比较具有实用性的新语法。