14行代码创建一个极简的单页路由

客户端路由，在url改变时可以切换不同页面到指定标签的位置。因此是单页应用的核心组件。为了理解它的运作机制，我这里创建了一个最小的路由组件，代码长度为14行。

测试场景在一个html内，分为两块：

放置导航区，可以用于切换url。
放置内容区，当url切换时，把指定的html片段插入到此内容区内,这里切入的内容为

具体的案例中，导航区有三个url可以点击，分别指向home,page1,page2。代码可以加载到浏览器运行：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Building a router</title>
  <script>
    var routes = {};
    function route (path, innerHTML) {
      routes[path] = {innerHTML: innerHTML};
    }
    var stage = null;
    function router () {
      stage = stage || document.getElementById('stage');
      var url = location.hash.slice(1) || '/';
      var route = routes[url];
      if (stage && route.innerHTML) {
        stage.innerHTML = route.innerHTML
      }
    }
    window.addEventListener('hashchange', router);
    window.addEventListener('load', router);
  </script>
</head>
<body>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#/page1">Page 1</a></li>
    <li><a href="#/page2">Page 2</a></li>
  </ul>
  <div id="stage"></div>
  <script>
    route('/', 'home page');
    route('/page1', '<b>bold page1</b>');
    route('/page2', '<i>italic page2</i>');
  </script>
</body>
</html>

代码对hashchange进行监听，如果hash url发生变化，此事件就会触发，并调用对应的router函数。此函数内的代码比较简单，不做更多解释。

14行代码创建一个极简的单页路由

Reco

引用和评论

Spring Boot 构建一个RESTful Web服务

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具