JavaScript学习导图
2017-06-08 14:45:04 0 举报AI智能生成
登录查看完整内容
一个C++程序员学习JavaScript的路线图。 此图会持续更新。
作者其他创作
大纲/内容
关联主题
浏览器的工作原理
front-end-handbook
LogRocket
Google Developers
函数式编程1
函数式编程2
performance
如何问问题
top-javascript-frameworks-topics-to-learn-in-2017
web前端开发评测系统，里面有面试题、实战代码等
HTML
HTML5元素
优化
JavaScript Optimization Patterns
范畴论
hindley-milner
React、Redux、ES6的github资源
gulp、webpack区别
MERN2.0
JavaScript
基本知识
基本概念
What_is_JavaScript
ES6
阮一峰
setting-up-es6
关于如何学习JS的
2016年如何学习JS
6周学习计划，（扯的）
2071，JavaScript应该学什么
一些网站
freecodecamp
weizhifeng
2017前端开发趋势
前端联盟月报
react digest
学习网站
http://javascript.info/
ES6 Cheatsheet
Understanding ECMAScript 6
A re-introduction to JavaScript
编写高质量JavaScript代码的68个有效方法
Effective JS
博客园的中文版
核心概念
中文版，文中附带英文版
技术点
generator
==与===的区分
transpile
执行上下文
创建阶段
变量对象
执行阶段
活动对象
原型链、继承
宏观解释
JavaScript 世界万物诞生记
从探究Function.__proto__===Function.prototype过程中的一些收获
模块化
JavaScript模块化现状
ESM
CommonJS
AMD
阮一峰介绍系列
模块的写法
AMD（异步模块定义）规范
require.js的用法
JavaScript module in depth
ESL
require.js用法系列教程
require.js 为何用 Web 模块的方式
自动化构建、打包
gulp
webpack
大概工作流程
devtool
source-map 是用于 production，cheap-eval-source-map 是用于 development。
中文
webpack-dev-server
详解
博客
webpack四大核心概念
入门
WebpackTutorial
快速入门
入门指迷
howto
常用plugins
Babel
Babel User HandBook
cross-env
状态管理
Redux
tutorial
中文，文中有英文链接
中文文档
Flux --> Redux --> Redux React 基础实例教程
cnblog
受Flux影响的一种架构风格
InfoQ
Redux入门教程
基本用法
中间件与异步操作
React-Redux的用法
Building App with Redux
Getting Started with Redux
React-Redux
Provider
New Component
mapStateToProps
mapDispatchToProps
Component组件
createStore
Reducer
action
reducer是纯函数
完整流程描述
Store、State、Action、Reducer
Flux
React
基本原理
ReactDOM.render()
JSX语法
组件（VDOM），只允许一个顶层标签，且第一字母必须大写
this.props.children
React.Children.map
React.ProTypes
获取真实DOM
ref属性
this.refs.[refName]
this.props为静态，this.state为动态
props一般也是父组件传递给子组件的属性，而state只能是自身的属性
组件生命周期，三个状态
Mounting：已插入真实DOM
主要包括属性和状态的初始化阶段、组件即将加载（componentWillMount）阶段、组件渲染（render）阶段、组件加载完成（componentDidMount）阶段。除了render可在存在期的时候再次进行组件渲染之外，其他阶段只会发生一次
Updating：正在被重新渲染
组件实例化之后，在组件存在的时期，随着与用户的交互，属性或状态的改变，组件可发生一些更新。在实际开发中，为了防止无意义的渲染，通常会在shouldComponentUpdate添加判断，自定义是否需要更新
一般的做法是在componentWillReceiveProps中根据条件判断是否需要更新状态，然后在shouldComponentUpdate中再根据条件判断是否需要更新渲染组件
Unmounting：已移出真实DOM
每个状态提供了两种处理函数
will函数在进入状态之前调用调用
componentWillMount()
componentWillUpdate()
componentWillUnmount()
did函数在进入状态之后调用
omponentDidMount()
componentDidUpdate()
特殊处理函数
componentWillReceiveProps已加载组件收到新的参数时调用
shouldComponentUpdate组件判断是否重新渲染时调用
React组件样式是一个对象，所已应该写成：style={{opacity: this.state.opacity}}第一个大括号表示这是JavaScript语法第二个大括号表示样式对象
如果需要浏览器支持JSX语法，需要引入browser.js
// The ES6+ wayclass Photo extends React.Component { handleDoubleTap(e) { … } render() { … }}
tackoverflow上的解释
React.createClass VS extends Component
解释1
解释2
解释3
组件定义方式
函数式定义。特点是无状态，没有被实例化，无法访问this对象，不能管理生命周期。多用于纯展示的组件
React.createClass方式定义。（已废弃，官方不推荐使用）
集成React.Component方式定义。推荐使用
事件绑定方式
直接在构造函数中绑定
直接在事件中绑定
在事件绑定中直接使用回调函数调用
博客、学习资料
精益React学习指南
编写React组件的最佳实践
progressive web tutorial
React小书
React入门
More than React，反面介绍React的缺点
视频
Controller View Pattern
npm命令
MobX
middleware
Redux middleware的绝妙解释
middleware解释
understanding middleware
A Beginner's Guide to Redux Middleware
redux middleware的应用
redux middleware生命周期的图形化解释
redux from scratch
如何尽可能降低组件中的state复杂度，同时又不使用Redux
learn-react-before-using-redux
源码解析
Under the hood
React Internals
异步
Promise
promise迷你书
介绍
Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
特点
对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。
缺点
首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
如果某些事件不断地反复发生，一般来说，使用 Stream 模式（Nodejs）是比部署Promise更好的选择。
异步系列介绍
w3cplus
Generator
调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。
yield表达式本身没有返回值，或者说总是返回undefined
子主题
async/await
使用注意点
await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中
多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发
await命令只能用在async函数之中，如果用在普通函数，就会报错
axios
TypeScript
早起搬砖
DOM
VDOM
CSS
em
收藏
0 条评论
回复 删除
下一页
