var gulp = require('gulp');
var minimist = require('minimist');

// //文件合并
// var concat = require('gulp-concat');
// //文件重命名
// var rename = require('gulp-rename');
// //代码混淆
// var uglify = require('gulp-uglify');
// //代码映射
// var source_map = require('gulp-sourcemaps');
// //css压缩
// var minify_css = require('gulp-clean-css');
// //静态文件MD5后缀
// var rev = require('gulp-rev');
// //文件替换
// var rev_collector = require('gulp-rev-collector');
//本地开发环境
// var connect = require('gulp-connect');
// var watch = require('gulp-watch');

//使用gulp-load-plugins自动命名gulp的相关包，通过package.json映射，驼峰命名
var $ = require('gulp-load-plugins')();

// 代理到远程服务器
var proxy = require('http-proxy-middleware');
// 文件操作
var fs = require('fs');
// 自动打开浏览器
var open = require('open');
//删除文件
var del = require('del');



// 导入配置文件
var cfg = require('./build/gulp_config.json');
var JS = cfg.js;
var CSS = cfg.css;
var HTML = cfg.html;
var REV = cfg.rev;
var js_css_src = [].concat(JS.src, CSS.src);

//默认任务开始入口
gulp.task('default', ['clean'], function() {
    //首先清空dist文件夹，再依次执行任务
    gulp.start('pack-js','pack-css');
});

//清空已有输出
gulp.task('clean', function() {
    return del(['dist/']);
});

//js文件合并压缩
gulp.task('pack-js', function() {
    return gulp.src(JS.src)               //需要合并的js文件
    .pipe($.sourcemaps.init())                //初始化sourcemap
    .pipe($.concat(JS.concat.main))               //合并js文件并命名
    .pipe(gulp.dest(JS.dest))          //将文件写入文件夹
    .pipe($.rename(JS.concat_min.main))           //设置混淆后的文件名
    .pipe($.uglify())                         //代码混淆
    .pipe($.sourcemaps.write('./maps/'))           //输出sourcemap
    .pipe(gulp.dest(JS.dest));         //输出最终的结果
});

//css文件合并压缩并增加md5后缀
gulp.task('pack-css', function() {
    return gulp.src(CSS.src)
        .pipe($.sourcemaps.init())
        .pipe($.concat(CSS.concat.main))
        .pipe($.cleanCss())                 //css代码压缩
        .pipe($.sourcemaps.write('./maps/')) 
        .pipe(gulp.dest(CSS.dest))
        .pipe($.rename(CSS.concat_min.main))
        .pipe($.rev())                        //增加md5后缀
        .pipe(gulp.dest(CSS.dest))
        .pipe($.rev.manifest())               //输出映射表用户替换增加md5后缀文件的引用
        .pipe(gulp.dest(REV.dest));
});

//md5后缀替换
gulp.task('rev', function() {
    return gulp.src([REV.src, HTML.index])    //设置映射表位置，以及需要进行路径名替换的文件
    .pipe(rev_collector())                  //替换
    .pipe(gulp.dest(REV.destH));        //输出
});

var devCfg = require('./build/dev_config.json');
var devLocal = devCfg.local;
var devProxy = devCfg.proxy;
var knownOptions = {
    string: 'host',
    default: { host: ''}//不设置时host默认指为true
};
var optionCL = minimist(process.argv.slice(2), knownOptions);

var proxyHost = optionCL.host || devProxy.host;
var PROXY_TARGET = (devCfg.https ? "https://" : "http://") 
                        + proxyHost + ":" + devProxy.port + devProxy.uri;

//本地服务
gulp.task('webserver', function() {
    $.connect.server({
        port: devLocal.port,
        root: devLocal.root,
        livereload: true,
        // nodev8.8以上版本无法自动开启https[https://github.com/AveVlad/gulp-connect/issues/236]
        https: false,
        // 为true时将采用默认配置
        // https:{
        //     key: fs.readFileSync(devLocal.key),
        //     cert: fs.readFileSync(devLocal.cert)
        // },
        fallback: devLocal.index,   //index重定向
        middleware: function(connect, opt) {
            return [
                proxy(devProxy.uri,  {
                    target: PROXY_TARGET,
                    changeOrigin:true
                }),
                // 可以代理到多个远程服务器
                proxy('/otherServer', {
                    target: 'https://IP:Port',
                    changeOrigin:true
                })
            ]
        }
    });
    // open('http' + devLocal.host + devLocal.port);
});

//将对处理后的文件的watch提出，使得各个任务更加纯粹
gulp.task('livereload', function() {
    gulp.src(js_css_src)
      .pipe($.watch(js_css_src))
      .pipe($.connect.reload());
});

//使用gulp-watch实现只重新编译被更改过的文件
gulp.task('watch', ['webserver', 'livereload'], function() {
    $.watch(JS.src, function() {
        gulp.start('pack-js');
    });
    $.watch(CSS.src, function() {
        gulp.start('pack-css');
    });
    //html文件不做任何处理直接重载
    $.watch(HTML.src).pipe($.connect.reload());
});

//雪碧图生成
gulp.task('sprite', function () {
    var spriteData = gulp.src('./src/imgs/*').pipe($.spritesmith({
      imgName: 'sprite.png',
      cssName: 'sprite.css'
    }));
    return spriteData.pipe(gulp.dest('./dist/sprite/'));
});

//gulp-imagemin未能成功启用
//gulp-imagemin: Couldn't load default plugin "optipng"
// gulp.task('pack-img', function() {
//     return gulp.src('./src/imgs/*')
//         .pipe(imagemin())
//         .pipe(gulp.dest('./dist/images/'));
// });

// Others
//gulp-autoprefixe   css自动加浏览器前缀
//gulp-base64 将图片转为base64，无请求，但会增大css文件大小
//postcss  引入css处理的各种工具
//lazypipe 创建流的工程方法，便于重用

{
    "local": {
        "port": "3000",
        "key": "",
        "cert": "",
        "index": "./src/html/index.html",
        "root": ["./"],
        "host": "://localhost:"
    },
    "proxy": {
        "uri": "/api",
        "host": "3.121.1.111",
        "port": "1884"
    },
    "https": true    
}

const diff = require('jest-diff');
expect.extend({
  toBe(received, expected) {
    const pass = Object.is(received, expected);

    const message = pass
      ? () =>
          this.utils.matcherHint('.not.toBe') +
          '\n\n' +
          `Expected value to not be (using Object.is):\n` +
          `  ${this.utils.printExpected(expected)}\n` +
          `Received:\n` +
          `  ${this.utils.printReceived(received)}`
      : () => {
          const diffString = diff(expected, received, {
            expand: this.expand,
          });
          return (
            this.utils.matcherHint('.toBe') +
            '\n\n' +
            `Expected value to be (using Object.is):\n` +
            `  ${this.utils.printExpected(expected)}\n` +
            `Received:\n` +
            `  ${this.utils.printReceived(received)}` +
            (diffString ? `\n\nDifference:\n\n${diffString}` : '')
          );
        };

    return {actual: received, message, pass};
  },
});

test('resolves to lemon', () => {
  // make sure to add a return statement
  return expect(Promise.resolve('lemon')).resolves.toBe('lemon');
});

test('resolves to lemon', async () => {
  await expect(Promise.resolve('lemon')).resolves.toBe('lemon');
  await expect(Promise.resolve('lemon')).resolves.not.toBe('octopus');
});

test('rejects to octopus', () => {
  // make sure to add a return statement
  return expect(Promise.reject(new Error('octopus'))).rejects.toThrow(
    'octopus',
  );
});

test('rejects to octopus', async () => {
  await expect(Promise.reject(new Error('octopus'))).rejects.toThrow('octopus');
});

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    // 必须有
    done();
  }

  fetchData(callback);
});

test('the data is peanut butter', () => {
  expect.assertions(1);
  // 不可忽略return，否则测试会在fetchData之前完成
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

test('the fetch fails with an error', () => {
  expect.assertions(1);
  return fetchData().catch(e => expect(e).toMatch('error'));
});

test('the data is peanut butter', () => {
  expect.assertions(1);
  return expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', () => {
  expect.assertions(1);
  return expect(fetchData()).rejects.toMatch('error');
});

test('the data is peanut butter', async () => {
  expect.assertions(1);
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

test('the data is peanut butter', async () => {
  expect.assertions(1);
  await expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  await expect(fetchData()).rejects.toMatch('error');
});

beforeEach(() => {
  initializeCityDatabase();
});

afterEach(() => {
  clearCityDatabase();
});

beforeEach(() => {
  // return a promise   
  return initializeCityDatabase();
});

beforeAll(() => {
  return initializeCityDatabase();
});

afterAll(() => {
  return clearCityDatabase();
});

// 也可以将一次性的建立限制到作用域内，调用顺序符合作用域嵌套规则
describe('matching cities to foods', () => {
  // Applies only to tests in this describe block
  beforeEach(() => {
    return initializeFoodDatabase();
  });

  test('Vienna <3 sausage', () => {
    expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);
  });

  test('San Juan <3 plantains', () => {
    expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
  });
});

function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
    callback(items[index]);
  }
}

const mockCallback = jest.fn();
forEach([0, 1], mockCallback);

// The mock function is called twice
expect(mockCallback.mock.calls.length).toBe(2);

// The first argument of the first call to the function was 0
expect(mockCallback.mock.calls[0][0]).toBe(0);

// The first argument of the second call to the function was 1
expect(mockCallback.mock.calls[1][0]).toBe(1);

const filterTestFn = jest.fn();

// Make the mock return `true` for the first call,
// and `false` for the second call
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(filterTestFn);

console.log(result);
// > [11]
console.log(filterTestFn.mock.calls);
// > [ [11], [12] ]

import PropTypes from 'prop-types';
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// PropTypes 包含所有的基本类型
Greeting.propTypes = {
  name: PropTypes.string
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  
  // 可以被渲染的任何元素
  optionalNode: PropTypes.node,
  // React 元素
  optionalElement: PropTypes.element,
  
  optionalMessage: PropTypes.instanceOf(Message),
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  
  // 对象，数组内部的元素类型都可以设置
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  
  // 通过 isRequired 属性设置必传项
  requiredFunc: PropTypes.func.isRequired,
  
  // 你甚至可以在这里直接设置参数校验
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
  
  // PropTypes.element设置只允许一个子元素
  children: PropTypes.element.isRequired,
  
  // 设置默认值
  Greeting.defaultProps = {
    name: 'Stranger'
  };
};

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focusTextInput();
  }

// this.textInput 即为对应 DOM 元素
// 元素的元素和用 class 创建的 React 元素可用
// 函数组件不可用，因为他们没有实例
  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />

    );
  }
}

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

function Parent(props) {
  return (
    <div>
      My input: <CustomTextInput inputRef={props.inputRef} />
    </div>
  );
}

// 通过 this.inputElement 就可以获得相关元素
class Grandparent extends React.Component {
  render() {
    return (
      <Parent
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

// 在这种情况下，通过 defaultValue，defaultChecked来设置初始值
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input 
            type="text" 
            defaultValue="Bob"
            ref={(input) => this.input = input} 
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

render() {
// 过滤掉与高阶函数功能相关的props属性，
// 不再传递
const { extraProp, ...passThroughProps } = this.props;

// 向包裹组件注入props属性，一般都是高阶组件的state状态
// 或实例方法
const injectedProp = someStateOrInstanceMethod;

// 向包裹组件传递props属性
return (
  <WrappedComponent
    injectedProp={injectedProp}
    {...passThroughProps}
  />
);
}

const ConnectedComment = connect(commentSelector, commentActions)(Comment);

-->

// connect是一个返回函数的函数（译者注：就是个高阶函数）
const enhance = connect(commentListSelector, commentListActions);
// 返回的函数就是一个高阶组件，该高阶组件返回一个与Redux store
// 关联起来的新组件
const ConnectedComment = enhance(CommentList);

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}

// hnrs会自动拷贝所有非React的静态方法
import hoistNonReactStatic from 'hoist-non-react-statics';
function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  hoistNonReactStatic(Enhance, WrappedComponent);
  return Enhance;
}

// 高级组件就是一个函数，你可以传入任意数量的参数
const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
});

// 函数接受一个组件参数……
function withSubscription(WrappedComponent, selectData) {
  // ……返回另一个新组件……
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ……注意订阅数据……
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ……使用最新的数据渲染组件
      // 注意此处将已有的props属性传递给原组件
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

// 客户端
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;

//服务器端
Access-Control-Allow-Credentials: true
兼容低版本浏览器
利用IE通过XDomainRequest实现跨域：

function createCORSRequest(method, url) {
 let xhr = new XMLHttpRequest();
 if ("withCredentials" in xhr) {
 xhr.open(method, url, true);
 } else if (typeof XDomainRequest !== "undefined") {
 xhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 xhr = null;
 }
 return xhr;
}

var request = createCORSRequest("get", "http://www.somewhere-else.com/page/");
if (request){
 request.onload = function(){
 //对 request.responseText 进行处理
 };
request.send();
}
<!-- 
 abort() ：用于停止正在进行的请求。
 onerror ：用于替代 onreadystatechange 检测错误。
 onload ：用于替代 onreadystatechange 检测成功。
 responseText ：用于取得响应内容。
 send() ：用于发送请求。 -->

//客户端实现
function handleResponse(response){
 alert("You’re at IP address " + response.ip + ", which is in " +
 response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://gaococ.com/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
//服务器端
走服务器端的json方法，将其返回值传入handleResponse

var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A secret", "http://www.wrox.com");

EventUtil.addHandler(window, "message", function(event){
 //确保发送消息的域是已知的域
 if (event.origin == "http://www.wrox.com"){
 //处理接收到的数据
 processMessage(event.data);
 //可选:向来源窗口发送回执
 event.source.postMessage("Received!", "http://p2p.wrox.com");
 }
});

const socket = new WebSocket("ws://www.gaococ.com/server.php");
//同源策略不适用于websocket，必须使用绝对地址

有readyState属性来表示当前状态：
 WebSocket.OPENING (0)：正在建立连接。
 WebSocket.OPEN (1)：已经建立连接。
 WebSocket.CLOSING (2)：正在关闭连接。
 WebSocket.CLOSE (3)：已经关闭连接。

//发送数据
socket.send()//依然只能发送纯字符串数据，JSON需要Stringify。
//关闭连接
socket.close()
//接收数据
socket.onmessage = function(event){
 var data = event.data;
 //处理数据
};
//必须使用DOM0级事件
//onopen 事件，在建立连接时触发
//onerror 事件，发生错误时触发
//onclose 事件，连接关闭时触发
一个典型的WebSocket握手
//客户端
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket 
Connection: Upgrade //请求将协议升级为WebSocket协议
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== //浏览器生产，验证
Sec-WebSocket-Protocol: chat, superchat //用户定义的字符串，区分同URL下不同服务需要的协议
Sec-WebSocket-Version: 13
Origin: http://example.com

//服务器
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade //协议切换成功
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

app.get('/', handleIndex)
app.get('/invoices', handleInvoices)
app.get('/invoices/:id', handleInvoice)
app.get('/invoices/:id/edit', handleInvoiceEdit)

app.listen()

const appRoutes: Routes = [
  { path: 'crisis-center',
    component: CrisisListComponent
  },
  { path: 'hero/:id',
    component: HeroDetailComponent
  },
  { path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**',
    component: PageNotFoundComponent
  }
];
// 靠一个全局量挂载所有路由信息，然后给每个路由分别绑定回调(组件)

// 基本用法
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), el)

const App = () => (
  <div>
    <nav>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
    <div>
      <Route path="/dashboard" component={Dashboard}/>
    </div>
  )

// 嵌套路由
const App = () => (
  <BrowserRouter>
    {/* here's a div */}
    <div>
      {/* here's a Route */}
      <Route path="/tacos" component={Tacos}/>
    </div>
  </BrowserRouter>
)

// when the url matches `/tacos` this component renders
const Tacos  = ({ match }) => (
  // here's a nested div
  <div>
    {/* here's a nested Route,
        match.url helps us make a relative path */}
    <Route
      path={match.url + '/carnitas'}
      component={Carnitas}
    />
  </div>
)

<li><Link to="/modus-create">Modus Create</Link></li>
<Route path="/:id" component={Child}/>

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

<Redirect to="/somewhere/else"/>

<Switch>
  <Redirect from='/old-path' to='/new-path'/>
  <Route path='/new-path' component={Place}/>
</Switch>

// 当 push 为 true 时会添加新的历史记录而不是替代原有的
<Redirect push to="/somewhere/else"/>

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: { referrer: currentLocation }
}}/>

// when @Boolean
// message @String or Func
<Prompt
  when={formIsHalfFilledOut}
  message="Are you sure you want to leave?"
/>

<Switch>
  <Route path="/" exact component={Home}/>
  <Redirect from="/old-match" to="/will-match"/>
  <Route path="/will-match" component={WillMatch}/>
  <Route component={NoMatch}/>
</Switch>

<ul>
  <li><Link to="/about">About Us (static)</Link></li>
  <li><Link to="/company">Company (static)</Link></li>
  <li><Link to="/kim">Kim (dynamic)</Link></li>
  <li><Link to="/chris">Chris (dynamic)</Link></li>
</ul>

<Switch>
  <Route path="/about" component={About}/>
  <Route path="/company" component={Company}/>
  <Route path="/:user" component={User}/>
</Switch>

const routes = [
  { path: '/sandwiches',
    component: Sandwiches
  },
  { path: '/tacos',
    component: Tacos,
    routes: [
      { path: '/tacos/bus',
        component: Bus
      },
      { path: '/tacos/cart',
        component: Cart
      }
    ]
  }
]

// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = (route) => (
  <Route path={route.path} render={props => (
    // pass the sub-routes down to keep nesting
    <route.component {...props} routes={route.routes}/>
  )}/>
)

$(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

_.debounce(func, [wait=0], [options={}])
//将多个调用合并成一次
//options.leading为true时，多次调用会在首次调用时触发

_.throttle(func, [wait=0], [options={}])
//事件会在一定时间内至少执行一次

// 错误
$(window).on('scroll', function() {
   _.debounce(doSomething, 300); 
});
// 正确
$(window).on('scroll', _.debounce(doSomething, 200));

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
	var data = options.data;
	var urlarr = options.url.split('/');
	var key = urlarr[urlarr.length - 1];
	// 判断是否需要阻止重复请求
	var abortOnRetry = true;
	if (originalOptions.data && originalOptions.data.abortOnRetry !== undefined) {
		abortOnRetry = false;
	}
	// 当请求不在缓存中时，则请求，否则终止
	if (abortOnRetry) {
		if (!requestXhr[key] || !requestXhr[key].data || requestXhr[key].data !== data) {
			requestXhr[key] = {
				xhr: jqXHR,
				data: data
			};
		} else {
			jqXHR.abort();
		}
	}

	var complete = options.complete;
	options.complete = function (jqXHR, textStatus) {
		//请求完成后，清除缓存请求的地址
		requestXhr[key] = null;

		if ($.isFunction(complete)) {
			complete.apply(this, arguments);
		}
	};
	
});

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

// user.js
import request from './request';

export function getUserName(userID) {
  return request('/users/' + userID).then(user => user.name);
}

// request.js
const http = require('http');

export default function request(url) {
  return new Promise(resolve => {
    // This is an example of an http request, for example to fetch
    // user data from an API.
    // This module is being mocked in __mocks__/request.js
    http.get({path: url}, response => {
      let data = '';
      response.on('data', _data => (data += _data));
      response.on('end', () => resolve(data));
    });
  });
}

// __mocks__/request.js
const users = {
  4: {name: 'Mark'},
  5: {name: 'Paul'},
};

export default function request(url) {
  return new Promise((resolve, reject) => {
    const userID = parseInt(url.substr('/users/'.length), 10);
    process.nextTick(
      () =>
        users[userID]
          ? resolve(users[userID])
          : reject({
              error: 'User with ' + userID + ' not found.',
            }),
    );
  });
}

// __tests__/user-test.js
jest.mock('../request');

import * as user from '../user';

// The assertion for a promise must be returned.
it('works with promises', () => {
  expect.assertions(1);
  return user.getUserName(4).then(data => expect(data).toEqual('Mark'));
});

it('works with resolves', () => {
  expect.assertions(1);
  return expect(user.getUserName(5)).resolves.toEqual('Paul');
});

it('works with async/await', async () => {
  expect.assertions(1);
  const data = await user.getUserName(4);
  expect(data).toEqual('Mark');
});

// async/await can also be used with `.resolves`.
it('works with async/await and resolves', async () => {
  expect.assertions(1);
  await expect(user.getUserName(5)).resolves.toEqual('Paul');
});

// timerGame.js
'use strict';

function timerGame(callback) {
  console.log('Ready....go!');
  setTimeout(() => {
    console.log('Times up -- stop!');
    callback && callback();
  }, 1000);
}

module.exports = timerGame;

// __tests__/timerGame-test.js
'use strict';

jest.useFakeTimers();


// 验证callback被调用前等待了1s
test('waits 1 second before ending the game', () => {
  const timerGame = require('../timerGame');
  timerGame();

  expect(setTimeout).toHaveBeenCalledTimes(1);
  expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);
});

// 验证callback在1s后被调用
test('calls the callback after 1 second', () => {
  const timerGame = require('../timerGame');
  const callback = jest.fn();

  timerGame(callback);

  // At this point in time, the callback should not have been called yet
  expect(callback).not.toBeCalled();

  // Fast-forward until all timers have been executed
  jest.runAllTimers();

  // Now our callback should have been called!
  expect(callback).toBeCalled();
  expect(callback).toHaveBeenCalledTimes(1);
});

// infiniteTimerGame.js
'use strict';

function infiniteTimerGame(callback) {
  console.log('Ready....go!');

  setTimeout(() => {
    console.log('Times up! 10 seconds before the next game starts...');
    callback && callback();

    // Schedule the next game in 10 seconds
    setTimeout(() => {
      infiniteTimerGame(callback);
    }, 10000);
  }, 1000);
}

module.exports = infiniteTimerGame;

// __tests__/infiniteTimerGame-test.js
'use strict';

jest.useFakeTimers();

describe('infiniteTimerGame', () => {
  test('schedules a 10-second timer after 1 second', () => {
    const infiniteTimerGame = require('../infiniteTimerGame');
    const callback = jest.fn();

    infiniteTimerGame(callback);

    // At this point in time, there should have been a single call to
    // setTimeout to schedule the end of the game in 1 second.
    expect(setTimeout).toHaveBeenCalledTimes(1);
    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);

    // Fast forward and exhaust only currently pending timers
    // (but not any new timers that get created during that process)
    jest.runOnlyPendingTimers();

    // At this point, our 1-second timer should have fired it's callback
    expect(callback).toBeCalled();

    // And it should have created a new timer to start the game over in
    // 10 seconds
    expect(setTimeout).toHaveBeenCalledTimes(2);
    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 10000);
  });
});

it('calls the callback after 1 second via advanceTimersByTime', () => {
  const timerGame = require('../timerGame');
  const callback = jest.fn();

  timerGame(callback);

  // At this point in time, the callback should not have been called yet
  expect(callback).not.toBeCalled();

  // Fast-forward until all timers have been executed
  jest.advanceTimersByTime(1000);

  // Now our callback should have been called!
  expect(callback).toBeCalled();
  expect(callback).toHaveBeenCalledTimes(1);
});

<a href='#/index'>Index</a>

location.herf = '#/index';

window.addEventListener('hashchange',this.callback.bind(this),false);
currentHash = location.hash.slice(1);//字符串的 slice 方法，去除#号
// currentHash = location.hash.subString(1);

function Router(){
  this.currentUrl='';
  this.routes={};
}
Router.prototype.route = function(path,callback){
  this.routes[path] = callback || function(){}
}
Router.prototype.refresh = function(){
  this.currentUrl = location.hash.slice(1) || '/';
  this.routes[this.currentUrl]();
}
Router.prototype.init = function(){
  window.addEventListener('load',this.refresh.bind(this),false);
  window.addEventListener('hashchange',this.refresh.bind(this),false);
}

var route = new Router();
// 初始化事件监听
route.init();
// 注册回调事件
route.route('/resume',showResumeFunc.bind(null,arg));

// 实现后退功能
window.history.back();

// 实现前进功能
window.history.forward();

// 载入到历史回话的某一个特定页面，当前页面的标志位为0
// 后退
window.history.go(-1);

// 查看历史堆栈中页面的数量
window.history.length;

// 原生js绑定该事件

window.onpopstate = function(event) {
    var state = event.state; //这里state为上一页面的state，如果state没有记录，在当前页面直接调用往往为空
    if (state !== null){
        // do something
    }
}

// jquery实现
$(windwo).on('popstate', function(e) {
    // 这里的e是jQuery的event对象，而要获取DOM的事件对象，则需通过e.originalEvent
    var state = e.originalEvent.state;
    if (state !== null) {
        // do something
    }
})

// 用法
this.route('search/:query/p:num', 'search', function(query, num) {
  ...
});

第一个参数支持路由带参数，第二个参数为路由名称是可选字段，第三个参数为注册的回调

也可以批量注册路由

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

---

// 初始化时使用 routes 来存储所有的路由和其回调函数
if (options.routes) this.routes = options.routes;

// 绑定所有的回调
_bindRoutes: function() {
  if (!this.routes) return;
  this.routes = _.result(this, 'routes');
  var route, routes = _.keys(this.routes);
  while ((route = routes.pop()) != null) {
    this.route(route, this.routes[route]);
  }
},

// 将路由添加到 history 中并注册相关的回调
route: function(route, name, callback) {
  if (!_.isRegExp(route)) route = this._routeToRegExp(route);
  if (_.isFunction(name)) {
    callback = name;
    name = '';
  }
  if (!callback) callback = this[name];
  var router = this;
  Backbone.history.route(route, function(fragment) {
    var args = router._extractParameters(route, fragment);
    if (router.execute(callback, args, name) !== false) {
      router.trigger.apply(router, ['route:' + name].concat(args));
      router.trigger('route', name, args);
      Backbone.history.trigger('route', router, name, args);
    }
  });
  return this;
},

// 提取路由中参数的正则
// 将路由字符串转换为正则表达式
_routeToRegExp: function(route) {
  route = route.replace(escapeRegExp, '\\$&')
               .replace(optionalParam, '(?:$1)?')
               .replace(namedParam, function(match, optional) {
                 return optional ? match : '([^/?]+)';
               })
               .replace(splatParam, '([^?]*?)');
  return new RegExp('^' + route + '(?:\\?([\\s\\S]*))?$');
},

// 从正则表达式里提取出相应的参数
_extractParameters: function(route, fragment) {
  var params = route.exec(fragment).slice(1);
  return _.map(params, function(param, i) {
  if (i === params.length - 1) return param || null;
    return param ? decodeURIComponent(param) : null;
  });
}

---

// history 模块真正负责通过相关 api 实现路由
// backbone 中做了很多兼容性的判断，默认使用 hash

var addEventListener = window.addEventListener || function(eventName, listener) {
  return attachEvent('on' + eventName, listener);
};

if (this._usePushState) {
  addEventListener('popstate', this.checkUrl, false);
} else if (this._useHashChange && !this.iframe) {
  addEventListener('hashchange', this.checkUrl, false);
} else if (this._wantsHashChange) {
// 心跳监听
  this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
}

// 注册路由事件
route: function(route, callback) {
  this.handlers.unshift({route: route, callback: callback});
},

// 检查路由变化，触发回调事件
// Checks the current URL to see if it has changed, and if it has,
// calls `loadUrl`, normalizing across the hidden iframe.
checkUrl: function(e) {
  var current = this.getFragment();

  // If the user pressed the back button, the iframe's hash will have
  // changed and we should use that for comparison.
  if (current === this.fragment && this.iframe) {
    current = this.getHash(this.iframe.contentWindow);
  }

  if (current === this.fragment) return false;
  if (this.iframe) this.navigate(current);
  this.loadUrl();
},

// Attempt to load the current URL fragment. If a route succeeds with a
// match, returns `true`. If no defined routes matches the fragment,
// returns `false`.
loadUrl: function(fragment) {
  // If the root doesn't match, no routes can match either.
  if (!this.matchRoot()) return false;
  fragment = this.fragment = this.getFragment(fragment);
  return _.some(this.handlers, function(handler) {
    if (handler.route.test(fragment)) {
      handler.callback(fragment);
      return true;
    }
  });
}