web路由那些事儿（二）

在《web路由那些事儿（一）》中，对web路由的概念以及基础有了基本的了解，具体参见——http://www.jianshu.com/p/afe0b302f696 。
接下来看看具体的web路由的简单实现。

一、概述

web路由有两种实现基础，分别为锚点和pushstate，这里采用新出现的api——pushstate来实现，而锚点的实现方式相差并不大，而且经常作为pushstate实现方式的兼容性补充。

实现基础：
1、history.pushstate——更改url，添加历史记录
2、window.onpopstate——监听浏览器后退请求
3、routeObject——规范路由逻辑

先上Demo——http://tkixp9.github.io/wy_router/ 。

二、代码结构

路由定义：
myRouter = {
        routerSet: [],
        addRoute: function (path, handle) {
                this.routerSet.push({
                        path, // 参数，可以为任何类型的数据，用于路由匹配
                        handle // 函数，用于路由匹配成功后执行
            });
        execute: function (params) {
                this.routerSet.forEach(function (item) {
                        if (item.path == params.path) { // 找到匹配项，执行对应的行为函数
                                item.handle.apply(null, [params]);
                                return true;
                        }
                        return false;
                });
        },
        // 需要更改url是调用，记录和显示url
        addHistoryRecord: function (state, title, url) {
                history.pushState(state, title, url);
        }
    };
myRouter.addRoute('action', actionHandle); // 路由初始化，action handle执行对应的业务逻辑
说明：
路由myRouter本质是一个数据映射表，定义某些所对应的操作。
另外，提供根据参数执行期望操作的接口。

路由监听：
window.addEventListener("popstate", function () {
        var params = history.state;
        params.path = getParameterByName('path');
        myRouter.execute(params);
});
说明：
监听浏览器前进和后退的操作，params主要通过两种方式记录和获取：
    一是url中；
    二是history.state（对应pushstate的第一个参数）中。

路由记录：
function changeUrlAndContent() {
        doSomething(); // 对应的业务逻辑
        myRouter.addHistoryRecord(state, 'title_ignore', url); // 记录对应的路由到history中
}

三、流程分析

网页内操作流程：
1、用户操作，例如点击某个button；
2、执行changeUrlAndContent()处理业务逻辑（网络请求、更改显示等）；
3、调用history.pushState添加记录到浏览器历史中；

后退前进流程：
1、用户点击浏览器后退或前进按钮；
2、监听到popstate，即历史记录发生pop事件，url发生变化；
3、从url和history中获取对应的参数；
4、调用路由，查找匹配对应参数的回调函数并执行；

四、web路由应用

在前一章中，提到过AJAX是web路由产生和发展的基石，是web路由的核心，然而在上面的路由demo中却没有AJAX的只言片语，是不是漏掉了？

web路由的结构和概念延伸自后台服务中的路由，它本身是一种独立的技术，不依赖其他任何技术。例如Demo中用到了popstate和pushState，但这也是可以用其他的方式代替——url#hash。

之所以说AJAX是基石和核心，主要是因为没有AJAX就没有web路由以及web路由赖以生长的环境——单页面应用。

单页面应用是仅包含单个网页的应用，目的是为了提供类似于本地应用的流畅用户体验。它的主要特点包括：一个页面和局部刷新。
而“一个页面”的特点正是由web路由完成的，或者说web路由正是由一个页面的要求而产生的。
另一个特点“局部刷新”则是由AJAX来完成——一种支持异步请求的技术。

当web路由以一种技术被提及时，它必然是独立的；而当web路由以一种框架被提及时，则是指包含了web路由技术和AJAX技术的一种路由框架。目前，从应用的角度，web路由、AJAX、单页面是紧密联系在一起的。

五、web路由框架

讨论前端的技术问题，最后都会回到框架。对于web路由来说，框架并不陌生，如今几乎每个框架都会有一套路由机制或者组件或者插件，例如angularjs不仅本身有一套ng-router的机制，而且还有第三方的ui-router插件，之后新出现的react、vue等都有自己的router组件，而微信小程序内部的路由机制则和vue相差不大。
web路由在各个框架中都有各自的声明和定义，但是原理都是一样的，是否选择对应的框架，则需要根据具体项目的需求、大小、规划以及资源来确定了。