竹磬网-邵珠庆の日记 生命只有一次，你可以用它来做些更多伟大的事情–Make the world a little better and easier

大总结-JS-挖 “掘” 淘 “金” 之 前端闯关历险记学习资料汇总

世间万物，为我所用。

掘金不仅是一个很好的在线同性交友平台，也是一个学习交流和分享技术场所，更是程序猿和程序媛获取养料的精神家园。

分享是一个杂乱无章的环节，这无可厚非，因为在这里人人平等，每个人都可以分享自己看到的精品文章，也可以创作记录分享自己的成果，这是平台带给大家的优势，同时，面对零零散散的文章，对于我们来说，很困惑，我到底该学什么，从入门到精通的过程是怎样的？我该如何系统的学习这门语言？

汪洋大海，我该如何探寻所需的宝藏？
学习路途，我该如何寻找最佳的曲线？

去年开始看掘金，收藏了很多文章，也收获了很多知识，但是对于上面的疑问一直也在摸索当中，这里先感谢掘金这个平台，让我能学习到很多新的未知的东西，但在用掘金的这段时间内，也发现看的东西虽然很多，但是很杂，没有系统化的去深入了解一个东西，于是诞生了把自己看到过的，错过的，还有将要发表的，一起做一个整理和集合。

看见好的文章就收藏，后来发现收藏了几百篇，很多都是重复的，也不够系统化，资源如浩瀚大海，找起来也麻烦，无疑给自己增加了负担，在此，为了方便大家系统的学习前端这门课程，找准自己的定位，我利用空余时间，把掘金有屎以来分享的前端文章做了一个归类，方便掘金的朋友学习和收藏，喜欢的朋友可以收藏一下，这篇文章会持续更新，也欢迎关注【我的GitHub博客】获取最新动态。

贵有恒何必三更眠五更起，最无益只怕一日曝十日寒。 一天更新一点，每天看一点，坚持就是胜利，如果只整理和收藏不花时间看，一切都是徒劳。✌️

一、推荐规则

• 推荐内容全部来自广大码农朋友的分享和专栏的原创，也就是掘金能搜索到的内容；
• 每个分类原则上不多于3篇，除非这一分类优秀的文章特别多；
• 每个文章我都有粗略阅读，排名按照收藏数和个人感觉关联度；
• 文章日期全部来自2017-3月之前，会不定期更新，如果遗漏非常精彩的文章，可以及时联系我
• 由于工程量大，推荐和排版难免出错，还望见谅，如果错误请底下及时评论反馈

二、代码规范篇

没有规矩，无以成方圆。

为什么把这个放在首位呢？好的代码规范不仅自己看起来赏心悦目，心情舒畅，我怎么就这么牛逼写出这么好看的代码（熏疼自己三秒钟，这往往只是错觉），别人看起来也直观一目了然，后来接手维护的人看了这种高逼格的代码也不会出现这种情况：这尼玛什么几把玩意，简直一坨翔，坑死劳资了（反正我走了也听不到?，你就骂吧）

2.1 前端开发规范总览

《前端开发规范手册》
《WEB 前端规范》
《Web 前端开发规范文档》

2.2 HTML规范

《HTML 最佳实践》
《前端编码规范（2）—— HTML 规范》
《Google HTML/CSS 编程规范》

2.3 CSS规范

《CSS 命名规范总结》
《Airbnb CSS / Sass 指南》
《CSS 代码格式规范》

2.4 JS规范

《JavaScript风格指南》
《JavaScript 代码整洁之道》
《Airbnb 的 JavaScript 编程规范》

2.5 ES6规范

《编程风格》

三、前言

国学大师王国维自己的著作《人间词话》中说：

古今之成大事业、大学问者，必经过三重境界：

第一境界:昨夜西风凋碧树,独上高楼,望尽天涯路。

第二境界:衣带渐宽终不悔,为伊消得人憔悴。

第三境界:众里寻他千百度,蓦然回首,那人却在灯火阑珊处。

其实我觉得学习JavaScript也要经历类似的三种阶段：

第一境界:看山是山，看水是水。

第二境界:看山不是山，看水不是水。

第三境界:看山还是山，看水还是水。

国学大师王国维精妙地以三句词道破人生之路：起初的迷惘，继而的执着和最终的顿悟。
我以瞎几把乱扯三句词道破学习JavaScript之路：起初的表象，继而的本质和最终的本质回归到现象。

四、JavaScript基础篇

看是是山，看水是水。

万丈高楼平地起，胸有丘壑宏图画。

合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。任何事情都要从基础做起，打好基础，不浮躁，才能做好一件事，学习一门语言也是一样，从“Hello World!"开始，踏踏实实，夯实基础，基础知识是整个学习体系的根本,没有牢固的基础知识作为根基,我们的学习和努力必将事倍功半,学习提纲是巩固基础知识的一种有效手段.

《思维导图来学习Javascript基础知识》
《多年 JavaScript 学习笔记整理》
《javascript 基础小结篇》
《前端开发基础 - JavaScript》
《你不知道的 Javascript》

五、JavaScript进阶篇

看山不是山，看水不是水。

其实地上本没有坑，踩的人多了，于是就有了。

JS是一门玄学，是一门很灵活的语言，当然里面有很多不好懂的概念，尤其是学完基础之后，对执行环境、this、类型转换、作用域链、闭包、原型链、继承、eval、JS左值与引用、浅复制与深复制、IIFE、模块化、函数式编程等等都有着这样或那样的不解之惑，想要成为JS大神这些门槛和坑不得不踩。

5.1 内存空间

因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间，内存管理，内存释放的认知比较模糊，甚至有些人干脆就是一无所知。

《前端基础进阶：详细图解 JavaScript 内存空间》
《JavaScript 内存管理》
《JavaScript 中的内存释放》

 

5.2 执行上下文与作用域

首先来说说js中的执行环境，所谓执行环境（也称执行上下文–execution context）它是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据 ，决定了它们各自的行为。而每个执行环境都有一个与之相关的变量对象，环境中定义的所有变量和函数都保存在这个对象中。

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链包含了执行环境栈中的每个执行环境对应的变量对象.通过作用域链，可以决定变量的访问和标识符的解析。

《前端基础进阶：详细图解 JavaScript 执行上下文》
《深入探讨 JavaScript 的执行环境和栈》
《图解 JS 上下文与作用域》

 

5.3 变量对象

深入理解执行上下文中的变量对象，从原理上解释变量提升，为接下来理解作用域链，闭包，原型打下坚实的理论基础，值得基础知识不牢固的盆友一阅。

《前端基础进阶：变量对象详解，教你如何高逼格地解释变量提升》
《《JavaScript 闯关记》之变量和数据类型》

 

5.4 作用域链与闭包

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链包含了执行环境栈中的每个执行环境对应的变量对象.通过作用域链，可以决定变量的访问和标识符的解析。

关于闭包的概念，是婆说婆有理。因而，我就翻阅了**红皮书(p178)**上对于闭包的陈述：
闭包是指有权访问另外一个函数作用域中的变量的函数
这概念有点绕，拆分一下。从概念上说，闭包有两个特点：

• 1、函数
• 2、能访问另外一个函数作用域中的变量

在ES 6之前，Javascript只有函数作用域的概念，没有块级作用域（但catch捕获的异常 只能在catch块中访问）的概念（IIFE可以创建局部作用域）。每个函数作用域都是封闭的，即外部是访问不到函数作用域中的变量。

《前端基础进阶：详细图解，彻底搞懂闭包与作用域链》
《JavaScript 闯关记之作用域和闭包》
《你想知道的关于 JavaScript 作用域的一切 (译)》
《弄懂 JavaScript 的作用域和闭包》

 

5.5 this

This,传说中的天使还是魔鬼？对于新手来说，this的指向一直是很头疼的地方，用的好就是天使，用的差就是魔鬼了，人人都想成为代码中的天使，为了避免成为魔鬼，我们必须好好深入学习一下this的作用机理和一些常见的坑。

《前端基础进阶：全方位解读 this》
《JavaScript 中的 this 陷阱的最全收集 -- 没有之一》
《Javascript 深入浅出 this》
《从 ECMA 规范深入理解 js 中的 this》

 

5.6 原型链

在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对 象共有的特点。 即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例 能够访问在构造函数原型中定义的属性和方法。

《JavaScript原型详解》
《三张图搞懂JavaScript的原型对象与原型链》
《JavaScript 原型中的哲学思想》
《一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系》

 

5.7 继承

Javascript 这门语言对于习惯了众多传统 OOP 语言 (c++,Java 等) 的 coder 来说其实是一门很奇怪的语言, 因为 Javascript 的 OOP 方式是基于原型的, 而非传统的类继承,主要有原型链继承，借用构造函数继承,组合继承，寄生式继承，寄生组合继承。

《js 原型链继承，借用构造函数继承, 组合继承，寄生式继承，寄生组合继承》
《Javascript 三招两式之对象继承 (上)》
《JavaScript 三招两式之对象继承 (下)》
《征服 JavaScript 面试系列：类继承和原型继承的区别》
《谈一谈 JavaScript 继承》

 

5.8 arguments

每个函数都会有一个 Arguments 对象实例 arguments，它引用着函数的实参，可以用数组下标的方式”[]” 引用 arguments 的元素。arguments.length 为函数实参个数，arguments.callee 引用函数自身。

《Arguments 对象深入了解》
《javascript arguments(callee、caller) 详解》
《Javascript 中的 arguments 对象》

 

5.9 类型转换

如果把通过函数或方法调用，明确的将某种类型转换成另一种类型称为显示转换 ，相反则称为隐式类型转换 。google和维基百科中没有找到“显示类型转换”，“隐式类型转换”的字眼。暂且这么称呼。 JavaScript的数据类型是非常弱的（不然不会叫它做弱类型语言了）！在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的，如下是数值类型和布尔类型的相加：

3 + true; // 4
结果是一个数值型！如果是在C或者Java环境的话，上面的运算肯定会因为运算符两边的数据类型不一致而导致报错的！但
是，在JavaScript中，只有少数情况下，错误类型才会导致出错，比如调用非函数，或者读取null或者undefined的属
性时。

《从 []==![] 为 true 来剖析 JavaScript 各种蛋疼的类型转换》
《一篇文章搞定 JS 类型转换》
《聊一聊 JS 中的『隐式类型转换』》

 

5.10 IIFE

全拼Imdiately Invoked Function Expression，立即执行的函数表达式。立即执行函数在模块化中也大有用处。用立即执行函数处理模块化可以减少全局变量造成的空间污染，构造更多的私有变量。

立即执行函数写法大全：

// 最常用的两种写法
(function(){ /* code */ }()); // 老道推荐写法
(function(){ /* code */ })(); // 当然这种也可以

// 括号和JS的一些操作符（如 = && || ,等）可以在函数表达式和函数声明上消除歧义
// 如下代码中，解析器已经知道一个是表达式了，于是也会把另一个默认为表达式
// 但是两者交换则会报错
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

// 如果你不怕代码晦涩难读，也可以选择一元运算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

// 你也可以这样
new function(){ /* code */ }
new function(){ /* code */ }() // 带参数

《javascript模块化编程-详解立即执行函数表达式IIFE》
《Javascript 的匿名函数与自执行》
《js 匿名自执行函数中闭包的高级使用（前端必看）》
这一篇掘金没有推荐过，不过我认为真的写的很全很详细，这里也推荐一下：
《详解javascript立即执行函数表达式（IIFE）》

 

5.11 setTimeout

平时的工作中，也许你会经常用到setTimeout这个方法，可是你真的了解setTimeout吗？本系列想通过总结setTimeout的用法，顺便来探索javascript里面的事件执行机制。在一个基础阶段，理解JavaScript定时器的工作原理的是非常重要的。通常它们看起来不那么直观，因为它们处于单线程中。

《[译] JavaScript 中的定时器是如何工作的？》
《关于 JavaScript 定时器我的一些小理解》
《JavaScript 定时器及相关面试题》
《【原】以 setTimeout 来聊聊 Event Loop》

 

5.12 Object.defineProperty()函数

该方法允许精确添加或修改对象的属性。一般情况下，我们为对象添加属性是通过赋值来创建并显示在属性枚举中（for...in 或 Object.keys 方法）， 但这种方式添加的属性值可以被改变，也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。例如，默认情况下，使用 Object.defineProperty() 增加的属性值是不可改变的。 对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一；不能同时是两者。

《理解 JavaScript 的 Object.defineProperty() 函数》
《解析神奇的 Object.defineProperty》
《双向绑定的简单实现 - 基于 ES5 对象的 getter/setter 机制》

 

5.13 call、apply、bind

今天看博客时，看到了这样的一段js代码： var bind = Function.prototype.call.bind(Function.prototype.bind); 上面那段代码涉及到了call、bind，所以我想先区别一下call、apply、bind的用法。这三个方法的用法非常相似，将函数绑定到上下文中，即用来改变函数中this的指向。这个系列就是让大家深入理解其中的差异。

《JS 中 call、apply、bind 那些事》
《JavaScript 中的 call、apply、bind 深入理解》
《回味JS基础:call apply 与 bind》
《深入浅出妙用 Javascript 中 apply、call、bind》

 

5.14 深拷贝与浅拷贝

eg：有A、B两个对象，且都有子对象

深拷贝：将B对象拷贝到A对象中，包括B里面的子对象;

浅拷贝：将B对象拷贝到A对象中，但不包括B里面的子对象;

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。

《JavaScript 深拷贝》
《javaScript 中的浅拷贝和深拷贝》
《深入剖析 JavaScript 的深复制》

 

5.15 正则表达式

还记得被称为正则小王子的jQuery作者吗？但正则表达式对于我来说一直像黑暗魔法一样的存在。手机正则去网上搜，邮箱正则去网上搜，复杂点的看看文档拼凑一下，再复杂只能厚着脸皮让其他同事给写一个。从来没有系统的学习过，搞完这个系列是不是准备拿下它。

《正则表达式 - 理论基础篇》
《正则表达式学习笔记》
《正则表达式实践篇》
《常见的正则表达式可视化描述》
《最全面的常用正则表达式大全》

直接来个膜法小编 的收藏集：

《正则表达式合集》)

 

5.16 事件

JavaScript 程序采用了异步事件驱动编程（Event-driven programming）模型，维基百科对它的解释是：

事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的

《JavaScript 浏览器事件解析》
《深入理解 - 事件委托》
《我也来说说 JS 的事件机制》
《DOM 事件深入浅出（一）》
《DOM 事件深入浅出（二）》
《JS 中的事件绑定、事件监听、事件委托是什么？》

 

5.17 其他混淆点

其他一些容易混淆的难点就不单独开一个类型，这里就统一做一个系列说明，也是平时经常遇到的一些痛点和难点吧，主要是区分一些概念，知道彼此之间的异同，以下简称一张图系列。

《一张图看懂JavaScript中数组的迭代方法：forEach、map、filter、reduce、every、some》
《一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别》
《一张图彻底掌握 scrollTop, offsetTop, scrollLeft, offsetLeft......》
《一张图看懂 Function 和 Object 的关系及简述 instanceof 运算符》

六、JavaScript高手篇

看山还是山，看水还是水。

如果学习JavaScript不是为了成为高手，那将毫无意义。

其实，高手有一颗寂寞的心，因为高手的造就本就是用寂寞堆积而成。

6.1 JavaScript数据结构与算法篇

程序设计=数据结构+算法

6.1.1 数组去重

《也谈 JavaScript 数组去重》
《数组去重 -- 这几种方法够不?》
《js 对数组去重的完整版》

 

6.1.2 排序

《十大经典排序算法总结（JavaScript描述）》
《JS 家的排序算法》
《JS 中常见排序算法详解》

 

6.1.3 查找

《查找算法之顺序、二分、二叉搜索树、红黑树 详细比较总结》

 

6.1.4 数据结构

《学习JavaScript数据结构(一)——栈和队列》
《学习 JavaScript 数据结构(二)——链表》
《学习 JavaScript 数据结构(三)——集合》
《学习 javascript 数据结构 (四)——树》
《javaScript的数据结构与算法（五）——字典和散列表》

 

6.1.5 其它

《前端面试中常见的算法问题读后整理》
《常见数据结构 (一)- 栈, 队列, 堆, 哈希表》
《常见数据结构 (二)- 树 (二叉树，红黑树，B 树)》
《算法学习笔记》
《javascript array js 缓存算法、数组随机抽取、字母串转数字，数字转字符串》
《JavaScript 算法练习》

 

6.2 JavaScript跨域

**　由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表（来源）**

《前端跨域问题及解决方案》
《直白的话告诉你在 javascript 中如何用 jsonp 实现跨域请求》
《前端 Ajax 跨域请求方案沙里淘金》
《你所不知道的跨域资源共享(CORS)》
《带你一步一步的理解前端跨域的原理及实践》
《HTML5 跨域通信 API - window.postMessage》
《前端跨域整理》
《跨域问题，解决之道》

 

6.3 JavaScript设计模式

为什么要学习设计模式？ 做事情之前问个为什么总是好的。关于设计模式的好坏，我在知乎上也看过一些讨论，有知友对其提出过一些疑问，里面有一些关于设计模式的观点：

• 设计模式有何不妥，所谓的荼毒体现在哪？
• 设计模式是不是有点太玄了？

任何事物的出现都有其道理，任何语言都有其不足之处，设计模式是对语言不足的补充（Peter Norvig)。设计模式也是编程经验的总结，我想学习它对像我这样的前端新手的能力会有很大的提升。

细说说它的好处：

1. 设计模式能让你用更少的词汇做更充分的沟通；
2. 谈话在模式层次时，不会被压低到对象和类这种琐碎的事情上；
3. 懂设计模式的团队，彼此之间对于设计的看法不容易产生误解；
4. 共享词汇能帮助初级人员快速成长。

《学习设计模式前需要知道的事情》
《常用的 JavaScript 设计模式》
《JavaScript 设计模式》读后感觉很复杂
《JavaScript 设计模式》
《听飞狐聊 JavaScript 设计模式系列 13》

 

6.4 JavaScript函数式编程

什么是函数式编程？

• 与面向对象编程（Object-oriented programming）和过程式编程（Procedural programming）并列的编程范式。
• 最主要的特征是，函数是第一等公民。
• 强调将计算过程分解成可复用的函数，典型例子就是map方法和reduce方法组合而成 MapReduce 算法。
• 只有纯的、没有副作用的函数，才是合格的函数。

《函数式编程入门教程》
《想学函数式编程？》
《给 JavaScript 开发者讲讲函数式编程》
《前端基础进阶（七）：函数与函数式编程》
《『翻译』JavaScript 函数式编程》
《JavaScript 函数式编程》

 

6.5 JavaScript高阶函数

具体来说，在 JavaScript 中，我们可以将一个函数 A 作为参数传给另一个函数 B，或者，在函数 B 中将函数 A 作为返回值返回。那么这里的函数 B 就是上面所说的高阶函数。 在《javascript设计模式和开发实践》中是这样定义的。 函数可以作为参数被传递； 函数可以作为返回值输出。

《javascript 高阶函数介绍》
《程序媛学 JS 小记一笔——高阶函数》
《高阶函数对系统的 “提纯”》
《JavaScript 之闭包与高阶函数（一）》

 

6.6 JavaScript性能优化

天下武功，无坚不摧，唯快不破。

Javascript是一门非常灵活的语言，我们可以随心所欲的书写各种风格的代码，不同风格的代码也必然也会导致执行效率的差异，作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下,开发过程中零零散散地接触到许多提高代码性能的方法，整理一下平时比较常见并且容易规避的问题。

《吹毛求疵的追求优雅高性能JavaScript》
《天生就慢的 DOM 如何优化？》
《Javascript 高性能动画与页面渲染》
《一个关于 js 线程和性能优化的文档，有例子哦！》
《合理使用 IIFE 优化 JS 引擎的性能》
《高性能 JavaScript》读书笔记

 

6.7 JavaScript 柯里化

就像最早听到斐波拉切数列一样，第一次听到柯里化我也是懵逼的

柯里化又称部分求值，字面意思就是不会立刻求值，而是到了需要的时候再去求值。如果看的懵逼，没事，看完整篇文章再回过头来看这里你就会豁然开朗。 反柯里化的作用是，当我们调用某个方法，不用考虑这个对象在被设计时，是否拥有这个方法，只要这个方法适用于它，我们就可以对这个对象使用它。

《前端高手必备：详解 JavaScript 柯里化》
《简单理解JavaScript中的柯里化和反柯里化》
《浅谈函数式编程柯里化的魔法》
《从一道面试题谈谈函数柯里化 (Currying)》
《掌握 JavaScript 函数的柯里化》

 

6.8 JavaScript调试

如今 Chrome 浏览器无疑是最受前端青睐的工具，原因除了界面简洁、大量的应用插件，良好的代码规范支持、强大的 V8 解释器之外，还因为 Chrome 开发者工具提供了大量的便捷功能，方便我们前端调试代码，我们在日常开发中是越来越离不开 Chrome，是否熟练掌握 Chrome 调试技巧恐怕也会成为考量前端技术水平的标杆。 介绍 Chrome 调试技巧的文章很多，本文结合我自己的开发经验，希望从实际运用的角度为大家再一次谈一谈这些功能，也希望对大家都有所帮助和启发。 在chrome的开发者工具中，通过断点调试，我们能够非常方便的一步一步的观察JavaScript的执行过程，直观感知函数调用栈，作用域链，变量对象，闭包，this等关键信息的变化。因此，断点调试对于快速定位代码错误，快速了解代码的执行过程有着非常重要的作用，这也是我们前端开发者必不可少的一个高级技能。

《前端高手必备技能：如何在 chrome 开发者工具中观察函数调用栈、作用域链与闭包》
《比 console.log 更多－chrome 调试命令》
《JavaScript30 中文指南 - 09 Console 调试技巧指南》
《聊一聊移动端调试那些事》
《前端 chrome 浏览器调试总结》
《我的职业是前端工程师【五】: 前端工程师必会的六个调试技能》
《九个 Console 命令，让 js 调试更简单》
《再谈 Chrome 实用调试技巧》
《调试 CSS 的方法》
《前端调试效率低？试试这 10 个 Chrome 开发者工具 使用技巧》
《前端开发中的 JS 调试技巧》

 

6.9 前端安全

天下武功，唯快不破。算法越快，越容易破。

《如何让前端更安全？——XSS 攻击和防御详解》
《HTTPS 互联网世界的安全基础》
《关于 Web 安全，99% 的网站都忽略了这些》
《Web 前端慢加密》

 

6.10 技巧和效率

技巧恰似黑魔法，效率堪比加速器，都是开发过程中不可或缺的一部分，善用技巧，提高效率。

高手之所以高，很大一部分在于技巧巧妙，效率高，让人自愧不如，所以成了我们眼中的高手，其实高手也是从菜鸟过来的，由于长期的学习和经验的积累，再加上善于总结，自然一步步成长成为高手，为了加速自己成为高手，我们可以向高手取经，学习他们分享的一些技巧和解决问题思维方式。


《34 个实用的 webAPP 开发技巧分享，值得收藏》
《不造个轮子，你还真以为你会写代码了？ | 掘金技术征文》
《【译】帮助你更快学习 JavaScript 的六个思维技巧》
《提升效率黑科技》
《【译】六个漂亮的 ES6 技巧》
《【译】45种 Javascript 技巧大全》
《程序员应该掌握的 10 个搜索技巧》
《你必须『收藏』的Github技巧》
《老司机教你更好的进行 CSS 编程 70 个技巧》
《聊一聊这些常见而且实用的 css 技巧》

 

七、JavaScript框架篇

青，取之于蓝而青于蓝；冰水为之而寒于水。

jQuery:一年没写链式JQ了，在这个人手一个MVVM框架的年代，JQuery就不做推荐，想要了解可以自行学习。

vue.js react.js,angularjs···此处省略一万篇文章和略干文字。

关于框架的学习，最好多看看官方文档，多多实践，我这里就不多做介绍了，框架太多，我用的也不多，这里也就不献丑推荐什么的，自己对框架也一知半解，没有深入去研究底层的实现，仅仅停留在够用就行没去深究的层面，大家想学什么框架可以自己去搜索相关资料和教程。

八、HTTP和HTTPS篇（待续，下一步学习中）

九、前端工程化篇

解放双手，成就你的梦想。

《webpack系列合集》
《构建工具合集》
《教你如何读webpack2中文文档》

 

十、全栈篇之Node.js（待续，正在学习中nodejs）

十一、面试篇

11.1 简历模板

简历好比人的一张脸，不能丑了别人，爽了自己。

对于开发者与设计师们，一封好的的简历会让自己的面试增色不少。本次分享的简历简介精致，而且样式多种多样。包含 INDD、IDML、PDF、PSD、DOCX 等格式，方便自由修改和学习。

《Talk is cheap, show me the code - 用 github 数据辅助你完善简历》
《27 款优质简洁的个人简历打包下载》
《10+ 优秀简洁的个人简历下载（五）》
《15 款优质实用简洁的个人简历模板打包下载 （一）》
《5 款精致简洁求职简历》

 

11.2 面试题

任凭风吹雨打，胜似闲庭信步。

首先我希望表达的一点，就是面试的评判跟学校里的考试完全是两回事，太多的人把面试当做考试而把注意力放在题目上。 事实上面试中未必是所有题目全都回答"正确"就一定会通过或者较高评价。面试是面试官和面试者双方"挖掘与展示才能"的过程，参考前面提到的面试过程，全部回答正确的情况很可能是因为面试官不感兴趣懒得追问。 对于面试官而言，基本评判原则就是"我要不要这个人做我的同事？"，多数情况下，这个答案会非常清楚。一些题目是充分的，也就是"回答对了说明这个人具有可以依靠的才能"，一些题目则是必要的，也就是"回答错了说明这个人无法胜任我们的工作"。

《最近遇到的前端面试题》
《大厂前端面试题汇总》
《前端面试集合》
《前端面试题精选》
《一道 JS 面试题所引发的 "血案"，透过现象寻本质，再从本质看现象》

 

11.3 面试技巧、经验与感悟

他山之石，可以攻玉。

经验犹如一所大学校，它能使你认识到自己是个什么样的傻瓜。

人生就是不断的推销自己，不停的面试，狭义的面试我们认为就是工作上的面试，而广义的面试就是做人的面试，到处就是展示推销自己。看看别人面试心得，取经一下，避免别人已经犯过的错误，也是一种进步。

《面试感悟：一名 3 年工作经验的程序员应该具备的技能》
《我的 web 前端面试经历 - 百度》
《1月前端面试记》
《关于前端面试》
《迟来的面试总结》

十二、资源汇总

积土成山,风雨兴焉;积水成渊,蛟龙生焉。

善于积累，善于总结，也是学习的一门功课，积累是一个循序渐进的过程，搜集总结同时也是一个费时费力的过程，看看别人的积累和总结，不禁感叹于别人的知识面和认真的态度，自己会觉得有压力从而产生动力，此时的自己会不会蠢蠢欲动，给自己所学所看来一个强势的总结呢？

《也许是史上最全的前端资源大汇总》
《JavaScript 开发者必备的资源合集》
《前端知识点大百科全书》
《100+ 超全的 web 开发工具和资源整理》
《Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集》
《GitHub 上最全的前端入门资源汇总 快速入门前端》
《前端教程 & 开发模块化 / 规范化 / 工程化 / 优化 & 工具 / 调试 & 值得关注的博客 / Git & 面试 - 资源汇总》
《送给前端的你，推荐几篇前端汇总文章。 - 学习编程 - 知乎专栏》
《前端学习资源汇总——前端收藏夹》
《最全前端资源汇集》

十三、插件

插件是我们开发时候的左膀右臂。

平时自己写插件主要有下面几个问题：

（1）开发插件需要时间，可能拖延项目工期，如果工期紧急不建议选用这种方式

（2）自己造的轮子未必有现有轮子的好用，要考虑到队友是否适用

（3）需要比较高的开发水平

这里搜集一些常用的插件供大家参考使用。

《前端常用插件汇总》
《寻找前端插件，一步到位》
《前端插件资源整理》

十四、工具篇

工欲善其事，必先利其器。

张三和李四都要上山砍柴，但他们的斧头都有点钝了，张三没有理会，拿着斧头就上山了，因为他的斧头不利，砍的都是比较细的树柴……李四就不同了，他拿来磨刀石，用劲地把斧头先磨好，虽然他比张三慢了起步，但是他的准备工夫做到家了，砍柴砍得很快。到太阳下山了，张三只背了小小的一捆柴下来，但是李四，背着一大捆的柴下来…… 由此可见，准备工夫做好了，可以事半功倍！

《超全面 + 最流行的「前端速查表」高清版大全》
《成为专业程序员路上用到的各种优秀资料、神器及框架》
《前端切图神器 avocode》
《2015 年末必备前端工具集》
《【译】2016 年我最喜欢的前端工》
《前端新手可以浏览的网站》
《收集非常好用的 Mac 应用程序、软件以及工具，主要面向开发者和设计师。》
《工具武装的前端开发工程师》
《一个前端程序猿的 Sublime Text3 的自我修养》
《前端工程师的工具包》

十五、鸣谢

• 感谢党和国家
• 感谢美利坚创造了互联网
• 感谢掘金这个在线同性交友的场所
• 感谢掘金CEO以及工作人员创造了这个平台
• 感谢创作和分享的广大同行码农提供了本文原始素材
• 感谢各位大神愿意含辛茹苦的花时间观看鄙人这篇随便拼凑的文章
• 最后也厚颜无耻的感谢自己能静下心整理一篇文章和大家一起分享交流进步

十六、广告

本文分享首发【掘金】，同时收录在【我的GitHub博客】，觉得本文写的不算烂的，可以点击【我的GitHub博客】顺便登录一下账号给个星星✨鼓励一下，关注最新更新动态，大家一起多交流学习，欢迎随意转载交流，不要钱，文末有福利哦?，你懂的?。

登高自卑，与君共勉。

十七、福利

文武之道，一张一弛，要劳逸结合，是不是？
老司机镇楼，投币上车。骚年，看了这么多这么累，是不是该撸一发呢?，我好想射点什么，先撸一盘LOL去了，哈哈，大家别想歪了。
待续的今后继续更新完善。