this机制

You-Dont-Know-JS 中文版 ，可到这里链接找一找

• You-Dont-Know-JS中关于this的章节(中文版是上卷的第二部分的第一、二章节)
  1. this Or That?
  2. this All Makes Sense Now!
• this - JavaScript | MDN / this - JavaScript | MDN 官方中文版
• 如何理解 JavaScript 中的 this 关键字？ - 知乎
• JavaScript 的 this 原理
• globals_exports 【这个看来有啥用？朱老师解释下】
• 《你不知道的JS上卷》阅读小记之setTimeout的this指向问题Script
• 练习题
  1. 课程练习 4：辨认所有this

声明提升

• You-Dont-Know-JS中关于声明提升的章节(中文版是上卷的第一部分的第四章节)
  1. Hoisting
• Hoisting - Glossary | MDN / Hoisting - Glossary | MDN 官方中文
• scope - Javascript function scoping and hoisting - Stack Overflow

继承

• 继承与原型链 - JavaScript | MDN
• 类 - JavaScript | MDN
• How does prototypal inheritance differ from classical inheritance(Prototypal Inheritance 与 Classical Inheritance 的区别)
• 练习题
  1. 课程练习 5：继承

一些奇葩JS代码

这个简单看看就好，深入要很多时间，from @文坚

• GitHub - denysdovhan/wtfjs: A list of funny and tricky JavaScript examples
• Javascript Puzzlers or: do you really know JavaScript?
• 今天又看到一个新的 javascript 怪异笑话 - V2EX

跨域

• 浏览器同源政策及其规避方法 - 阮一峰的网络日志
• 浏览器的同源策略 - Web 安全 | MDN
• 前端常见跨域解决方案（全） - inroam - 博客园
• 试一下
  1. GitHub - FE-star/showcase1: 展台1: 跨域方案

Node.js（一）

Node.js 基础

• 熟悉 API https://nodejs.org/api/
• 源码 https://github.com/nodejs/node
• 官方学习指南 https://nodejs.org/en/docs/guides/
• 学习源码可以结合这个学习笔记 https://github.com/chyingp/nodejs-learning-guide
• 了解 npm https://docs.npmjs.com/
• 了解 koa，尝试写一个中间件
• 了解 express，尝试写一个中间件

进阶

• 了解常见内存更新策略 https://en.wikipedia.org/wiki/Cache_replacement_policies
• 熟悉 LRU 原理，https://npm.taobao.org/package/lru-cache
• [可选]安装 mysql、mongodb 和 Redis
• 熟悉 MySQL、Mongodb 和 Mongoose 及其 CRUD 操作
• https://github.com/mysqljs/mysql
• http://mongoosejs.com/docs/guide.html
• http://mongodb.github.io/node-mongodb-native/2.2/api/

模版

• 前端模版

webpack

• https://webpack.js.org/concepts/
• exercise11
• showcase5
• showcase8

React Examples

1. GitHub - tastejs/todomvc: Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more

React 虚拟DOM

1. Lists and Keys - React
2. 深入框架本源系列 —— Virtual Dom - 掘金
3. 前沿技术解密——VirtualDOM - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客
4. Performance Calendar » React’s diff algorithm

React组件化

1. 翻译React组件模式 - Medium每周翻译 - SegmentFault 思否
2. Higher-Order Components - React
3. 深入理解 React 高阶组件
4. React 模态框秘密和“轮子”渐进设计
5. 如何写出漂亮的React组件 - 某熊的全栈之路 - SegmentFault 思否

第一节课时主要讲课程介绍和Javascript测试，希望大家准备下面一些内容
其中 https://github.com/FE-star 是我们教学项目的 Github 地址

• 环境
  1. 安装 node + npm
  2. Linux or Mac 最佳，Windows 可以但不推荐
• 预习测试
  1. 了解一下 Node assert 的用法
  2. 上 mocha 官网了解一下这是什么，怎么样做测试
  3. should.js 的 API 是怎样的
  4. 百度一下 TDD 和 BDD 的差别
  5. 上 Karma 官网看看，Karma 能干啥
• 了解一下CI
  1. 百度一下 Travis CI（官网可能要翻墙）
• 练习题
  1. https://github.com/FE-star/exercise1
  2. https://github.com/FE-star/exercise2
  3. https://github.com/FE-star/exercise3

大概会讲些啥

除了测试以外，大概会讲一下：

• 这个课程开办的目的
• 前端的市场环境

口嗨

总有人问我为什么要学测试，emmmmmmmm～，给你们举个反例吧：
https://www.zhihu.com/question/278016044

错误监控

• GlobalEventHandlers.onerror
• What the heck is "Script error"?
• Capture and report JavaScript errors with window.onerror
• try...catch
• unhandledrejection
• 了解sourceMap

性能上报

• Performance

showcase

https://github.com/FE-star/showcase4

扩展阅读

• Navigator.sendBeacon()
• 7 天打造前端性能监控系统
• badjs
• sentry、raven-js
• 大前端时代前端监控的最佳实践

今天的作业，大家可以试着做一下homework6

前端性能优化（一）

这篇是 Google 出的性能优化的系列文章，大家可以花点时间全部看一遍，有问题可以在下面回复

• https://developers.google.cn/web/fundamentals/performance/why-performance-matters/

前端性能 checkList

• https://github.com/JohnsenZhou/Front-End-Performance-Checklist

了解常用性能测试工具

• 熟悉 chrome developer tools

这个工具可能你天天都在用，但是很多功能可能你并没有用到，有时间可以系统的了解一下，性能优化很多时候都是需要这个工具帮助你找到性能瓶颈

• 了解 ySlow 及其 23 条规定 http://yslow.org/
• 熟悉 PageSpeed
• 熟悉 Lighthouse

HTTP 缓存相关

有兴趣可以从 rfc7234 这个标准开始，了解相关的规定，另外，就是 rfc2616 已经废弃了

• https://www.mnot.net/blog/2014/06/07/rfc2616_is_dead
• https://tools.ietf.org/html/rfc7234
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
• http://www.cnblogs.com/vajoy/p/5341664.html

客户端缓存

• localStorage + sessionStorage
• App Cache (manifest)
• Service Worker

练习

1、https://github.com/FE-star/exercise19
2、尝试 PWA，至少写个 demo 玩玩 https://codelabs.developers.google.com/codelabs/your-first-pwapp/

正则表达式

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp
• 熟悉以下概念

  元字符
  量词
  分组和引用
  转义
  零宽断言
  贪婪 & 惰性

• 完成以下练习

  https://github.com/FE-star/exercise5
  https://github.com/FE-star/exercise6
  https://github.com/FE-star/exercise7

• 推荐书籍: https://book.douban.com/subject/2154713/ 重点是前五章
• 另外可以了解一下 ES2018 在正则方面有哪些扩展

模块化

• 回顾一下模块化的历史：http://huangxuan.me/js-module-7day/#/
• 围观一下showcase：https://github.com/FE-star/showcase3

扩展知识（非预习内容）

• 上古大神“张云龙”的一些模块化和工程的思考，虽然有些古老了，但是很多问题是一些通性问题：https://github.com/fouber/blog

这节课的作业是自己搭一个badjs或者sentry的错误监控平台

https://www.zhihu.com/question/35737930

请回复～～thx

Node.js（二）

这里有一个系列文章，及源码分析，有时间可以多看看

• https://github.com/yjhjstz/deep-into-node

DEBUG

• https://github.com/nswbmw/node-in-debugging
• https://zhuanlan.zhihu.com/p/36340263

DEPLOY

可以尝试使用 pm2 和 docker 部署

• 了解 pm2，并熟悉常用命令
• [可选] 安装 docker，并熟悉常用命令

APM

• https://app.keymetrics.io & https://app.pm2.io
• https://newrelic.com/nodejs
• https://www.tingyun.com
• https://www.elastic.co/solutions/apm

日志 & ELK

• https://github.com/log4js-node/log4js-node
• 了解什么是 ELK，尝试用 ELK 管理你的日志
• http://dockone.io/article/4817
• http://elk-docker.readthedocs.io

本节课的主要内容是React 基础、原理和React 数据流两部分

React or Vue

这一部分不用全部看完，挑自己感兴趣的。

1. JavaScript Frameworks by the Numbers — Winter 2018
2. Vue和React大比拼，你pick谁？
3. 现代 js 框架存在的根本原因 - 众成翻译
4. 框架选型 - 小火柴的蓝色理想 - 博客园
5. JavaScripting.com - The Database of JavaScript Libraries: 一个帮助框架选型的网站，可以查看各个框架的生态

React 基础、原理

1-6的reactjs官方文档重点阅读，后面的选读。

1. Introducing JSX - React
2. Rendering Elements - React
3. Components and Props - React
4. State and Lifecycle - React
5. Handling Events - React
6. Conditional Rendering - React
7. 译 图解 React
8. React.js 的介绍 - 针对了解 jQuery 的工程师（译） - 杂七杂八的感想 - SegmentFault 思否
9. 深入浅出React（一）：React的设计哲学 - 简单之美
10. 前端已不止于前端－ReactJs初体验 · Issue #21 · kuitos/kuitos.github.io · GitHub

React 数据流

1. React 实践心得：react-redux 之 connect 方法详解 | Taobao FED | 淘宝前端团队
2. Redux Tutorial: Learn Redux from Dan Abramov on egghead
3. Redux状态管理之痛点、分析与改良 - kpaxqin - SegmentFault 思否
4. 图解 Flux

练习

1. https://github.com/FE-star/react-pattern 这个选看，我会主要讲解redux的应用

扩展阅读

1. 现代 js 框架存在的根本原因 - 众成翻译
2. React 路由状态管理总结
3. Rematch: 重新设计 Redux
4. Redux从设计到源码
5. React 状态管理库: Mobx - 前端学习之路 - SegmentFault 思否
6. react+redux渲染性能优化原理 – 积木村の研究所

设计模式

不要过分纠结 发布/订阅模式 和 观察者模式 的区别，这两个模式是非常相似的，也有不少文章将这两个模式统称为观察者模式，大家可以通过 exercise17 感受一下

• https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript
• https://www.cnblogs.com/lovesong/p/5272752.html
• 发布/订阅模式
• 观察者模式
• 完成练习 https://github.com/FE-star/exercise17

事件模型、事件处理机制

• https://developer.mozilla.org/en-US/docs/Web/API/Event
• https://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture
• http://javascript.ruanyifeng.com/dom/event.html
• 思考：自定义事件的应用场景？

事件代理和委托

• https://zhuanlan.zhihu.com/p/26536815
• 思考：事件代理和委托的优缺点？
• 扩展（可做可不做）：https://github.com/FE-star/exercise20

AJAX & fetch

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
• https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
• https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
• 思考：有 xhr 为什么还要 fetch？
• 扩展：了解 https://github.com/axios/axios 的实现（有时间可以看看源码）

异步流程控制

了解 callback hell 是如何产生的，以及 Promise + async/await 为什么能避免回调地狱

callback

• 了解一下回调和回调地狱 http://callbackhell.com/
• 了解一下 node 的 error first

Promise + async/await

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

callbackify & promisify

思考一下：如何实现 callback 和 promise 的互相转换

• https://nodejs.org/dist/latest-v9.x/docs/api/util.html#util_util_callbackify_original
• https://nodejs.org/dist/latest-v9.x/docs/api/util.html#util_util_promisify_original
• https://github.com/nodejs/node/blob/e3d05a61215b2958cc1951759e08e816b35f5027/lib/internal/util.js#L255-L290
• https://github.com/nodejs/node/blob/e3d05a61215b2958cc1951759e08e816b35f5027/lib/util.js#L370-L395

扩展知识，了解即可

Generator + function*

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function%2A

RxJS

• http://reactivex.io/rxjs/
• joeyguo/blog#11

前端性能优化（二）

执行优化

• 测试代码的性能
• http://jsben.ch/
• https://benchmarkjs.com/
• https://github.com/jsperf/jsperf.com

JIT(Just In Time)

• 了解原理即可，原文 译文
• 另外，这个专栏不少文章都是跟性能优化相关的，有时间可以看看 https://zhuanlan.zhihu.com/qianduandaha

Lazy

• throttle & debounce
• setTimeout & requestAnimationFrame
• lazyload & preload
• 大列表优化

其他

• MTU + inline + base64
• 小图 vs 大图
• progressive vs baseline
• webp + webm
• HTTP/2 ?
• QUIC ?