首页  思维导图  详情

JavaScript学习导图

2017-06-08 14:45:04   0  举报





仅支持查看

AI智能生成

一个C++程序员学习JavaScript的路线图。此图会持续更新。

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

基本知识

基本概念

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

执行上下文

创建阶段

变量对象

执行阶段

活动对象

原型链、继承

宏观解释

从探究Function.__proto__===Function.prototype过程中的一些收获

模块化

JavaScript模块化现状

ESM

CommonJS

AMD

阮一峰介绍系列

模块的写法

AMD（异步模块定义）规范

require.js的用法

JavaScript module in depth

ESL

require.js用法系列教程

require.js 为何用 Web 模块的方式

自动化构建、打包

gulp

webpack

大概工作流程

devtool

<code>source-map</code> 是用于 <code>production</code>，<code>cheap-eval-source-map</code> 是用于 <code>development</code>。

中文

webpack-dev-server

详解

webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中

博客

webpack四大核心概念

入门

<a data-pjax="#js-repo-pjax-container">WebpackTutorial</a>

快速入门

入门指迷

howto

优化

常用plugins

Babel

Babel User HandBook

<a>cross-env</a>

状态管理

Redux

基本概念

tutorial

中文文档

Flux --> Redux --> Redux React 基础实例教程

受Flux影响的一种架构风格

Redux入门教程

基本用法

中间件与异步操作

React-Redux的用法

Building App with Redux

Getting Started with Redux

React-Redux

Provider

New Component

connect(,,)(Component)

mapStateToProps

mapDispatchToProps

Component组件

createStore

Reducer

action

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

<pre><code>// The ES5 way var Photo = React.createClass({ handleDoubleTap: function(e) { … }, render: function() { … }, });</code></pre>

<pre><code>// The ES6+ way class Photo extends React.Component { handleDoubleTap(e) { … } render() { … } }</code></pre>

browser.js 其实就是 babel-core 的浏览器版本 <a>BABEL</a> is a javascript compiler, and importing its "browser.min.js" file, you are enabling it to "compile" the code inside "text/babel" script tags and execute it as vanilla javascript.

tackoverflow上的解释

React.createClass VS extends Component

解释1

解释2

解释3

组件定义方式

函数式定义。 特点是无状态，没有被实例化，无法访问this对象，不能管理生命周期。多用于纯展示的组件

React.createClass方式定义。 （已废弃，官方不推荐使用）

集成React.Component方式定义。 推荐使用

事件绑定方式

直接在构造函数中绑定

直接在事件中绑定

在事件绑定中直接使用回调函数调用

博客、学习资料

精益React学习指南

编写React组件的最佳实践

progressive web tutorial

React小书

React入门

tutorial

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迷你书

InfoQ

google, Web Fundamentals

介绍

<code>Promise</code>，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

特点

对象的状态不受外界影响。<code>Promise</code>对象代表一个异步操作，有三种状态：<code>Pending</code>（进行中）、<code>Resolved</code>（已完成，又称 Fulfilled）和<code>Rejected</code>（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。<code>Promise</code>对象的状态改变，只有两种可能：从<code>Pending</code>变为<code>Resolved</code>和从<code>Pending</code>变为<code>Rejected</code>。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。如果改变已经发生了，你再对<code>Promise</code>对象添加回调函数，也会立即得到这个结果。

缺点

首先，无法取消<code>Promise</code>，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，<code>Promise</code>内部抛出的错误，不会反应到外部。第三，当处于<code>Pending</code>状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

如果某些事件不断地反复发生，一般来说，使用 <a>Stream</a> 模式（Nodejs）是比部署<code>Promise</code>更好的选择。

异步系列介绍

Generator

调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的<code>next</code>方法，就会返回一个有着<code>value</code>和<code>done</code>两个属性的对象。<code>value</code>属性表示当前的内部状态的值，是<code>yield</code>表达式后面那个表达式的值；<code>done</code>属性是一个布尔值，表示是否遍历结束。

<code>yield</code>表达式本身没有返回值，或者说总是返回<code>undefined</code>

子主题

async/await

使用注意点

<code>await</code>命令后面的<code>Promise</code>对象，运行结果可能是<code>rejected</code>，所以最好把<code>await</code>命令放在<code>try...catch</code>代码块中

多个<code>await</code>命令后面的异步操作，如果不存在继发关系，最好让它们同时触发

<code>await</code>命令只能用在<code>async</code>函数之中，如果用在普通函数，就会报错

视频

axios

TypeScript

DOM

VDOM