geniusfunny / geniusfunny.github.io Goto Github PK

class HashRouter {
    constructor() {
        this._routes = new Map()
        this._history = []
        this._currentUrl = ''
        this._backIndex = this._routes.length - 1
        this._currentIndex = this._routes.length - 1
        this._isBack = false
        this._bindEvent()
    }
    _bindEvent = () => {
        window.addEventListener('laod', this.refresh, false)	// 加载后就触发更新
        window.addEventListener('hashchange', this.refresh, false)	//监听hash的变化，然后调用更新函数
    }
    route(path, cb = function() {}) {
        this._routes.set(path, cb)
    }
    refresh = () => {
        this._currentUrl = location.hash.slice(1) || '/' //读取url中'#'后面的内容
        this._history.push(this._currentUrl)
        this._currentIndex++
        if (!this._isBack) {
            this._backIndex = this._currentIndex
        }
        let cb = this._routes.get(this._currentUrl)
        if (typeof cb === 'function') cb()	//	执行路由对应的回调函数
        this._isBack = false
    }
    back = () => {
        this._isBack = true
        if (this._backIndex <= 0) {
            this._backIndex = 0
        } else {
            this._backIndex -= 1
        }
        location.hash = `#{this._history[this._backIndex]}`
    }
}

class BroswerRouter {
    constructor() {
        this._routes = new Map()
        this._bindEvent()
    }
    _bindEvent = () => {
        window.addEventListener('popstate', e => {
            let path = e.state && e.state.path
            let cb = this._routes.get(path)
            if (typeof cb = 'function') cb()
        })
    }
    init(path) {
        history.replaceState({path: path}, '', path)
        let cb = this._routes.get(path)
        if (typeof cb = 'function') cb()
    }
    route(path, cb = function() {}) {
        this._routes.set(path, cb)
    }
    go = (path) => {
        history.pushState({path: path}, '', path)
        let cb = this._routes.get(path)
        if (typeof cb === 'function') cb()
    }
    back = () => {
        history.back()
    }
}

//	创建context，用于全局传递信息
const createNamedContext = name => {
  const context = React.createContext();
  context.Provider.displayName = `${name}.Provider`;
  context.Consumer.displayName = `${name}.Consumer`;
  return context;
}
const RouterContext = createNamedContext('Router')

class Router extends Component {
  static computeRootMatch(pathname) {
    return { path: "/", url: "/", params: {}, isExact: pathname === "/" };
  }
  constructor(props) {
    super(props);
    this.state = {
      location: props.history.location
    };

    // This is a bit of a hack. We have to start listening for location
    // changes here in the constructor in case there are any <Redirect>s
    // on the initial render. If there are, they will replace/push when
    // they mount and since cDM fires in children before parents, we may
    // get a new location before the <Router> is mounted.
    this._isMounted = false;
    this._pendingLocation = null;
    if (!props.staticContext) {
        //	！！！在这里进行监听，每次路由变化都会触发顶层Router的回调事件，然后Router进行setState，再向下传递context，最下面的Route根据context内容判断是否进行渲染！！！
      this.unlisten = props.history.listen(location => {
        if (this._isMounted) {
          this.setState({ location });
        } else {
          this._pendingLocation = location;
        }
      });
    }
  }

  componentDidMount() {
    this._isMounted = true;

    if (this._pendingLocation) {
      this.setState({ location: this._pendingLocation });
    }
  }
  componentWillUnmount() {
    if (this.unlisten) this.unlisten();
  }
  render() {
    return (
      <RouterContext.Provider
        children={this.props.children || null}
        value={{
          history: this.props.history,
          location: this.state.location,
          match: Router.computeRootMatch(this.state.location.pathname),
          staticContext: this.props.staticContext
        }}
      />
    );
  }
}
class BrowserRouter extends React.Component {
  history = createHistory(this.props);
  render() {
    return <Router history={this.history} children={this.props.children} />;
  }
}

class Route extends Component {
  render() {
    return (
      <RouterContext.Consumer>
        {context => {

          const location = this.props.location || context.location
          const match = this.props.computedMatch
            ? this.props.computedMatch // <Switch> already computed the match for us
            : this.props.path
              ? matchPath(location.pathname, this.props)
              : context.match

          const props = { ...context, location, match }	//	传递给要渲染的组件

          let { children, component, render } = this.props

          // Preact uses an empty array as children by
          // default, so use null if that's the case.
          if (Array.isArray(children) && children.length === 0) {
            children = null;
          }
          if (typeof children === "function") {
            children = children(props);

            if (children === undefined) {
              children = null;
            }
          }

          return (
              //	提供了多种渲染的方式，children(子元素)、component（props）、render(props)
            <RouterContext.Provider value={props}>
              {children && !isEmptyChildren(children)
                ? children
                : props.match
                  ? component
                    ? React.createElement(component, props)	//	这里是通过React.creareElement创建组件的，所以React Diff认为每次都不一样，更新的时候会先卸载之前的组件再重新安装新的组件。
                    : render
                      ? render(props)
                      : null
                  : null}
            </RouterContext.Provider>
          );
        }}
      </RouterContext.Consumer>
    );
  }
}

class Switch extends Component {
  render() {
    return (
      <RouterContext.Consumer>
        {context => {

          const location = this.props.location || context.location;

          let element, match;

          // We use React.Children.forEach instead of React.Children.toArray().find()
          // here because toArray adds keys to all child elements and we do not want
          // to trigger an unmount/remount for two <Route>s that render the same
          // component at different URLs.
          React.Children.forEach(this.props.children, child => {
         //	按children的顺序依次遍历子元素，成功就标记这个子元素和对应的location和comutedMatch，最后调用React.cloneElement渲染，否则返回null
            if (match == null && React.isValidElement(child)) {
              element = child;

              const path = child.props.path || child.props.from;
			//	Switch通过matchPath来判断是否匹配成功
              match = path
                ? matchPath(location.pathname, { ...child.props, path })
                : context.match;
            }
          });

          return match
            ? React.cloneElement(element, { location, computedMatch: match })
            : null;
        }}
      </RouterContext.Consumer>
    );
  }
}

//	缓存，不必每次都生成一个正则表达式用于判断
const cache = {};
const cacheLimit = 10000;
let cacheCount = 0;

function compilePath(path, options) {
  const cacheKey = `${options.end}${options.strict}${options.sensitive}`;
  const pathCache = cache[cacheKey] || (cache[cacheKey] = {});

  if (pathCache[path]) return pathCache[path];

  const keys = [];
  const regexp = pathToRegexp(path, keys, options);
  const result = { regexp, keys };

  if (cacheCount < cacheLimit) {
    pathCache[path] = result;
    cacheCount++;
  }

  return result;
}

/**
 * Public API for matching a URL pathname to a path.
 */
function matchPath(pathname, options = {}) {
  if (typeof options === "string") options = { path: options };

  const { path, exact = false, strict = false, sensitive = false } = options;

  const paths = [].concat(path);

  return paths.reduce((matched, path) => {
    if (matched) return matched;
    const { regexp, keys } = compilePath(path, {
      end: exact,
      strict,
      sensitive
    });
    const match = regexp.exec(pathname);

    if (!match) return null;

    const [url, ...values] = match;
    const isExact = pathname === url;

    if (exact && !isExact) return null;

    return {
      path, // the path used to match
      url: path === "/" && url === "" ? "/" : url, // the matched portion of the URL
      isExact, // whether or not we matched exactly
      params: keys.reduce((memo, key, index) => {
        memo[key.name] = values[index];
        return memo;
      }, {})
    };
  }, null);
}

class Link extends React.Component {
  handleClick(event, history) {
    if (this.props.onClick) this.props.onClick(event);

    if (
      !event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore everything but left clicks
      (!this.props.target || this.props.target === "_self") && // let browser handle "target=_blank" etc.
      !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {
      event.preventDefault();

      const method = this.props.replace ? history.replace : history.push;

      method(this.props.to);
    }
  }

  render() {
    const { innerRef, replace, to, ...rest } = this.props; // eslint-disable-line no-unused-vars

    return (
      <RouterContext.Consumer>
        {context => {

          const location =
            typeof to === "string"
              ? createLocation(to, null, null, context.location)
              : to;
          const href = location ? context.history.createHref(location) : "";

          return (
            <a
              {...rest}
              onClick={event => this.handleClick(event, context.history)}
              href={href}
              ref={innerRef}
            />
          );
        }}
      </RouterContext.Consumer>
    );
  }
}

function createTransitionManager() {
  let prompt = null;

  function setPrompt(nextPrompt) {
    prompt = nextPrompt;
    return () => {
      if (prompt === nextPrompt) prompt = null;
    };
  }

  function confirmTransitionTo(
    location,
    action,
    getUserConfirmation,
    callback
  ) {
    // TODO: If another transition starts while we're still confirming
    // the previous one, we may end up in a weird state. Figure out the
    // best way to handle this.
    if (prompt != null) {
      const result =
        typeof prompt === 'function' ? prompt(location, action) : prompt;

      if (typeof result === 'string') {
        if (typeof getUserConfirmation === 'function') {
          getUserConfirmation(result, callback);
        } else {
         
          callback(true);
        }
      } else {
        // Return false from a transition hook to cancel the transition.
        callback(result !== false);
      }
    } else {
      callback(true);
    }
  }

  let listeners = [];

  function appendListener(fn) {
    let isActive = true;

    function listener(...args) {
      if (isActive) fn(...args);
    }

    listeners.push(listener);

    return () => {
      isActive = false;
      listeners = listeners.filter(item => item !== listener);
    };
  }

  function notifyListeners(...args) {
    listeners.forEach(listener => listener(...args));
  }

  return {
    setPrompt,
    confirmTransitionTo,
    appendListener,
    notifyListeners
  };
}

function withRouter(Component) {
  const C = props => {
    const { wrappedComponentRef, ...remainingProps } = props;

    return (
      <Route
        children={routeComponentProps => (
          <Component
            {...remainingProps}
            {...routeComponentProps}
            ref={wrappedComponentRef}
          />
        )}
      />
    );
  };

  C.displayName = `withRouter(${Component.displayName || Component.name})`;
  C.WrappedComponent = Component;
  return hoistStatics(C, Component);
}

const fs = require('fs')
const ProcessItem = require('./ProcessItem')
/**
 * 进程池类
 * @param maxParallelProcess，最大并行工作进程数
 * @param timeToClose，任务最长耗时时间
 * @param taskParams，所有任务脚本需要的参数
 * @param dependency，任务脚本所需依赖
 * @param taskName, 工作脚本名称
 * @param script 脚本内容
 * @param workDir 工作目录
 * Todo: 读写同一文件时出现任务丢失，待修复bug
 */
function ProcessPool({
    maxParallelProcess = 50,
    timeToClose = 60 * 1000,
    taskParams = [],
    dependency = '',
    workDir ='',
    taskName = Date.now(),
    script = '',}) {
  if (typeof script !== 'function' && script.name === 'task') {
    throw new Error('script must be a async function that named task')
  }
  if (typeof maxParallelProcess !== 'number' || maxParallelProcess < 1) {
    throw new Error('maxParallelProcess must be a integer and > 0')
  }
  if (typeof timeToClose !== 'number' || timeToClose < 1) {
    throw new Error('timeToClose must be a integer and > 0')
  }
  if (typeof dependency !== 'string') {
    throw new Error('dependency must be a string')
  }
  if (typeof workDir !== 'string') {
    throw new Error('dependency must be a path')
  }
  this.timeToClose = timeToClose
  this.processList = new Map() // 使用Map存储进程对象
  this.currentProcessNum = 0 // 当前活动进程数
  this.dependency = dependency // 任务脚本依赖
  this.workDir = workDir // 主控函数工作目录
  this.taskName = taskName // 任务脚本名称
  this.task = `${this.workDir}/${this.taskName}.js`// 任务脚本路径
  this.taskParamsTodo = taskParams // 待完成的任务参数数组，包含了n个小任务所需参数，所以是一个二维数组
  this.taskParamsDone = [] // 已完成的任务参数数组
  this.maxParallelProcess = maxParallelProcess // 最大进程并行数
  this.script = script
  try {
    this.writeScript()
  } catch (e) {
    throw new Error('创建工作脚本失败' + e)
  }
}
/**
 * 将内容写进脚本
 */
ProcessPool.prototype.writeScript = function() {
  /**
   * Todo：生产工作进程脚本
   * 1. 在工作目录下新建脚本
   * 2. 注入依赖
   * 3. 引入task模版
   * 4. 倒入任务脚本内容
   */
  if (this.fileIsExist()) {
    fs.writeFileSync(this.task, '')
  }
  try {
    fs.appendFileSync(this.task, `${this.dependency}\n`, (err) => {
      if (err) throw new Error('依赖写入失败')
    })
  } catch (e) {
    throw new Error('依赖写入失败')
  }
  try {
    fs.copyFileSync(`${__dirname}/task.js`, this.task)
  } catch (e) {
    throw new Error('复制task模版失败')
  }
  try {
    fs.appendFileSync(this.task, this.script.toString(), err => {
      if (err) throw new Error('任务脚本写入失败')
    })
  } catch (e) {
    throw new Error('任务脚本写入失败')
  }
}
/**
 * 复用空闲进程
 * @param key，可复用进程的pid
 */
ProcessPool.prototype.reuseProcess = function(key) {
  const workProcess = this.processList.get(key)
  if (this.taskParamsTodo.length) {
    const taskParam = this.taskParamsTodo.shift()
    workProcess.state = 1 // 设置为忙碌
    workProcess.process.send(taskParam)
  }
}
/**
 * 监测当前是否有正在处理任务的进程
 * @returns {number}
 */
ProcessPool.prototype.hasWorkProcessRunning = function() {
  if (!this.processList.size) return 1 // 进程池刚启动，尚无进程
  for (const p of this.processList.values()) {
    if (p.state === 1) return 2 // 有忙碌的进程
  }
  return -1
}
ProcessPool.prototype.listenProcessFinish = function(workProcess, params) {
  workProcess.process.on('message', message => {
    if (message === 'finish') {
      this.taskParamsDone.push(params)
      workProcess.finishTask()
    } else if (message === 'failed') {
      this.taskParamsTodo.unshift(params)
      workProcess.unFinishTask()
    }
  })
}
ProcessPool.prototype.addProcess = function() {
  if (this.currentProcessNum <= this.maxParallelProcess) {
    let workParam = this.taskParamsTodo.shift()
    const newProcess = new ProcessItem({task: this.task, workParam})
    this.processList.set(newProcess.id, newProcess)
    this.currentProcessNum++
    this.listenProcessFinish(newProcess, workParam)
  }
}
/**
 * 从进程池中移除[进程id]
 * @param id
 */
ProcessPool.prototype.removeProcess = function(id) {
  if (this.processList.has(id)) {
    const processToTerminate = this.processList.get(id)
    processToTerminate.terminate()
    this.currentProcessNum--
  }
}
/**
 * 关闭所有进程并清空进程池
 */
ProcessPool.prototype.closeProcessPool = function() {
  const processItems = this.processList.values()
  for (const processItem of processItems) {
    processItem.terminate()
  }
  // 清空进程池
  this.processList = null
  process.kill(process.pid)
}
/**
 * 检查任务脚本是否已经存在
 */
ProcessPool.prototype.fileIsExist = function() {
  fs.access(this.task, fs.constants.F_OK, err => {
    return !err
  })
}
/**
 * 进程池启动，处理任务
 * Todo：一方面要实时监控任务状态，另一方面要处理工作进程传递过来的message，由于单线程模型，二者只有一个能运行，目前采用定时器切换工作上下文，应该有更好的方法。
 *
 */
ProcessPool.prototype.run = function() {
  setInterval(() => {
    let flag = this.hasWorkProcessRunning() // 判断是否有工作进程正在执行或是否是第一次处理任务
    const taskTodoNum = this.taskParamsTodo.length

    if (flag === 1 && taskTodoNum) {
      // 初始阶段，fork min{任务数，最大进程数} 的进程
      while (this.currentProcessNum <= this.maxParallelProcess && this.currentProcessNum <= taskTodoNum) {
        this.addProcess()
      }
    } else if (flag > 0 && !taskTodoNum) {
      // 如果有工作进程正在执行且没有新的任务要执行，那么等待工作进程结束任务
    } else if (flag > 0 && taskTodoNum) {
      // 如果有工作进程正在执行且有新的任务要执行，如果有空闲进程，那么重用空闲进程执行新任务
      const processList = this.processList.values()
      for (const p of processList) {
        if (p.state !== 1 || p.state !== 4) {
          this.reuseProcess(p.id)
        }
      }
    } else if (flag < 0 && taskTodoNum) {
      // 如果没有工作进程正在执行且有新的任务要执行，如果有空闲进程，那么重用空闲进程执行新任务，如果没有则新启动进程进行执行任务
      const processList = this.processList.values()
      for (const p of processList) {
        if (p.state !== 1 || p.state !== 4) {
          this.reuseProcess(p.id)
        }
      }
    } else if (flag < 0 && !taskTodoNum) {
      // 如果没有工作进程正在执行且没有新的任务要执行，关闭进程池，任务完成
      this.closeProcessPool()
    }
  }, 0)
}
module.exports = ProcessPool

const ChildProcess = require('child_process')
/**
 * 工作进程类
 */
function ProcessItem({ task = './task.js', workParam = [] }) {
  /**
   * state 状态码
   * 1: 忙碌
   * 2: 完成任务
   * 3: 未完成任务
   * 4： 不可用
   */
  if (!Array.isArray(workParam)) {
    throw new Error('workParam must be a array')
  }
  if (typeof task !== 'string') {
    throw new Error('workParam must be a string')
  }
  this.process = this.createProcess(task, workParam)
  this.state = 1
  this.id = this.process.pid
}
ProcessItem.prototype.finishTask = function() {
  if (this.state === 1) {
    this.state = 2
  }
}
ProcessItem.prototype.unFinishTask = function() {
  this.state = 3
}
ProcessItem.prototype.terminate = function() {
  try {
    this.process.kill()
    this.state = 4
  } catch (e) {
    throw new Error(`关闭进程${this.id}失败`)
  }
}
ProcessItem.prototype.createProcess = function (task, workParam) {
  let childProcess = ChildProcess.fork(task, workParam)
  if (childProcess) {
    return childProcess
  } else {
    throw new Error('create process failed')
  }
}

module.exports = ProcessItem

/**
 * 当进程被子进程创建后，立刻执行工作任务
 */
async function firstTask() {
  const workParam = process.argv.slice(2)
  await task(workParam)
}
/**
 * 完成任务，提示进程池已完成，工作进程空闲
 */
async function finishTask() {
  await process.send('finish')
}
/**
 * 任务失败，提示进程池未完成，归还任务
 */
async function unFinishTask() {
  await process.send('failed')
}
/**
 * 监听进程池后续指派的任务
 */
process.on('message', async workParam => {
  await task(workParam)
  try {
    await finishTask()
  } catch (e) {
    await unFinishTask()
  }
})
/**
 * 进程被创建时立即执行进程池指派的任务
 * @returns {Promise<void>}
 */
async function main() {
  try {
    await firstTask()
    await finishTask()
  } catch (e) {
    await unFinishTask()
  }
}
main()
/**
 * @name 工作进程负责的任务
 * @param workParam // 执行任务所需的参数数组
 * 动态添加任务脚本到此文件尾部
 */

// 进程池使用示例
const ProcessPool = require('../src/ProcessPool')
const taskParams = []
for (let i = 0; i < 100; i++) {
  taskParams[i] = [i]
}
// 创建进程池实例
const processPool = new ProcessPool({
  maxParallelProcess: 50, // 支持最大进程并行数
  timeToClose: 60 * 1000, // 单个任务被执行最大时长
  dependency: `const path = require('path')`, // 任务脚本依赖
  workDir: __dirname, // 当前目录
  taskName: 'test', // 任务脚本名称
  script: async function task(workParam) {
    console.log(workParam)
  }, // 任务脚本内容
  taskParams // 需要执行的任务参数列表，二维数组
})
// 利用进程池进行处理大规模任务
processPool.run()

// 测试任务1：写时间戳到文本中
// 进程池：5000个任务，耗时2.7s，每个任务耗时0.54ms
// 单线程：5000个任务，耗时0.456s，每个任务耗时0.0934ms

// 测试任务2：写时间戳到文本中，但每个任务需要至少耗时20ms（while空循环）
// 进程池：5000个任务，耗时15.089s，每个任务耗时3.02ms
// 单线程：5000个任务，耗时100.260s，每个任务耗时20.052ms

// 显然，当处理独立且耗时任务时，使用进程池更加合适。例如爬取信息，直接会将对方服务器503，2333333～

const express = require('express')
const app = express() // 实际执行 createcreateApplication
const port = 3000

app.use(function(req, res, next) {
  // ...
  next()
})
app.use('/test', function(req, res, next) {
  // ...
  next()
})


app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

function createApplication() {
  var app = function(req, res, next) {
    app.handle(req, res, next);
  };

  mixin(app, EventEmitter.prototype, false); // 赋予eventEmitter能力
  mixin(app, proto, false); // 挂载基本方法，例如get/post/listen/init/use/handle等

  // expose the prototype that will get set on requests
  app.request = Object.create(req, {
    app: { configurable: true, enumerable: true, writable: true, value: app }
  })

  // expose the prototype that will get set on responses
  app.response = Object.create(res, {
    app: { configurable: true, enumerable: true, writable: true, value: app }
  })
	
  app.init(); // 初始化
  return app;
}

app.use = function (fn) {
  // 通过offset来处理函数重载，忽略细节
  var fns = flatten(slice.call(arguments, offset));
  this.lazyrouter() // 初始化router，讲路由的时候再说
  fns.forEach(fn => {
    // 实际上app.use调用的router的中间件绑定
    this.router.use(path, function mounted_app(req, res, next) {
    	fn.handle(req, res, function(err) {
      setPrototypeOf(req, orig.request)
      setPrototypeOf(res, orig.response)
      next(err);
    })
  })
  fn.emit('mount', this);
  })
}

// 单例模式
app.lazyrouter = function lazyrouter() {
  if (!this._router) {
    // 初始化一个router实例，全局唯一
    this._router = new Router({
      caseSensitive: this.enabled('case sensitive routing'),
      strict: this.enabled('strict routing')
    });
		// router挂载基本中间件
    this._router.use(query(this.get('query parser fn')));
    this._router.use(middleware.init(this));
  }
};

function Router(options) {
  var opts = options || {};

  function router(req, res, next) {
    router.handle(req, res, next);
  }

  // mixin Router class functions
  setPrototypeOf(router, proto)

  router.params = {};
  router._params = [];
  router.caseSensitive = opts.caseSensitive;
  router.mergeParams = opts.mergeParams;
  router.strict = opts.strict;
  router.stack = [];

  return router;
};

// router.use(fn1, fn2); // 所有路径和方法（除options）都会执行
// router.use('/test', fn3); // 针对/test才会执行

// 伪代码
router.use = function(callbacks) {
  // 
  for(let i = 0; i < callbacks.length; i++) {
    const layer = new Layer(path, {
      // 配置
    }, callbacks[i]);
    layer.route = undefined;
    this.stack.push(layer); // 将所有中间件维护在一起
  }
}

function layer(path, options, fn) {
  // 省略部分代码
   this.handle = fn;
   this.path = undefined;
}

app[method] = function(path){
  if (method === 'get' && arguments.length === 1) {
    // app.get(setting)
      return this.set(path);
   }
    this.lazyrouter();
    var route = this._router.route(path); // 初始化route
    route[method].apply(route, slice.call(arguments, 1)); // 绑定处理函数
    return this;
}

router.route = function route(path) {
  let route = new Route(path);
  let layer = new Layer(path, {
    // 配置
  }, route.dispatch.bind(route)) // layer上绑定route的dispatch方法【后续会说作用】
  layer.route = route; // layer只与此route相关
  this.stack.push(layer); // 将一个route下的所有路由函数放一起
  return route;
}

function Route(path) {
  // 忽略部分代码
  this.path = path;
  this.stack = []; // route也有stack，用来存储处理函数，即对应 http路由的 处理函数
  // route handlers for various http methods
  this.methods = {};
}

methods.forEach(function(method){
  Route.prototype[method] = function(){
    var handles = flatten(slice.call(arguments));

    for (var i = 0; i < handles.length; i++) {
      var handle = handles[i];

      if (typeof handle !== 'function') {
        var type = toString.call(handle);
        var msg = 'Route.' + method + '() requires a callback function but got a ' + type
        throw new Error(msg);
      }

      var layer = Layer('/', {}, handle);
      layer.method = method;

      this.methods[method] = true;
      this.stack.push(layer);
    }

    return this;
  };
});

app.listen = function listen() {
  var server = http.createServer(this);
  return server.listen.apply(server, arguments);
};

app.handle = function handle(req, res, callback) {
  var router = this._router;

  // final handler
  var done = callback || finalhandler(req, res, {
    env: this.get('env'),
    onerror: logerror.bind(this)
  });

  // no routes
  if (!router) {
 debug('no routes defined on app');
    done();
 return;
  }

  router.handle(req, res, done);
};

layer.prototype.handle_request = function(req, res, next) {
  var fn = this.handle;
  if (fn.length > 3) return next(); // 如果参数不对，跳过本处理函数
  try {
    fn(req, res, next); // 执行处理函数
  } catch(err) {
    next(err);
  }
}

// dispatch req, res into this route
Route.prototype.dispatch = function(req, res, next) {
  if (stack.length === 0) return;
  // ...不必要细节
  function next(err) {
    var layer = stack[idx++];
    // method就是http方法
    if (layer.method && layer.method !== method) { // 方法不匹配，跳过本处理函数
      return next(err);
    }
    layer.handle_request(req, res, next); // 执行处理函数
  }
  next()
}