module.exports = [
  {
    url: "/demands/list",
    view: "list",
    models: ["list"]
  },
  {
    url: "/demands/detail",
    view: "detail"
  }
];

export async function fetch(params) {
  return request("/api/demand/list", {
    method: "POST",
    data: {
      ...params
    }
  });
}

import * as demandService from "../services/list";
import { PAGE_SIZE } from "../constants";

export default {
  namespace: "demands",
  state: {
    list: [],
    pageNo: 1
  },
  reducers: {
    save(state,{payload: { data: list, pageNo }}) {
      return { ...state, list, pageNo };
    }
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      const { result } = yield call(demandService.fetch, payload);
      const { data } = result;
      yield put({
        type: "save",
        payload: { data, pageNo: payload.pageNo }
      });
    }
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname }) => {
        if (pathname === "/demands/list") {
          dispatch({
            type: "fetch",
            payload: { pageSize: PAGE_SIZE, pageNo: 1 }
          });
        }
      });
    }
  }
};

import React from "react";
import "../index.less";

function Demands() {
  return <div className="demands">需求列表</div>;
}

export default Demands;

+ loading: state.loading.models.users,

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

        {/* ...but how do we render something other than a <p>?
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p> */}

        {/*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

import React, { Component } from 'react'

export default (WrappedComponent) => {
  class NewComponent extends Component {
    // 可以做很多自定义逻辑
    render () {
      return <WrappedComponent />
    }
  }
  return NewComponent
}

import React, { Component } from 'react'

export default (WrappedComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    render () {
      return <WrappedComponent data={this.state.data} />
    }
  }
  return NewComponent

import wrapWithLoadData from './wrapWithLoadData'

class InputWithUserName extends Component {
  render () {
    return <input value={this.props.data} />
  }
}

InputWithUserName = wrapWithLoadData(InputWithUserName, 'username')
export default InputWithUserName

function debounce(fn, wait) {
  var timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, wait);
  };
}

function debounce(func, wait) {
  var timeout;

  return function() {
    var context = this;

    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context);
    }, wait);
  };
}

function debounce(func, wait) {
  var timeout;
  return function() {
    var context = this;
    var args = arguments;

    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

function debounce(func, wait, leading) {
  var timeout;

  return function() {
    var context = this;
    var args = arguments;

    if (timeout) clearTimeout(timeout);
    if (leading) {
      // 如果已经执行过，不再执行
      var callNow = !timeout;
      timeout = setTimeout(function() {
        timeout = null;
      }, wait);
      if (callNow) func.apply(context, args);
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args);
      }, wait);
    }
  };
}

function debounce(func, wait, options) {
  let lastArgs, lastThis, maxWait, result, timerId, lastCallTime;

  // 参数初始化
  let lastInvokeTime = 0; // func 上一次执行的时间
  let leading = false;
  let maxing = false;
  let trailing = true;

  // 基本的类型判断和处理
  if (typeof func != "function") {
    throw new TypeError("Expected a function");
  }
  wait = +wait || 0;
  if (isObject(options)) {
    // 对配置的一些初始化
  }

  function invokeFunc(time) {
    const args = lastArgs;
    const thisArg = lastThis;

    lastArgs = lastThis = undefined;
    lastInvokeTime = time;
    result = func.apply(thisArg, args);
    return result;
  }

  function leadingEdge(time) {
    // Reset any `maxWait` timer.
    lastInvokeTime = time;
    // 为 trailing edge 触发函数调用设定定时器
    timerId = setTimeout(timerExpired, wait);
    // leading = true 执行函数
    return leading ? invokeFunc(time) : result;
  }

  function remainingWait(time) {
    const timeSinceLastCall = time - lastCallTime; // 距离上次debounced函数被调用的时间
    const timeSinceLastInvoke = time - lastInvokeTime; // 距离上次函数被执行的时间
    const timeWaiting = wait - timeSinceLastCall; // 用 wait 减去 timeSinceLastCall 计算出下一次trailing的位置

    // 两种情况
    // 有maxing:比较出下一次maxing和下一次trailing的最小值，作为下一次函数要执行的时间
    // 无maxing：在下一次trailing时执行 timerExpired
    return maxing
      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
      : timeWaiting;
  }

  // 根据时间判断 func 能否被执行
  function shouldInvoke(time) {
    const timeSinceLastCall = time - lastCallTime;
    const timeSinceLastInvoke = time - lastInvokeTime;

    // 几种满足条件的情况
    return (
      lastCallTime === undefined || //首次
      timeSinceLastCall >= wait || // 距离上次被调用已经超过 wait
      timeSinceLastCall < 0 || //系统时间倒退
      (maxing && timeSinceLastInvoke >= maxWait)
    ); //超过最大等待时间
  }

  function timerExpired() {
    const time = Date.now();
    // 在 trailing edge 且时间符合条件时，调用 trailingEdge函数，否则重启定时器
    if (shouldInvoke(time)) {
      return trailingEdge(time);
    }
    // 重启定时器，保证下一次时延的末尾触发
    timerId = setTimeout(timerExpired, remainingWait(time));
  }

  function trailingEdge(time) {
    timerId = undefined;

    // 有lastArgs才执行，意味着只有 func 已经被 debounced 过一次以后才会在 trailing edge 执行
    if (trailing && lastArgs) {
      return invokeFunc(time);
    }
    // 每次 trailingEdge 都会清除 lastArgs 和 lastThis，目的是避免最后一次函数被执行了两次
    // 举个例子：最后一次函数执行的时候，可能恰巧是前一次的 trailing edge，函数被调用，而这个函数又需要在自己时延的 trailing edge 触发，导致触发多次
    lastArgs = lastThis = undefined;
    return result;
  }

  function cancel() {}

  function flush() {}

  function pending() {}

  function debounced(...args) {
    const time = Date.now();
    const isInvoking = shouldInvoke(time); //是否满足时间条件

    lastArgs = args;
    lastThis = this;
    lastCallTime = time; //函数被调用的时间

    if (isInvoking) {
      if (timerId === undefined) {
        // 无timerId的情况有两种：1.首次调用 2.trailingEdge执行过函数
        return leadingEdge(lastCallTime);
      }
      if (maxing) {
        // Handle invocations in a tight loop.
        timerId = setTimeout(timerExpired, wait);
        return invokeFunc(lastCallTime);
      }
    }
    // 负责一种case：trailing 为 true 的情况下，在前一个 wait 的 trailingEdge 已经执行了函数；
    // 而这次函数被调用时 shouldInvoke 不满足条件，因此要设置定时器，在本次的 trailingEdge 保证函数被执行
    if (timerId === undefined) {
      timerId = setTimeout(timerExpired, wait);
    }
    return result;
  }
  debounced.cancel = cancel;
  debounced.flush = flush;
  debounced.pending = pending;
  return debounced;
}

function debounce(fn, wait) {
  var timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, wait);
  };
}

function log() {
  console.log(1);
}

window.onscroll = debounce(log, 1000);

function throttle(fn, wait, maxwait) {
  var timer = null;
  var previous = null; //记录上一次运行时间
  return function() {
    var now = +new Date();
    previous = previous || now;
    if (now - previous > maxwait) {
      clearTimeout(timer);
      fn();
      previous = now;
    } else {
      clearTimeout(timer);
      timer = setTimeout(fn, wait);
    }
  };
}

function log() {
  console.log(2);
}
window.onscroll = throttle(log, 500, 2000);

server {
    listen       80;
    # 配置可访问域名，注意需要添加相应host配置
    server_name xxx.dev;
    #charset koi8-r;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    location /api/v1 {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Real-IP $remote_addr;
        # API Server
        proxy_pass http://localhost:4000;
        proxy_next_upstream error;
    }

}

var express = require("express");
var httpProxy = require("http-proxy");

var options = {
  target: "http://jsonplaceholder.typicode.com/users",
  changeOrigin: true
};
var httpProxyServer = httpProxy.createProxyServer(options);

function jsonHttpProxy(req, res) {
  httpProxyServer.web(req, res);
}
var app = express();
app.use("/users", jsonHttpProxy);
app.listen(3002);

var express = require("express");
var proxy = require("http-proxy-middleware");

var app = express();

app.use(
  "/api",
  proxy({
    target: "http://www.example.org",
    changeOrigin: true
  })
);
app.listen(3000);