单页面路由原理及实现

单页面路由即在前端单页面实现的一种路由，由于React，Vue等框架的火热，我们可以很容易构建一个用户体验良好的单页面应用，但是如果我们要在浏览器改变路由的时候，在不请求服务器的情况下渲染不同的内容，就要类似于后端的路由系统，在前端也实现一套完整的路由系统

下面让我们来实现一个简单的路由系统。该路由系统将基于React进行书写。在写之前，我们先仔细想下，我们应该从哪方面入手。这是最终实现的效果simple-react-router-demo

功能思考

不论是前端还是后端路由，我们都可以通过一种路由匹配加匹配后回调的方式来实现。如果没有理解也没有关系，后面会理解。我们用一个对象Router来表示我们的Router对象。先来想下我们要做哪些工作

配置路由模式history和hash
添加和删除路由
监听路由变化并调用对应路由回调
暴露路由跳转函数

实现路由核心部分

首先我们来实现我们的router-core.js。

const Router = {
	routes: [], // 用来存放注册过的路由
	mode: null, // 用来标识路由模式
}
复制代码

我们用两个属性来存放我们需要存储的路由和路由模式

下面在刚才的基础上添加一个config函数，让我们的路由能够配置

const Router = {
	// ... routes mode
	config: (options) => {
		Router.mode = options && options.mode && options.mode === 'history' && !!history.pushState ? 'history' : 'hash';
		return Router;
	}
}
复制代码

config函数中我们通过传入的配置，来配置我们的路由模式，当且仅当options.mode === 'history'和historyapi存在的时候我们设置Router模式为history。返回Router是为了实现链式调用，除了工具函数，后面其他函数也会保持这种写法。

配置完Router模式后，我们要能够添加和删除路由

const Router = {
	// ... routes mode config
	add: (pathname, handler) => {
		Router.routes.push({ pathname: clearEndSlash(pathname), handler });
		return Router;
	},
	remove: (pathname) => {
		Router.routes.forEach((route, index) => {
			if (route.pathname === clearEndSlash(pathname)) {
				Router.routes.splice(index, 1);
			}
		});
		return Router;
	}
}
复制代码

在添加和删除路由函数中，我们传入了名为pathname的变量，为了跟后面普通的path区分开。直白点来说，就是pathname对应/person/:id的写法，path对应/person/2的写法。

这里有个clearEndSlash函数，是为了防止有/home/的写法。我们将尾部的/去掉。该函数实现如下

const clearEndSlash = (path = '') => path.toString().replace(//$/, '') || '/';
复制代码

为了方便比较，在完成添加和删除后我们来实现一个match函数，来确定pathname是否和path相匹配。

const Router = {
	// ... routes mode config add remove
	match: (pathname, path) => {
		const reg = pathToRegexp(pathname);
		return reg.test(path);
	}
}
复制代码

这里使用pathToRegexp函数将pathname解析成正则表达式，然后用该正则表达式来判断时候和path匹配。pathToRegexp的实现如下

const pathToRegexp = (pathname, keys = []) => {
  const regStr = '^' + pathname.replace(//:([^/]+)/g, (_, name) => {
    keys.push({ name });
    return '/([^/]+)';
  });
  return new RegExp(regStr);
}
复制代码

函数返回解析后的正则表达式，其中keys参数用来记录参数name。举个例子

// 调用pathToRegexp函数
const keys = [];
const reg = pathToRegexp('/person/:id/:name', keys);
console.log(reg, keys);

// reg: /^/person/([^/]+)/([^/]+)/
// keys: [ { name: 'id' }, { name: 'name' } ]
复制代码

好像有点扯远了，回到我们的Router实现上来，根据我们一开始列的功能，我们还要实现路由改变监听事件，由于我们有两种路由模式history和hash，因此要进行判断。

const Router = {
	// ... routes mode config add remove match
	current: () => {
		if (Router.mode === 'history') {
			return location.pathname;
		}
		
		return location.hash;
	},
	listen: () => {
		let currentPath = Router.current();
		
		const fn = () => {
			const nextPath = Router.current();
			if (nextPath !== currentPath) {
				currentPath = nextPath;
				
				const routes = Router.routes.filter(route => Router.match(route.pathname, currentPath));
				routes.forEach(route => route.handler(currentPath));
			}
		}
		
		clearInterval(Router.interval);
		Router.interval = setInterval(fn, 50);
		return Router;
	}
}
复制代码

路由改变事件监听，在使用History API的时候可以使用popstate事件进行监听，Hash改变可以使用hashchnage事件进行监听，但是由于在不同浏览器上有些许不同和兼容性问题，为了方便我们使用setInterval来进行监听，每隔50ms我们就来判断一次。

最后我们需要实现一个跳转函数。

const Router = {
	// ... routes mode config add remove match current listen
	navigate: path => {
		if (Router.mode === 'history') {
			history.pushState(null, null, path);
		} else {
			window.location.href = window.location.href.replace(/#(.*)$/, '') + path;
		}
	}
	return Router;
}
复制代码

但这里我们基本已经完成了我们路由的核心部分。

下一节，我们将在该核心部分的基础上，实现几个路由组件，以达到react-router的部分效果。

这是原文地址，该部分的完整代码可以在我的Github的simple-react-router上看到，如果你喜欢，能顺手star下就更好了♪(･ω･)ﾉ，可能有部分理解错误或书写错误的地方，欢迎指正。