前端开发路由实现原理

路由，某度的解释为：指分组从源到目的地时，决定端到端路径的网络范围的进程；路由工作在OSI参考模型的第三层–网络层的数据包转发设备，路由器通过转发数据包来实现网络互联。

对应在网站开发中的路由就是指网页页面从源网页到目标展示网页时，决定网页到网页跳转展示的一系列过程，早期的路由都是后端实现的，直接根据url来reload页面，即页面不同元素绑定不同的url链接地址，用户点击不同的链接，后端服务器返回不同的页面文档，浏览器重新进行加载渲染。

随着项目的增大，服务器的压力越来越大，ajax技术的出现也实现了页面非reload就能局部刷新数据，奠定了前端路由的基础，可以通过记录url来记录ajax的变化，从而实现前端路由；
前端路由实现的本质都是基于浏览器的location对象或者history对象的方法特性结合ajax技术来实现的，实际生产开发中运用的各个不同框架中的路由模块、插件、库都是再次基础上进行了不同程度的封装，进而实现路由控制。

1. 两种不同的路由机制原理

• 1.1 History API

  W3C定义的BOM中对应的history对象：提供浏览器url跳转的相关功能

  • history对象从窗口被打开的那一刻开始算起，该对象保存着用户上网的历史记录；
  • 每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联；
  • 出于安全机制，开发人员无法得知用户浏览过的url，但可以借由访问过的页面列表，在不知道实际url的情况下实现页面后退前进(或者间隔特定次数的url跳转)
  • 主要属性(只读)：history.length;
  • 主要方法：history.back()、history.forward()、history.go(num)、history.pushState(stateObj,title,url)、history.replaceState(stateObj,title,url);

  PS:当页面URL改变时，变回生成一条历史记录；IE8以上版本，这里的URL变化包含has值的变化；即设置location.hash会同时生成一条新的历史记录；

• 1.2 hash

  W3C中的location对象: 提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能

  • location对象即是window对象的属性、同时也是document的属性；
  • 保存着当前文档的信息，提供一系列解析url为独立片段的方法属性
  • location的每一个属性值得变化都会改变当前加载的页面;
  • location属性变化导致的页面的变化，都会生成新的历史记录；可以用浏览器前进、后退来进行控制页面的跳转
  • 主要属性(全部可读写)：window.href、location.protocol、location.hostname、location.port、location.pathname、location.hash、location.search、
  • 主要方法：location.assign()、location.reload()、location.replace()、location.toString()

2. AngularJS路由插件- ui-router

网站的路由是在网站设计之处就应该考虑的事情，是整个应用有序运行的规范及执行流程；
一个合理的路由模块应该至少包含以下8个方面的特性：

• ①路由嵌套：父、子路由
• ②路由视图控制容器
• ③路由配置/路由状态
• ④路由解析 Resolve
• ⑤路由参数 params
• ⑥路由生命周期及钩子
• ⑦路由导航:页面自动导航、手动导航
• ⑧路由模块懒加载

本文以angularJS的插件ui-router为例，总结一下一个路由组件需要具备的功能及方法。为保证应用的正常运行，路由需要在应用初始化之前就定义并完成加载；
针对于 ui-router插件，需要在应用初始化时完成：①路由模块的注angular.module.config(RouteConfig)、②路由状态的定义$stateProvider.state({stateObj})、③路由视图容器的定义、④路由跳转链接的定义urlNameALink

2.1 路由状态定义

• 概述：

ui-router路由的应用程序就像一个转台机。程序的每一个模块都是应用程序的一种状态；一个ui-router状态state通常响应程序的一个特性;每个state都是一个定义了一个包含有一个状态被激活时的属性的JS对象：

• state状态的属性
  
  • name：状态的名称，用来提供路由导航的路由代号；
  • views ：路由导航后展示的内容；
  • url：路由导航后对应的url展示内容；
  • params：路由导航所必须的路由参数；
  • resolve：路由导航之后页面展示的内容所需要的相关参数，通常通过异步交互获取；
• 嵌套路由：
  
  • 应用程序的路由通常包含不同层级的导航方式；父级路由可以包含多个子级路由；
  • 子级路由状态state视图通常在父级模块视图渲染完成之后进行渲染；
  • 路由状态通常需要提供url、views但这都是可选的参数，

2.2 视图 views

概述：包括普通路由视图、嵌套路由视图、具名视图；

参考文章：
1 「前端」History API与浏览器历史堆栈管理;
2. 前端路由的两种实现方式;
3. 前端路由的两种实现原理;