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

请回复～～thx

本节课的主要内容是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/exercise13【文坚注：这个作业感觉给错了，不建议大家看】
2. https://github.com/FE-star/react-pattern 这个选看，我会主要讲解redux的应用

扩展阅读

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

上周五有位大厂的大神向我要简历，心想着就体验一把吧，没想到面试下来不到10min就结束了，不过还是有收获。

面试过程

1、自我介绍

• 12年开始接触前端，传统
• 毕业1年左右
• 中间接触过一些项目，但用的不深

2、引申如何学习前端知识？

• 基础 和 业务
• 基础学习，着重记录和总结
• 框架，视频 + 文档

3、webpack模块懒加载原理？

一脸懵...完全没答上来

4、介绍一下React？

组件、虚拟DOM、JSX => 评价说理解比较片面

5、挂……

感受

其实问我的两个问题我毫无招架之力，本来以为会从基础入手的，哈哈哈。问的都是现代前端的原理。

补充

我抓紧问：传统前端和当今大前端的学习？

原问题介绍是这样的，我认为自己传统前端的基础其实也还很薄弱，很多东西虽然掌握了，但是老感觉自己没学到位。再加上现代大前端的趋势，模块化、工程化等等，感觉学起来更是懵，很多高大上的概念。感觉自己啥也不会了，针对这两者的学习，有什么建议吗？

答：建议去看看webpack的源码，里面其实用的都还是那些东西，其实看了源码就能够把传统前端的很多东西串起来。

get.

问题收集哈～大家多提问。

• 讲讲为什么开这个课
• 如何达到课程目标？
• 扩展下现在的面试情况

第一节课时主要讲课程介绍和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

附

课程还包含一些分享计划，具体参见：
FE-star/long-plan#1

口嗨

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

• 了解一下 STAR 面试法
• 了解一下 金字塔原理

设计模式

• 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
• 思考：事件代理和委托的优缺点？

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？

异步流程控制

callback

• 了解一下 node 的 error first
• https://nodejs.org/dist/latest-v9.x/docs/api/util.html#util_util_callbackify_original

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

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
• https://nodejs.org/dist/latest-v9.x/docs/api/util.html#util_util_promisify_original

RxJS

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

7.8（暂定），新一期的助教，第一期学员风之谷给我们分享他的成长之旅。

朱老师不发预习，我先发以前的大家先看看

模版

• 前端模版

webpack

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

前端性能优化（二）

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

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

执行优化

• 测试代码的性能
• 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 ?

首先谢谢老师给了这个面试的机会，这场面试确实是一场非常棒的面试，这里我想结合我之前的一些面试做一点小分享。
一、知识覆盖度
一场面试下来，基本会将前端的一些基础知识都覆盖到，JS基础知识比如闭包、作用域、原型，ES6，框架，http，缓存等等，我自己的话会将这些知识点分类，然后用思维导图整理出来，差不多像这样：

然后分好大类之后再一点点填充每一类的知识点，复习的时候就可以一点点地过，自己心里也有个框架。
二、知识深度
上面的知识覆盖度这一块我觉得知识考察你知不知道某些知识，如果知道都不知道，更别谈能说得出有什么深度的东西了。
我遇到的面试上对知识深度的考察是这样的，问你一些基础知识的时候深挖这个知识的背后原理，一步一步往深里问直到你答不上来，这样就知道到底你对这个知识点理解程度到哪。就像这次的面试，面试官问，你知道XXX（知识点）吗？我说知道，然后面试官就会问你知道XXX是怎样实现的吗，你自己有实现过吗？继续往下深挖，你知道XXX的使用场景吗？如果不用XXX还可以怎样做？那使用XXX有什么优点，有什么缺点？基本一顿这样下来，对知识理解得不够深的话，都招架不住了（我就是招架不住的人，非常惭愧）
印象最深的是面试官的一句话：任何技术都有优点缺点。这句话对我启发很大，反观自己平时的学习真的是比较浅，一个知识点不仅仅要知道，还要去了解原理，懂得优劣，这样才能知道什么时候使用什么东西，而不是人云亦云。
三、总结
总的来说，不管是应对面试还是为了提高自己，学习某个知识时，还是需要纵横兼顾。纵向是对该知识点背后原理的深挖，横向是对该知识点的类比与拓展，思考该知识点还与哪些知识点有关，还有没有更好的方案等。希望通过这三个月的学习，大家能一起查漏补缺，提升巩固，争取更上一层楼。共勉哈。

安全 & Node.js（一）

安全

安全是一个非常重要的话题，要了解其攻击的原理和防范的方法，这里推荐两本书给大家，有时间可以先看一下 Web前端黑客技术揭秘 和 白帽子讲Web安全

• 熟悉浏览器的同源策略（之前讲过）
• https://developers.google.cn/web/fundamentals/security/
• https://github.com/chokcoco/httphijack
• 了解为什么要用 https
• 了解 CSP
• 了解 XSS 和 X-XSS-Protection
• 了解 CSRF
• 了解 clickjacking 和 X-Frame-Options

Node.js 基础

• 熟悉 API https://nodejs.org/api/
• 源码 https://github.com/nodejs/node
• 了解 npm https://docs.npmjs.com/
• 了解 koa，尝试写一个中间件
• 了解 express，尝试写一个中间件
• [可选] 了解 eggjs

进阶

• 了解常见内存更新策略 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

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 思否

错误监控

• GlobalEventHandlers.onerror
• What the heck is "Script error"?
• try...catch
• unhandledrejection
• 了解sourceMap

性能上报

• Performance

showcase

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

扩展阅读

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

正则表达式

• 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

1、dom标准级别。。帮完善知识点。。

2、ppt 思路

oberser 引出事件。。 固然大多数事件是异步的，之后又引入了异步事件。。 ajax也可概括为大多数常用为异步。。是不是ajax单独拉出来的知识点更合理呢（也就有了下面的第三个问题）。。 也请老师讲一下这个ppt思路吧。。

3、拿ajax模型来讲

像打电话一样。建立一个xhr对象，然后通过一些协议连接请求拨号像opensend呀，之后等待电话的回复。个人觉得像ajax呀、fetch很熟悉，即使某些参数不熟悉在开发中查阅stackoverflow mdn一些参数在和后台人员沟通即可节。一般人都会这么回答本人也是一直了解到这个程度。
&&
但是reqeust 和 服务端的交互这方面的知识呢？ 我们是接下来的课程会有这方面的知识还是自己去拓展了解。。？

4、例如的一个知识点基本上都有一个了解的及格程度。。那么如果深入到什么样的程度会是一个及格点呢？拿这个第三点问题reqeust 和 服务端的交互这方面的知识来说呢？

前端性能优化（一）

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

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

了解常用性能测试工具

• 熟悉 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/

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

this机制

• You-Dont-Know-JS中关于this的章节(中文版是上卷的第二部分的第一、二章节)
  1. this Or That?
  2. this All Makes Sense Now!
• 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
• 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: 跨域方案