if (process.env.NOED_ENV !== 'production') {
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}

class App extends component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      user: {
        name: 'zp'
      }
    }
  }
  handleClick = () => {
    this.setState({
      count: 0
    });
  }
  render() {
    return (
      <div>
        <div onClick={this.handleClick}>点击我</div>
        <div>{this.state.count}</div>
      </div>
    );
  }
}

class App extends PureComponent {
// ...代码
}

handleClick = () => {
    this.setState({
      user: {
        name: 'zp'
      }
    });
  }

deepEquals = (obj1, obj2) => { 
    if (obj1 === obj2) {
      return true;
    }
    for (const key of Object.keys(obj2)) {
      if (obj1.hasOwnProperty(key) && obj1[key] === obj2[key]) {
        return true;
      }
    }
    return false;
  }
  shouldComponentUpdate = (nextProps, nextState) => {
    return  !this.deepEquals(this.state, nextState) || !this.deepEquals(this.props, nextProps);
  }

this.state = {
      data: Immutable.fromJS({
        count: 0,
        user: {
          name: 'zp'
        }
      })
    }

handleClick = () => {
    this.setState((d) => {
      return {
        data: d.data.updateIn(['user', 'name'], () => 'zp') // 这里改变了user里面的name，深层改变
      }
    })
  }

render() {
    const data = this.state.data;
    return (
      <div>
        <div onClick={this.handleClick}>点击我</div>
        <div>{data.get('count')}</div>
        <div>{data.getIn(['user', 'name'])}</div>
      </div>
    );
  }

"nyc": "nyc ava -vs && nyc report --reporter=html",

"coverage": "node ./node_modules/istanbul/lib/cli.js cover ./node_modules/mocha/bin/_mocha -- --compilers js:babel-core/register --reporter mochawesome -R spec --timeout 5000 --recursive",
"coveralls": "npm run-script coverage && node ./node_modules/coveralls/bin/coveralls.js < coverage/lcov.info"

let dispatch = (action) => {
  console.log(333, action)
}

const cons = (next) => action => {
  console.log(111);
  next(action);
}

const cons2 = (next) => action => {
  console.log(222);
  next(action);
}

// 类比原生dispatch
let dispatch = (action) => {
  console.log(333, action)
}
// 中间件1
const cons = (next) => action => {
  console.log(111);
  next(action);
}
// 中间件2
const cons2 = (next) => action => {
  console.log(222);
  next(action);
}
// 增强的dispatch
dispatch = cons2(cons(dispatch))
// 调用增强的dispatch
dispatch({key: 2})  // 222，111，333  数据action的流向是cons2->cons->dispatch

const store = createStore(reducers, applyMiddleware(thunk));

export default function applyMiddleware(...middlewares) {
  return (next) => (reducer, initialState) => {
    const store = next(reducer, initialState);
    const middlewareAPI = {
// 这里的getState也保证了每次的middlewares使用的store.state是最新状态的state
      getState: store.getState,
// 这里使用闭包使得每次执行middlewares的dispatch都是当前最新的，即middleware2拿到的dispatch是经过middleware1增强后的dispatch。
      dispatch: (action) => dispatch(action) 
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI));// 将最新的state和dispatch传入中间件，使得中间件可以获取最新的状态和dispatch。
    const dispatch = compose(...chain)(store.dispatch) // compose是redux提供的一个函数实现上述从f(),g(),h()到f(g(h(dispatch)))的过程。具体实现自行百度。。。懒得写了。
    return {
      ...store,
      dispatch // 最终将得到的增强的dispatch，覆盖了原生的store里面的dispatch。
    }
  }
}

middleware = next => action => {}
// 变成了
middleware = ({dispatch, getState}) => next => action => {}
// 因此applyMiddleware中将其执行一次后再进行compose组合

function fetchData() {
  return (dispatch, getState) => {
    setTimeout(() => {
      dispatch({type: 'test', text: 'haha'});
    }, 1000);
  }
} 

const thunk = ({dispatch, getState}) =>(next) => action => {
  if (typeof action === 'function') { // 异步函数
    return action(dispatch, getState); // 注意此处的dispatch是最新的dispatch，进入循环
  }
  next(action);
}

if (process.env.NODE_ENV === 'development') {
  Vue.config.devtool = true;
}

constructor(props) {
  super(props);
  this.state = {
    val: 0
  }
}
render() {
  console.log(33333);
  return ({this.state.val})
}

componentWillMount() {
    setTimeout(() => this.setState({
      val: 999
    }), 2000)
  }
// 先打印33333
// 2s后打印33333
componentWillMount() {
    this.setState({
      val: 999
    }
  }
// 打印一次33333

this.state = { test: 'hello' }
...
this.setState({
      test: 'world'
    })
console.log(this.state.test) // hello

this.setState({
  test: 'world'
}, () => console.log(this.state.test)) // world

handleClick() {
  this.setState({
     val: this.state.val + 1
  });
   //第一次输出
   console.log(this.state.val);
   this.setState({
      val: this.state.val + 1
   });
   //第二次输出
   console.log(this.state.val);
   setTimeout(()=>{
      this.setState({val: this.state.val + 1});
       //第三次输出
       console.log(this.state.val);
       this.setState({
          val: this.state.val + 1
       });
       //第四次输出
       console.log(this.state.val);
   }, 0);
}
render() {
  console.log(2333333); // 打印出来查看render次数
  return ({this.state.val})
}

0
0
2333333 // 两次setState批量更新后的render 得到state.val == 1
2333333 // 第三次setState立即更新
2
2333333 // 第四次setState立即更新
3

 onDocumentMouseOver: function (event) {
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / this.width) * 2 - 1;
    mouse.y = - (event.clientY / this.height) * 2 + 1;
    this.raycaster.setFromCamera(mouse, this.camera);
    let intersects = this.raycaster.intersectObjects(this.scene.children, true);
  }

  cubeA.material.depthTest = false;
  cubeA.renderOrder = 1;
  scene.add(cubeA);
  cubeB.material.depthTest = false;
  cubeB.renderOrder = 2;
  scene.add(cubeB);

"antd": "3.7.0",
"react": "^16.4.1",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

export default class ProductClasses extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
          productClasses: [],
        };
    }

    async componentDidMount() {
      const result = await queryListTree();
      this.setState({
        productClasses: result.data,
      })
    }
    

    render() {
      const { productClasses } = this.state;
      const { labelInValue, prop, form } = this.props;
        return  <TreeSelect
            defaultValue={form.getFieldsValue([prop])[prop]}
            onChange={(e) => form.setFieldsValue({
              [prop]: e,
            })}
            labelInValue={labelInValue}
            placeholder="请选择产品类型"
            dropdownStyle={{maxHeight: 300}}
            allowClear
            style={{ width: 200 }}
          >
            {makeTreeDom(productClasses)}
          </TreeSelect>
    }
}

return productClasses.length ? (
          <TreeSelect
            defaultValue={form.getFieldsValue([prop])[prop]}
            onChange={(e) => form.setFieldsValue({
              [prop]: e,
            })}
            labelInValue={labelInValue}
            placeholder="请选择产品类型"
            dropdownStyle={{maxHeight: 300}}
            allowClear
            style={{ width: 200 }}
          >
            {makeTreeDom(productClasses)}
          </TreeSelect>
) : null

const https = require('https');
const fs = require('fs'); 
var privateKey  = fs.readFileSync(path.join(__dirname, './cert/private.pem'), 'utf8');
var certificate = fs.readFileSync(path.join(__dirname, './cert/file.crt'), 'utf8');
var credentials = {key: privateKey, cert: certificate};

const httpsPort = process.env.httpsPort || config.dev.httpsPort;
``

再在server = app.listen(port);后面加入这几行代码开启https服务。

```js
    server = app.listen(port);
    var httpsServer = https.createServer(credentials, app);
        httpsServer.listen(httpsPort, function() {
            console.log('HTTPS Server is running on: https://localhost:%s', httpsPort);
        });

function log(target, name, descriptor) {
  var oldValue = descriptor.value;
  descriptor.value = function () {
    const res = oldValue.apply(null, arguments);
    console.log(`Calling "${name}" and return `, res);
    return res;
  };

  return descriptor;
}
class App extends React.Component {
  @log
  add() {
    return 3;
  }
  componentDidMount() {
    this.add()
  }
  render() {
    return 111;
  }
}

const setTitle = (title) => (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      document.title = title
    }
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}
@setTitle('Profile Page')
class App extends React.Component {
  render() {
    return 111;
  }
}

@connect(() => {
  return {
    count: state.count
  }
},
(dispatch) => {
  increcement: () => dispatch(increcementAction())
})
class App extends React.Component{
  ...
}

var sourcePosition3D = new THREE.Vector3(0, 0, 0);
var targetPosition3D = new THREE.Vector3(0, 0, 0);
sourcePosition3D.copy(sourceSphere.sphere.position); // 球心坐标
targetPosition3D.copy(targetSphere.sphere.position);
var sourcePoint = HelperMethods.get2DCoords(sourcePosition3D, camera, this.width, this.height);
var targetPoint = HelperMethods.get2DCoords(targetPosition3D, camera, this.width, this.height);
const sourced = sourceSphere.sphere.position.distanceTo(camera.position) // 视角到球心的距离
const sourceRadius = HelperMethods.computeProjectedRadius(camera.fov, sourced, sourceSphere.sphere.geometry.parameters.radius * sourceSphere.sphere.scale.x, this.width, this.height);
							
const targetd = targetSphere.sphere.position.distanceTo(camera.position)
const targetRadius = HelperMethods.computeProjectedRadius(camera.fov, targetd, targetSphere.sphere.geometry.parameters.radius * targetSphere.sphere.scale.x, this.width, this.height);

const tan = (targetPoint.y - sourcePoint.y) / (targetPoint.x - sourcePoint.x);
const deg = Math.atan(tan);

const diffx = targetPoint.x - sourcePoint.x;
const diffy = targetPoint.y - sourcePoint.y;
diffx > 0 ? sourcePoint.x = sourcePoint.x + sourceRadius * Math.abs(Math.cos(deg)) : sourcePoint.x = sourcePoint.x - sourceRadius * Math.abs(Math.cos(deg));
diffy > 0 ? sourcePoint.y = sourcePoint.y + sourceRadius * Math.abs(Math.sin(deg)) : sourcePoint.y = sourcePoint.y - sourceRadius * Math.abs(Math.sin(deg));

							
const tan1 = (sourcePoint.y - targetPoint.y) / (sourcePoint.x - targetPoint.x);
const deg1 = Math.atan(tan1);

const diffx1 = targetPoint.x - sourcePoint.x;
const diffy1 = targetPoint.y - sourcePoint.y;
diffx1 > 0 ? targetPoint.x = targetPoint.x - targetRadius * Math.abs(Math.cos(deg1)) : targetPoint.x = targetPoint.x + targetRadius * Math.abs(Math.cos(deg1));
diffy1 > 0 ? targetPoint.y = targetPoint.y - targetRadius * Math.abs(Math.sin(deg1)) : targetPoint.y = targetPoint.y + targetRadius * Math.abs(Math.sin(deg1));

computeProjectedRadius: function(fovy, d, r, width, height) {
	var fov;
	fov = fovy / 2 * Math.PI / 180.0;
	// zoom = r / R = d / D = d / height / (2 * Math.tan(fov)) = d * 2 * Math.tan(fov) / height; 
	// so R = r / (d * 2 * Math.tan(fov) / height)
	return r / (Math.tan(fov) * d * 2 / height); // Right		
}

function instanceof(A, B) {
  const O = B.prototype;
  let A = A.__proto__ ;
  while(true) {
    if (A === null) return false; // 直到找到null
    if (A === O) return true;
    A = A.__proto__; // 顺着往上找
  }
}

function mynew (Class, options) {
  const obj = {};
  Class.call(obj, options);
  obj.__proto__ = Class.prototype;
  return obj;
}
function Person(name) {
  this.name = name;
}
Person.prototype.sayhi = function(){console.log(this.name)}
const p1 = mynew(Person, 'candy');
p1.sayhi() // candy

function Person1(name) {
  this.super(name)
  // Person.call(this, name); 或者使用call执行
}
// Object.create将Person1.prototype.__proto__指向Person.prototype，并添加constructor为Person1
Person1.prototype = Object.create(Person.prototype, {
  constructor: {
    value: Person1,
    enumerable: false,
    writable: true,
    configurable: true
  }
})
// prototype上添加super方法，用于执行一次Person
Person1.prototype.super = Person;
let person1 = new Person1('candy');
console.log(person1.name); // candy

rect.position.y =  -1;

var renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });

// a.js
console.log(444);
const privateVar = 'haha';
module.exports = {
  name: 'candy',
  sex: 1
}
// main.js
const a = require('./a.js'); // 444
console.log(a.name); // candy

// a.js
define(['./b.js'], function(b) {
  return {
    name: 'candy',
    sex: 1
  }
})
// index.html
<script>
require(['./a.js'], function(a) {
  console.log(a.name);
}); // 444 candy
</script>

// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  var b = require('./b') // 依赖可以就近书写，cmd在静态解析的时候将工厂函数toString，正则匹配到require，然后将依赖加载，在使用的时候执行
  b.doSomething()
})
// AMD
define(['./a', './b'], function(a, b) { // 依赖前置，在静态解析的时候就已经执行。
  a.doSomething()
  b.doSomething()
})

// b.js
define(function(require, exports, module) {
  console.log(888)
  exports.bdata = 2;
});

// a.js
define(function(require, exports, module) {
  const b = require('./b'); // 此处不会打印888因为没有使用b
  b.bdata; // 此处会打印888，因为使用了b的接口
  exports.adata = 1;
});

// index.html
seajs.use(['a.js'], function(my){
  var star= my.adata;
  console.log(star);  //1
});

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>  
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="./SVGLoader.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>

const width = window.innerWidth;  
const height = window.innerHeight;
const scene = new THREE.Scene();      //创建场景  
 scene.background = new THREE.Color( 0x000000 );

// 添加平视相机，比较美观 
function orthCamera(){
            camera = new THREE.OrthographicCamera(window.innerWidth/-1.5,window.innerWidth/1.5,
            window.innerHeight/1.5,window.innerHeight/-1.5,100,10000);
            camera.position.set(500,500, 800);//设置相机坐标
            camera.lookAt({x: 0, y: 0, z: 0});//让相机指向场景中心
}
orthCamera();
 // 渲染
const renderer = new THREE.WebGLRenderer({antialias : true});     //创建渲染器（并设置抗锯齿属性）  
renderer.setSize(width, height);    //设置渲染器的大小
 document.body.appendChild(renderer.domElement);     //添加渲染器的DOM元素到body中  

// 加入控制器
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = true;

function animate(time) {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
 }
animate();

const geometryLeft = new THREE.Geometry();    //创建geometry  
geometryLeft.vertices.push(new THREE.Vector3(0, 0 ,0));  //添加顶点  
 geometryLeft.vertices.push(new THREE.Vector3(19*50, 0, 0));  

const geometryLeft1 = new THREE.Geometry();    //创建geometry  
geometryLeft1.vertices.push(new THREE.Vector3(0, 0 ,0));  //添加顶点  
geometryLeft1.vertices.push(new THREE.Vector3(19*30, 0, 0)); 
          
for(let i=0;i<10;i++){  
            //var mesh = new THREE.Mesh(geometry, material);  
            const line1 = new THREE.Line(geometryLeft, new THREE.LineBasicMaterial({color:0xffffff}));     //利用geometry和material创建line  
            line1.position.z = i*60;   //设置line的位置  
            scene.add(line1);    //将line添加到场景中  
              
            const line11 = new THREE.Line(geometryLeft1, new THREE.LineBasicMaterial({color:0xffffff}));  
            line11.position.x = i*100;  
            line11.rotation.y = -Math.PI/2;    //绕y轴旋转90度  
            scene.add(line11);  
 }

const geometryBack = new THREE.Geometry();    //创建geometry  
geometryBack.vertices.push(new THREE.Vector3(0, 0 ,0));  //添加顶点  
geometryBack.vertices.push(new THREE.Vector3(0, 0, 19*30));  
const geometryBack1 = new THREE.Geometry();    //创建geometry  
geometryBack1.vertices.push(new THREE.Vector3(0, 0 ,0));  //添加顶点  
geometryBack1.vertices.push(new THREE.Vector3(0, 0, 19*20)); 
for(let i=0;i<10;i++){  
            //var mesh = new THREE.Mesh(geometry, material);  
            const line2 = new THREE.Line(geometryBack, new THREE.LineBasicMaterial({color:0xffffff}));     //利用geometry和material创建line  
            line2.position.y = i*40;   //设置line的位置  
            scene.add(line2);    //将line添加到场景中  
              
            const line22 = new THREE.Line(geometryBack1, new THREE.LineBasicMaterial({color:0xffffff}));  
            line22.position.z = i*60;  
            line22.rotation.x = -Math.PI/2;    //绕y轴旋转90度  
            scene.add(line22);  
 }

const geometryBottom = new THREE.Geometry();    //创建geometry  
geometryBottom.vertices.push(new THREE.Vector3(0, 0 ,0));  //添加顶点  
geometryBottom.vertices.push(new THREE.Vector3(19*50, 0, 0)); 
const geometryBottom1 = new THREE.Geometry();    //创建geometry  
geometryBottom1.vertices.push(new THREE.Vector3(0, 0 ,0));  //添加顶点  
geometryBottom1.vertices.push(new THREE.Vector3(19*20, 0, 0)); 
for(let i=0;i<10;i++){  
            //var mesh = new THREE.Mesh(geometry, material);  
            const line3 = new THREE.Line(geometryBottom, new THREE.LineBasicMaterial({color:0xffffff}));     //利用geometry和material创建line  
            line3.position.y = i*40;   //设置line的位置  
            scene.add(line3);    //将line添加到场景中  
              
            const line33 = new THREE.Line(geometryBottom1, new THREE.LineBasicMaterial({color:0xffffff}));  
            line33.position.x = i*100;  
            line33.rotation.z = Math.PI/2;    //绕y轴旋转90度  
            scene.add(line33);  
 }
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(100, 100, 50);
scene.add(dirLight);

const svgloader = new THREE.SVGLoader();
svgloader.load( './usasvg.svg', function ( paths ) {
            const group = new THREE.Group();
            const len = paths.length;
            for ( let i = 0; i < len; i ++ ) {
                const path = paths[ i ];
                const material = new THREE.MeshBasicMaterial( {
                    color: path.color,
                    side: THREE.DoubleSide,
                    depthWrite: false
                } );
                const shapes = path.toShapes( true );
                for ( let j = 0; j < shapes.length; j ++ ) {
                    const shape = shapes[ j ];
                    const geometry = new THREE.ShapeBufferGeometry( shape );
                    const mesh = new THREE.Mesh( geometry, material );
                    group.add( mesh );
                }
            }
            group.rotation.x = Math.PI / 2; // 将xy平面上的地图翻转到xz平面
            scene.add( group );
} );

const scaleHeight = d3.scaleLinear(); // y轴方向的比例尺
const bars = []; // 柱状体
const spheres = []; // 散点

const projection = d3.geoAlbersUsa().scale(1000);
const path = d3.geoPath().projection(projection);

queue().defer(d3.json, "./us.json").defer(d3.json, "./us-centroid.json").await(ready);
        
function ready(error, data, centroids) {
            const features = topojson.feature(data, data.objects.states).features;
            const centroidsFeatures = centroids.features;
            const len = centroidsFeatures.length;
// 在此处决定比例尺的domain
            scaleHeight.domain([0, Math.max(...centroidsFeatures.map(row => row.properties.population)) / 10000]).range([0, 360])
            renderBars();
            renderSpheres();
            
            const update = document.getElementById('update');
            update.addEventListener('click', handleUpdateClick, false);
            var curType = 'sphere';

            function renderBars() {
                for (var i = 0; i < len; i ++) {
                    var centroid = path.centroid(centroidsFeatures[i]),
                            x = centroid[0],
                            y = centroid[1];
                    var barGeometry = new THREE.BoxGeometry(20, 2, 20);
// 此处的boxGeometry生成的box的y轴会随着高度正负伸长，所以需要矩阵转换来矫正一下，使得y是其一半的数值
                    barGeometry .applyMatrix(new THREE.Matrix4().makeTranslation(0,1, y));

                    var barMaterial = new THREE.MeshPhongMaterial({
                        color: 0x00ff00
                    });
// 数值比较大，我们除以10000
                    var barHeight = Math.floor(centroidsFeatures[i].properties.population / 10000 );
                    bar = new THREE.Mesh(barGeometry , barMaterial);

                    bar.position.x = x;
                    bar.barHeight= barHeight;
                    bar.customType = 'bar';
                    bar.customValue = Math.floor(centroidsFeatures[i].properties.population);

                    scene.add(bar);
                    bars.push(bar);
                }
// 使用TweenMax动画库实现动画
                for (var i = 0; i < bars.length; i++) {
                    var tween = new TweenMax.to(bars[i].scale, 1, {
                        ease: Elastic.easeOut.config(1, 1),
                        y: scaleHeight(bars[i].cubeHeight / 2)
                    });
                }
            }
            function renderSpheres() {
                for (var i = 0; i < len; i ++) {
                    var centroid = path.centroid(centroidsFeatures[i]),
                            x = centroid[0],
                            y = centroid[1];
                    var sphereGeometry = new THREE.SphereGeometry(5);
                    sphereGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,1, y));

                    var sphereMaterial = new THREE.MeshBasicMaterial({
                        color: 0x00ff00
                    });

                    var sphereHeight = Math.floor(centroidsFeatures[i].properties.population / 10000 );
                    sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

                    sphere.position.x = x;
                    sphere.sphereHeight= sphereHeight;
                    sphere.customType = 'sphere';
                    sphere.customValue = Math.floor(centroidsFeatures[i].properties.population);
                    sphere.visible = false;

                    scene.add(sphere);
                    spheres.push(sphere);
                }
                for (var i = 0; i < spheres.length; i++) {
                    new TweenMax.to(spheres[i].position, 1, {
                        ease: Elastic.easeOut.config(1, 1),
                        y: scaleHeight(spheres[i].sphereHeight)
                    });
                }
            }
            function showSpheres(i) {
                curType = 'sphere';
                new TweenMax.to(bars[i].scale, 1, {
                    ease: Elastic.easeOut.config(1, 1),
                    y: 1
                });
                cubes[i].visible = false;
                spheres[i].visible = true;
                new TweenMax.to(spheres[i].position, 1, {
                    ease: Elastic.easeOut.config(1, 1),
                    y: scaleHeight(spheres[i].barHeight)
                });
            }
            function showBars(i) {
                curType = 'bar';
                new TweenMax.to(spheres[i].position, 1, {
                    ease: Elastic.easeOut.config(1, 1),
                    y: 1
                });
                spheres[i].visible = false;
                cubes[i].visible = true;
                new TweenMax.to(bars[i].scale, 1, {
                    ease: Elastic.easeOut.config(1, 1),
                    y: scaleHeight(bars[i].barHeight/ 2)
                });
            }
            handleUpdateClick();
            function handleUpdateClick() {
                if (curType === 'bar') {
                    for (var i = 0; i < cubes.length; i++) {
                        showSpheres(i);
                        // var tween = new TweenMax.to(bars[i].scale, 1, {
                        //     // ease: Elastic.easeOut.config(1, 1),
                        //     y: 1,
                        //     onComplete: showSpheres,
                        //     onCompleteParams:[i]
                        // });
                    }
                } else {
                    for (var i = 0; i < spheres.length; i++) {
                        showBars(i)
                        // var tween1 = new TweenMax.to(spheres[i].position, 1, {
                        //     // ease: Elastic.easeOut.config(1, 1),
                        //     y: 0,
                        //     onComplete: showBars,
                        //     onCompleteParams:[i]
                        // });
                    }
                }
            }
        }

function createText() {
            const textLoader = new THREE.FontLoader();
            textLoader.load(
                'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',
                function (font) {
                    // left top text
                    const options = {
                        size: 18,
                        height: 0,
                        font, // “引用js字体必须换成英文”
                        bevelThickness: 1,
                        bevelSize: 1,
                        bevelSegments: 1,
                        curveSegments: 50,
                        steps: 1
                    }
                    function createText(positions, n = 10) {
                        for(let i=0;i<n;i++){
                            // 使用TextBufferGeometry比TextGeometry快
                            const textLeftTop = new THREE.TextBufferGeometry(positions.text ? positions.text(i) : JSON.stringify(i * positions.n), options);
                            const textMeshLeftTop = new THREE.Mesh(textLeftTop, new THREE.MeshBasicMaterial());
                            textMeshLeftTop.position.x = typeof positions.x === 'function' ? positions.x(i) : positions.x;
                            textMeshLeftTop.position.y = typeof positions.y === 'function' ? positions.y(i) : positions.y;
                            textMeshLeftTop.position.z = typeof positions.z === 'function' ? positions.z(i) : positions.z;
                            textGroup.push(textMeshLeftTop);
                            scene.add(textMeshLeftTop);
                        }
                    }
                    createText({
                        n: 60,
                        x: 0,
                        y: 400,
                        z: function(i) {
                            return i * 60
                        }
                    });
                    createText({
                        text: function(i) {
                            return JSON.stringify(Math.floor(scaleHeight.invert(i * 40) * 1000));
                        },
                        n: 40,
                        x: 0,
                        y: function(i) {
                            return i * 40
                        },
                        z: 600
                    });
                    createText({
                        n: 100,
                        x: function(i) {
                            return i * 100
                        },
                        y: 0,
                        z: 600
                    });
                    createText({
                        n: 100,
                        x: function(i) {
                            return i * 100
                        },
                        y: 400,
                        z: 0
                    });
                    createText({
                        text: function(i) {
                            return JSON.stringify(Math.floor(scaleHeight.invert(i * 40) * 1000));
                        },
                        n: 40,
                        x: 1000,
                        y: function(i) {
                            return i * 40
                        },
                        z: 0
                    });
                    createText({
                        n: 60,
                        x: 1000,
                        y: 0,
                        z: function(i) {
                            return i * 60
                        }
                    });
                }
            );
        }

createText的调用需要放到计算出scaleHeight的domain的时候调用，但是放那里调用会使得图形渲染产生卡顿，暂时还没想到好的办法。

createText();

(function(modules){
  function webpack_require(moduleId) {
    // 缓存模块
    const installedModule = {};
    if (installedModule[moduleId]) {
      return installedModule[moduleId].exports;
    }
   // 新建模块
    const module = {
      id: moduleId,
      exports: {} 
    }
    // 调用模块函数，执行里面的源码，将到处对象挂载到新建模块的exports上面，内部依赖递归调用 
    // webpack_require函数
    modules[moduleId].call(module.exports, module, module.exports, webpack_require);
    // 加入缓存
    installedModule[moduleId] = module;
    // 返回导出对象
    return module.exports;
  }
  return webpack_require(0); // 执行入口文件，modules数组的第一个元素
})([function(module, exports, webpack_require) {
  // 0 app.js入口文件
  console.log(333)
  const moduleA = webpack_require(1); // 执行依赖文件，modules数组的第二个元素
  const b = moduleA.a * 2;
  console.log(b);
}, function(module, exports, webpack_require) {
  // 1 a.js
  let a = 1;
  function aa() {
    console.log(111)
  };
  module.exports = {
    a,
    aa
  }
}])

function(module, exports, webpack_require) {
   // 模块代码
}

const gjfunc = (func) => () => func(); // 定义一个高阶函数
const usegjfunc = gjfunc(() => {console.log(111)}) 调用高阶函数返回一个函数
usegjfunc(); // 使用这个函数

const curry = (func, args) => {
  let len = func.length;
  args = args || [];
  return (...arg) => {
    args.push(...arg);
    if (args.length == len) {
      return func( ...args);
    } else {
      return curry(func,args);
    }
  }
}
curry((a, b) => a + b)(1)(2); // 3
const func1 = curry((a, b) => a + b); // 返回一个函数
const func2 = func1(1); // 返回一个函数
const func3 = func2(2); // 返回一个结果

import React, { PureComponent } from 'react';

const WrapperFunc =  (WrappedComp) => 
  class WrapperFunc extends PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      }
    }
    render() {
      return (
        <WrappedComp data = {this.state} {...this.props} />
      )}
  }

class wrappedComp extends PureComponent {
  render() {
    return(
      <div>
        {this.props.data.count}
      </div>
    )}
}
export const WrapperComp = WrapperFunc(wrappedComp);

import React, { Component, PureComponent } from 'react';

const WrapperFunc = (count) => (WrappedComp) => 
  class WrapperFunc extends PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        count
      }
    }
    render() {
      return (
        <WrappedComp data = {this.state} {...this.props} />
      )}
  }

class wrappedComp extends PureComponent {
  render() {
    return(
      <div>
        {this.props.data.count}
      </div>
    )}
}
export const WrapperComp = WrapperFunc(1)(wrappedComp);
export const WrapperComp1 = WrapperFunc(2)(wrappedComp);

<Provider store={store}>
  <App />
</Provider>

// app.js
class App extend PureComponent {
  // ...
]
export default connect(mapStateToProp,mapDispatchToProp)(App);
// 其中mapStateToProp,mapDispatchToProp两个函数分别实现了蒋store里面的state和dispatch转换成组件props里面的属性。

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Provider extends Component {
  getChildContext() {
    return {
      store: this.props.store
    };
  }
  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: PropTypes.object
}

import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';

export default function connect(mapStateToProp, mapDispatchToProp) {
  return function(Comp) {
    class WrapperFunc extends PureComponent {
      constructor(props) {
        super(props);
        this.state = {}
      }
      componentDidMount() {
        this.setState({
          ...this.state,
          ...mapStateToProp(this.context.store.getState()),
          ...mapDispatchToProp(this.context.store.dispatch)
        })
      }
      render() {
        return (
          <Comp {...this.state}/>
        )
      }
    }
    WrapperFunc.contextTypes = {
      store: PropTypes.object
    }
    return WrapperFunc;
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import Provider from './provider';
import { createStore } from 'redux';
import App from './App';
import testStore from './testStore';

if (process.env.NOED_ENV !== 'production') {
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}
const store = createStore(testStore);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

import connect from './connect';

class App extends PureComponent {
  render() {
    return (
      <div>
        {this.props.connectCount}
      </div>
    );
  }
}
export default connect((state) =>({ connectCount: state.count }), (dispatch) => console.log(333, dispatch))(App);

// asyncCmponent.js
import React, { Component } from 'react';

export default function asyncComponent (importFunc) {
  return class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null
      }
    };
    componentDidMount = () => {
      importFunc().then(mod => {
        this.setState({
          component: mod.default || mod
        })
      });
    }
    render = () => {
      const C = this.state.component;
      return (
        C ? <C {...this.props} /> : null
      )
    }
  }
}

import asyncCmponent from './asyncCmponent.js';

const App = asyncCmponent(() => require.ensure([], (require) => require('./App')));
ReactDOM.render(
  <Provider store={store}>
      <App />
   </Provider>, 
   document.getElementById('root')
);

// 只需修改componentDidMount部分
componentDidMount = () => {
      importFunc().then(mod => {
        this.setState({
          component: mod.default || mod
        })
      })
    }

const App = asyncCmponent(() => import('./App')));

// auth.js
var req = require('request');

/* 微信登陆 */
var AppID = 'xxx';
var AppSecret = 'xxxxxx';

module.exports = [{
  method: 'GET',
  path: '/wx_login',
  handler: async (request, h) => {
    // 第一步：用户同意授权，获取code
    var router = 'get_wx_access_token';
    // 这是编码后的地址
    var return_uri = 'http%3A%2F%2Fwww.test.com%2F'+router;  
    var scope = 'snsapi_userinfo';
    // 授权页，回调地址get_wx_access_token
    return h.redirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+AppID+'&redirect_uri='+return_uri+'&response_type=code&scope='+scope+'&state=STATE#wechat_redirect');
  }
}, {
  method: 'GET',
  path: '/get_wx_access_token',
  handler: async (request, h) => {
    // 第二步：通过code换取网页授权access_token
    var code = request.query.code;
    req.get(
        {   
            url:'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+AppID+'&secret='+AppSecret+'&code='+code+'&grant_type=authorization_code',
        },
        function(error, response, body){
            if(response.statusCode == 200){
                // 第三步：拉取用户信息(需scope为 snsapi_userinfo)
                var data = JSON.parse(body);
                var access_token = data.access_token;
                var openid = data.openid;
                req.get(
                    {
                        url:'https://api.weixin.qq.com/sns/userinfo?access_token='+access_token+'&openid='+openid+'&lang=zh_CN',
                    },
                    function(error, response, body){
                        if(response.statusCode == 200){
                            // 第四步：根据获取的用户信息进行对应操作
                            var userinfo = JSON.parse(body);
                            // 可以由此创建一个帐户
                            h.response(userinfo.nickname)
                        }else{
                            console.log(response.statusCode);
                        }
                    }
                );
            }else{
                console.log(response.statusCode);
            }
        }
    );
  }
}];

new Promise((res, rej) => {
  console.log(111); // 这里的打印正是在当前栈同步执行了这个回调函数。
  setTimeout(() => console.log(222), 2000);
})
console.log(333)
会打印出
// 111 333 2秒后打印222

function MyPromise(fn) {
  const callbacks = []; // 存储then注册的回调函数
  let value = null; // 当前最新resolve的值
  this.then = function(callback) {
    callbacks.push(callback); // 注册回调
    return this; // 返回promise，用于链式
  }
  function resolve(newValue) {
    value = newValue;
    callbacks.forEach(function (callback) {
      callback(value); // 依次执行回调
    })
  }
  fn(resolve);
}

const p1 = new MyPromise(resolve => setTimeout(() => resolve(111), 1000)).then(data => console.log(data)); // 一秒后打印111

// 改造resolve
function resolve(newValue) {
    value = newValue;
    setTimeout(() => {
      callbacks.forEach(function (callback) {
        callback(value);
      })
    }, 0);
  }

const p2 = new MyPromise(resolve => resolve(111)).then(data => console.log(data)); // 立即打印111
setTimeout(() => p2.then(data => console.log(data)), 0) // 打印不出data，是因为resolve已经结束了，在异步操作成功之前注册的回调都会执行，但是在Promise异步操作成功这之后调用的then注册的回调就再也不会执行了

function MyPromise(fn) {
  const callbacks = [];
  let value = null;
  let state = 'pending';
  this.then = function(callback) {
    if (state === 'pending') {
      callbacks.push(callback);
    } else if (state === 'fulfilled') {
      callback(value);
    }
    return this;
  }
  function resolve(newValue) {
    state = 'fulfilled';
    value = newValue;
    setTimeout(() => {
      callbacks.forEach(function (callback) {
        callback(value);
      })
    }, 0);
  }
  fn(resolve);
}
// 都测试一下
const p1 = new MyPromise(resolve => setTimeout(() => resolve(111), 1000)).then(data => console.log(data));
setTimeout(() => p1.then(data => console.log(data)), 0) // 1秒后正常打印出111 111

const p2 = new MyPromise(resolve => resolve(111)).then(data => console.log(data));
setTimeout(() => p2.then(data => console.log(data)), 0) // 正常打印出111 111