经常听到自动化测试，单元测试这种概念，一直以来我都处于一种概念性的了解。其实目前我们大环境下，还是很多公司对自动化测试这块没有那么重视，很多都还处于人工测试的阶段。改一个公用函数，我们生怕影响到所有的业务代码，靠人力，我们无法说服自己测试全面了。那么，自动化测试可以做到哪种地步呢？

什么是单元测试

我们有很多测试方法，单元测试、集成测试、端到端测试、可视化测试、功能测试等等等等。不同的人对不同的测试方法有不同的理解。
业界有这样的一种说法，单元测试和端到端测试是测试的两极，其余的测试都在在这两个测试范围中间。
这里我们只聊聊单元测试。那么，什么叫单元测试呢？顾名思义，就是以代码单元为单位的测试。这个代码单元可以是一个函数，一个对象，或者一个类。

Flexible是什么

在Mobile时代，h5页面的开发要面临很多问题。比如设备尺寸的大小，我们要去考虑适配大小问题；高分辨率屏的出现，我们要去考虑图的清晰度的问题；同时呢，视觉稿和开发应该怎么的一套规范问题。等等，在这样的背景之下呢，手淘提出了一套适配多终端的方案–Flexible方案。

在了解这个方案之前，我们先来抛开方案，看看本质。

重新翻到执行上下文这个概念，发现当年阅读的时候，只关注了作用域链这件事，忽略了这个比较有意思的知识点。那么今天来稍稍整理下。

执行上下文栈(ESC)

所谓的执行上下文栈，也就是执行环境栈。
每个函数都有自己的执行上下文，执行每个函数的时候，都会进入函数的执行环境。那么在执行过程中，引擎怎么去管理这么多执行环境呢。因此有了这样的一个执行环境栈的概念。“栈”， 就是数据结构中的概念，一个后进先出的表。
这可以理解为我们平时经常用的递归。

React 16之后，不仅仅是切换到MIT协议，还有了很多突破性改变和新功能，本文主要是对react 16及之后的版本更新有个大致的整理。

Fiber架构

v16.0.0更新

Stack Reconciler存在什么问题呢

在原有的React中，更新过程是同步的。什么意思呢？
React挂载或者更新的时候，递归调用各个组件生命周期，对比virtual DOM，更新DOM树，整个过程一旦开始，不可被打断。这样的设计，在组件层级比较深，dom树比较庞大的时候，就会有问题出现了。

问题描述

今天在工作中遇到这样一个问题，两台机器同一个页面打包出来的页面样式在ios8上的表现非常不一致！
仔细看了页面的样式，发现用了flex布局， 而ios8需要-webkit-前缀。
暂时先不考虑css写法严不严谨的问题， 但是咱们不是用了autoPrefixer自动处理css样式了吗？？？
这貌似没生效啊？

为什么我们在react项目中， 用到redux的时候，常常会选择react-redux。react-redux到底为我们做了什么便利的事情呢？？？

不用react-redux时的手动连接

假设有一个组件 ，组件现在目前就支持简单的加法（onIncrement），减法（onDecrement）。
首先我们提前做好把redux的基础准备工作做好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//actions
const Actions = {
  onIncrement: {type: 'INCREMENT'},
  onDecrement: {type: 'DECREMENT'}
}
//reducer
const Reducers = function(state, action){
  switch(action.type){
    case 'INCREMENT': return state+1;
    case 'DECREMENT': return state-1;
    default: return state;
  }
}
const store = createStore(Reducers);

本文我们只讲redux中除了createStore的那些api， 我将这些api称作redux中的便利工具，是为了createStore更好的工作。如果对createStore这个核心api更感兴趣的话， 请看这篇【Redux源码学习之createStore】

compose

compose是函数式编程中的一个概念，通过合成多个函数，最终生成一个把接收函数从右到左合成的超级厉害版的函数。

之前在项目中，偶尔交互复杂的页面我们项目组会引入了Redux，快速迭代的过程中，我们在网上快速学习了用法，跑了demo，照葫芦画瓢地用进了项目里。当时自己的感受就是：一层套一层，这里要用这个，那里要结合那个，整个redux的引入，合着react-redux（项目用的react），用起来就是一种仿照的迷惘，只知道“要这样用”。现在前端圈可能就会有这种现象，结合的东西太多太复杂，当我们引入新东西的时候可能一下子需要学习的是这个新技术的整个生态圈，学起来反而有些吃力。这时候，我们需要做的是，抛开各种花哨的便利工具，告诉自己最简单的用法怎么整。

看了redux的源码之后，我可以这么说，createStore就是redux的精髓，刚开始，我们只需要这个函数做了什么，根本不用care别的。

当我们项目需要下载一个模块的时候，我们安装npm包（在项目目录下面npm install module_name）的时候，很多时候我们会在后面加上–save-dev 或 –save。这两个参数代表什么呢？

初识

相信很多人都会回答：

npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

Webpack现在已经成为了前端模块化开发的标配。具体的理论基础介绍呢，这篇文章就不做赘述了。直接从实践入手，一一解释相关。全文基于webpack3.6.0。可能因为版本不一产生部分不同，但大体肯定是一致的。

安装和使用

安装方式

webpack可以作为就全局的npm包安装， 也可以在当前项目中安装

1
2

npm install -g webpack
npm install --save-dev webpack