预计会总结100个（ ^ω^），目前74个，后续会继续更新。
答案大部分来自网络，是我选取的说明的较好的博文。
个人博客了解一下：www.bougieblog.cn
原生js
基本数据类型
String, Object, Number, Symbol, undefined, null
内存泄露
变量提升及作用域，作用域链，词法作用域，动态作用域
this指向
call, apply, bind
Event Loop及定时器和异步的原理
- JavaScript：彻底理解同步、异步和事件循环(Event Loop)
- JavaScript 运行机制详解：再谈Event Loop
- JavaScript定时器原理分析
- Javascript异步编程的4种方法
闭包
原型和继承链
- 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）
- 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二）
- 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三）
- Javascript面向对象编程（二）：构造函数的继承
对象的深拷贝和浅拷贝
原生ajax写法
// post
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
// get
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
// 稍微封装一下
function ajax({ url, method, headers, data, success, error }) {
headers = headers || 'application/x-www-form-urlencoded; charset=UTF-8'
let request = new XMLHttpRequest()
request.open(method, url, true)
request.setRequestHeader('Content-type', headers)
request.onload = function(progressEvent) {
let response = progressEvent.currentTarget
let {status, statusText, responseText, responseUrl} = response
if(status > 199 && status < 400) {
if(success) success(responseText)
} else {
if(error) error(statusText)
}
}
request.onerror = function(error) {
console.error(error)
}
request.send(data)
}
严格模式
实现一个Event Bus
以下是简单模仿vue js的
class EventBus{
constructor() {
this.eventList = new Map()
}
$emit(evName, ...args) {
let fn = this.eventList.get(evName)
if(!fn) {
console.error(`'${evName}' is undefined`)
return
}
this.eventList.get(evName).apply(this, args)
}
$on(evName, fn) {
if(this.eventList.get(evName)) {
console.error(`duplicated event name : '${evName}'`)
return
}
this.eventList.set(evName, fn)
return {
remove: () => {
this.eventList.delete(evName)
}
}
}
}
函数柯里化
ES6/7
这个全部看阮老师的就行了
Class
Set和Map
generator和async
callback和Promise
Object.defineProperty, Object.defineProperties
Object.setPrototypeOf, Object.getPrototypeOf
Object.getOwnPropertyDescriptors
Proxy和Reflect
Symbol
性能
reflow和repaint，如何避免
前端性能优化
网络和浏览器
跨域请求
GET, POST, PUT, DELETE的区别
请求头和响应头
cookie, session, token
TCP, TCP/IP, FTP, TELNET
http, https和webSocket
nginx反向代理与负载均衡
http2.0
浏览器缓存
浏览器渲染页面的过程
async和defer的区别及兼容性
IE6, 7, 8, 9, 10的兼容性问题
这个凭经验解释了
兼容IE8浏览器的技术选型
win7自带IE8，在政府及事业单位工作的需要掌握
xss攻击和sql注入
算法与模式
排序算法
这个github仓库，包含了很多算法
virtual dom的diff算法
炙手可热的东西，必须理解
设计模式
MVC, NVP, MVVP, MVVM
POP, OOP, SOA, AOP
html和css
Doctype及其作用
h5新特性
data-*属性的作用
自定义属性，可以通过el.getAttribute('data-custom')取值，el.dataSet.custom取值和赋值。
grid和flex布局及兼容性
flex自IE10开始支持，已成为手机网页主流布局方法。grid布局兼容性一般，估计再过一两年才会普及。
自适应和响应式布局
自适应是随着浏览器的大小变化而变化，响应式是响应屏幕尺寸，需要通过CSS来实现。
px, in, em, rem, vh, vw, vmin, vmax
display的所有可能的值
css画三角形
利用border实现
cubic-bezier
transform所有可能的值
requestAnimationFrame
css动画和js动画
掌握keyframs, transition。
框架
双向绑定，深入响应式原理，发布订阅模式，观察者模式
单向数据流，状态管理
路由的history和hash模式
Vue和React的区别
Vuex, Redux和Flux
Vue的render和React.createElement
React.createClass，React.Component和函数式申明组件的区别
Mixin
React需使用createClass创建组件
高阶组件
循环元素时为什么要加key
工具
sass和less
多看官方文档
webpack, gulp, grunt, rollup, browersify的区别
- Gulp / Grunt 是前端自动化的工具，旨在提供一个自动化的流程（省去了手动编译less，stylus，sass已经babel的转码，图片的压缩，代码的压缩复制等系列操作），传统的多页面应用非常适合用这个
- browserify / webpack 提供的是一个前端模块化的方案，让我们可以将commonJS的模块方式应用与浏览器端
- webpack 是 browserify 的加强版，不但实现了browserify模块化思想，还将图片，样式等也纳入了模块化中
- rollup 打包代码量小，常用来进行类库的打包
babel和babel-polyfill的作用
babel会将ES6语法转化为ES5语法，但是不会转义Promise和Object、Array等上的静态方法，这时候就需要babel-polyfill
ESLint代码风格
git常用命令
前端模块化的原理和意义
CommonJS, AMD, CMD, UMD规范
karma, jasmine和mocha
js测试框架了解一下
