前端知识点参考

JavaScript

ES6/ES2015

这是本人非常看重的一块；ES5以前，JavaScript充其量跟C也差不了太多，全局变量满天飞，感觉不好。ES6之后引入了很多新特性，比如class，async，Promise等等，瞬间就充满了活力，非常吸引人。
ECMAScript 6 入门这套内容可以多看看，工作中可以应用到

• const 和 let
• 模板字符串
• 默认参数
• 箭头函数
• 模块的 Import 和 Export
• 析构赋值
• Spread Operator...
• Promises
• async/await
• class
• JavaScript中使用fetch进行异步请求
• Array和Set互转，实现数组去重
• Babel转码，将ES6代码映射为ES5，兼容浏览器

原型

JavaScript是通过对象，构造函数（类），原型（构造函数.prototype）三个实体和三种指针，__proto__，prototype, constructor，来实现面向对象功能的。
在ES5以前，理解这一点非常重要，是面向对象编程的基础。
ES6之后，可以直接使用class, extend等关键字，理解起来就方便多了。虽然被称为语法糖，但是实际上非常重要。
彻底理解JavaScript原型
javaScript原型链理解
对象模型的细节
继承与原型链

---

React

• React是一个典型的MVC框架，但是不是一个完整的MVC框架，它是构建易于可重复调用的web组件，侧重于UI, 也就是view层。
• React的主旨是组件化，React.Component是基类；
• JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。标签也会转化为JavaScript 代码，会快一点；
• React通过对DOM(Document Object Model)的模拟，最大限度地减少与DOM的交互。
• state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。而子组件只能通过 props 来传递数据
• 父传子，通过props；子传父，通过函数参数；兄弟之间通信，通过父组件作为媒介；

• 生命周期函数：

  
  
  

  React生命周期.png
• React Refs获取DOM节点上组件
• 教程：简介 React

Flux

Flux 是一种架构思想，和 MVC 一样，用以解决软件结构的问题，如上所说 React 只是涉及了 UI 层所以在搭建大型应用时必须要有与之配套的应用架构。在 React 社区大家普遍使用 Flux 架构的思想来搭建应用。

flux.png

Redux

dva就是基于这个二次开发而来的
Redux 中文文档

---

dva

• dvajs/dva-knowledgemap
• 初识 Dva
• dva 的 effects 是通过 generator 组织的。Generator 返回的是迭代器，通过 yield 关键字实现暂停功能。
• React Component 有 3 种定义方式，分别是 React.createClass, class 和 Stateless Functional Component。推荐尽量使用最后一种，保持简洁和无状态。这是函数，不是 Object，没有 this 作用域，是 pure function。
• class 是保留词，所以添加样式时，需用 className 代替 class 。
• JavaScript 表达式需要用 {} 括起来，会执行并返回结果。
• Spread Attributes;这是 JSX 从 ECMAScript6 借鉴过来的很有用的特性，用于扩充组件 props 。

const attrs = {
  href: 'http://example.org',
  target: '_blank',
};
Hello

• JavaScript 是弱类型语言，所以请尽量声明 propTypes 对 props 进行校验，以减少不必要的问题。
• CSS Modules 默认是局部作用域的，想要声明一个全局规则，可用 :global 语法。
• reducer 是一个函数，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state
• dva 里，effects 和 subscriptions 的抛错全部会走 onError hook，所以可以在 onError 里统一处理错误。
• Effects: put用于触发 action 。call用于调用异步逻辑，支持 promise 。select用于从 state 里获取数据。
• subscriptions 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为 ({ dispatch, history }) => unsubscribe 。
• Route Components 是指 ./src/routes/ 目录下的文件，他们是 ./src/router.js 里匹配的 Component。

• dva架构图

  
  
  

  dva.png
• State 表示 Model 的状态数据，通常表现为一个 javascript 对象（immutable data）。
• Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。无论是从 UI 事件、网络回调，还是 WebSocket 等数据源所获得的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。
• dispatch 是用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式。
  dispatch是函数，action是函数的参数。
• 在 dva 中，reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值，与当前 reducers 中的值进行运算获得新的值（也就是新的 state）。需要注意的是 Reducer 必须是纯函数。
• Effect 被称为副作用，在我们的应用中，最常见的就是异步操作，Effects 的最终流向是通过 Reducers 改变 State。
• Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
• 这里的路由Router通常指的是前端路由，由于我们的应用现在通常是单页应用，所以需要前端代码来控制路由逻辑，通过浏览器提供的 History API 可以监听浏览器url的变化，从而控制路由相关操作。
• 在 dva 中我们通常以页面维度来设计 Container Components。
  所以在 dva 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components）。

antd

PC端组件库
Ant Design of React

antd-mobile

移动端组件库
Ant Design Mobile of React

---

CSS

Flex布局

Flex 布局教程：语法篇
Flex 布局教程：实例篇

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
• flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上如何对齐。
• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

LESS

LESS语言特性

---

HTML

HTML5

W3C HTML5 教程
菜鸟教程 HTML5

---

webpack

---

Node

---

npm

---