基于路由模式的前端框架设计与改进

陈辰 王萌 程旭

摘要：现今软件开发中对前端开发的重视度越来越高，要求自然也不断提高。当前流行的前端框架层出不穷，其中单页的应用在整个前端开发中占有绝对优势，而单页面的路由选择问题是困扰不少开发人员的一大难题，自从有了Ajax的引入减少了很多开发中的问题，但是在实际项目开发中，Ajax的使用仍不能满足项目需求。该文针对前端路由中Ajax的使用回退功能进行改动，以更好地应用于项目开发。

关键词：前端；路由；Ajax

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）12-0053-02

1 概述

Web开发中，路由是不可或缺的一部分。浏览器中当前的URL发生变化时，路由系统就会做出响应，来保证当前显示界面与URL相一致[1]。随着网络技术的发展，单页应用（SPA）成为前端应用的主流形式，而为之提供服务的前端路由系统也随之诞生，并且出现了一些独立的第三方路由系统。

同时，随着软硬件技术水平的大幅提升，人们对Web应用的性能也有了更高的要求，需要系统提供更快的响应速度。后端路由进行页面跳转是通过后端的配置文件进行服务器的访问判读跳转页面的位置进行页面刷新跳转。

其中页面可以是服务端获取数据后和模板组合生成HTM再返回，也可以是后端直接返回HTML模板，然后由前端的js请求数据后，再与模板组合生成HTML。而这两种方式都会使得响应速度变慢，不能很好地满足用户体验。

为了解决SPA应用无刷新的视图切换，各大主流框架都有自己的路由模块，并且解决了网页加载和展现速度，用户体验的问题，实现了SPA应用页面局部加载，也是基于前后端分离方便开发。但它们同样没有完全解决路由使用中的问题，例如前进后退时跳转，缓存应用，模块渲染等等问题。

本文通过对Ajax单页面路由跳转处理增加回退功能，单页面刷新不跳转，通过Url链接访问具体页面。从以上几方面提高用户体验和页面访问速度等。

2 背景

路由这个概念最先是后端出现的，前端路由的出现要从Ajax开始。Ajax，全称 Asynchronous JavaScript And XML，是浏览器用来实现异步加载的一种技术方案。在九十年代初，大多数的网页都是直接返回 HTML ，用户的每次更新操作都需要重新刷新页面。极其影响交互体验，随着网络的发展，迫切需要一种方案来改善这种情况。

1996，微软首先提出 iframe 标签，iframe 带来了异步加载和请求元素的概念，随后在 1998 年，微软的 Outloook Web App 团队提出Ajax的基本概念（XMLHttpRequest的前身），并在 IE5 通过 ActiveX 来实现了这项技术。在微软实现这个概念后，其他浏览器比如 Mozilia，Safari，Opera 相继以 XMLHttpRequest 来实现 Ajax， 兼容问题从此出现，不过在 IE7 发布时，微软选择了妥协，兼容了 XMLHttpRequest 的实现。

有了 Ajax 后，用户交互就不用每次都刷新页面，体验带来了极大的提升。

但真正让这项技术发扬光大的，还是后来的 Google Map，它的出现向人们展现了 Ajax 的真正魅力，释放了众多开发人员的想象力，让其不仅仅局限于简单的数据和页面交互，也为后来异步交互体验方式的繁荣发展带来了根基。

而异步交互体验的更高级版本就是 SPA—— 单页应用。单页应用不仅在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。

单页应用的概念是伴随着 MVVM 出现的。最早由微软提出，然后他们在浏览器端用 `Knockoutjs` 實现。但这项技术的强大之处并未当时的开发者体会到，可能是因为 `Knockoutjs` 实现过于复杂，导致没有大面积的扩散。

同样，这次接力的选手依然是 Google。Google 通过 Angularjs 将 MVVM 及单页应用发扬光大，让前端开发者能够开发出更加大型的应用，职能变得更大了。随后前端圈开始得到了爆发式的发展，陆续出现了很多优秀的框架。

例如Angularjs的ngRoute、React的React-router和Vue的Vue-Router。Angular通过ngroute模块提供了视图的切换，将路由、视图和控制器很好的对应了起来[2]。AngularJS 路由允许我们通过不同的URL 访问不同的内容[3]。当Url请求时，根据路由配置文件的内容匹配Url对应内容，通过模板讲内容插入到ng-view中去。从一定意义上来说，AngularJS的路由更加倾向通过改变Url来进行页面的局部刷新。Vue官方提供的路由插件Vue-Router，它是集成在Vue.js中适合单页面开发应用，Vue是基于路由和组件的单页面使用，通过路由的设定访问路径，并将路径和组件映射起来[4]。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在单页面使用中，vue路由库是通过路径间的转换，也可以说通过组件间的转换来完成跳转的。React-Router是ReactJs的一个应用组件，是一个很强大的路由库，它通过定义ReactJS组件及相关子组件来实现页面路由的映射、参数的解析和传递。通过简单的API就可以实现代码懒加载，动态路由匹配，路径过渡处理等几大特性。是对ngroute和Vue-Router的一大改进。

3 设计与改进

3.1分析

前端路由的实现其实很简单。本质上就是检测 Url 的变化，截获 Url 地址，然后解析来匹配路由规则。现今流行的前端框架都有自己适合的路由选择机制，如angular的angular-route.js，React的路由库React-Router，以及Vue的Vue-Router库，但以上路由的集成都需要引入大量的js文件以及一定量的配置文件。通过框架引入的路由在使用中需要先学框架的使用方法，在去理解路由的使用，因此会带来一定量的学习成本。由此本文提出一个简单便捷的路由选择方法，同时配合回退机制。

其中AngularJS路由原理：当点击链接后，只改变Url/#/后面的部分再次访问该页面，因为服务器自动忽略了#后面的内容，所以当前页面不会跳转，此时页面加载时，通过监听相关事件的改变，来加载不同的页面代码最终实现前端路由。

实现方式：

angular.module（'routingDemoApp'，['ngRoute']） //包含了ngRoute模块实现路由功能

.config（['$routeProvider'， function（$routeProvider）{

$routeProvider //通过configAPI把$routeProvider注入到

.when（'/'，{templateUrl：'home.html'}） //配置函数中来定义路由规则。

.when（'/a'，{templateUrl：'a.html'}）

.when（'/b'，{templateUrl：'b.html'}）

.when（'/c'，{templateUrl：'c.html'}）

.otherwise（{template：'404.html'}）；

}]）；

vue路由机制

var http = require（"http"）； //首先调用http模块和url模块并且实例化赋值给变量

var url = require（"url"）；

function start（route） { // route是router.js中的路由处理函数

function onRequest（request， response） {

var pathname = url.parse（request.url）.pathname //获取url字符串

var content = route（pathname）； //传递给route函数url路径，返回得到对象content

response.writeHead（content.status，{"Content-Type"："text/html"}）；

response.write（content.text）； //将获取到的代码写入到页面

response.end（）；

}

http.createServer（onRequest）.listen（8011）； 创建服务器在8888端口监听

console.log（"Server has started."）；

}

exports.start = start；

3.2设计

Vue作为一套渐进式MVVM框架深度集成了Vue-Router这款路由插件。首先我们需要了解，在传统的页面应用中，如果想要实现页面的切换与跳转，只能通过超链接的方式来实现。但是在Vue-Router这款Vue官方的路由管理工具中，却可以通过在路径之间进行切换，即对组件进行切换来实现这一功能。同时，通过标签对页面组件进行动态的挂载，能够最终渲染成页面。在Vue-Router的帮助下，我们可以轻松解决页面切换的问题。

对于一个单页面应用来说，通过普通的Vue.js我们可以创建大量的组件（components），然后将它们映射到路由（router），并告诉Vue-Router在什么样的地方应该渲染他们。我们可以简单地来查看这个例子：

3.3改进

改进ajax实现的前端路由。原理：首先通过调用ajax获取页面html代码，再清空对应容器，然后将Dom部署到容器内。主要适用于页面部分的替换（如保留导航条，侧边栏、底部、菜单栏等），通过将不同页面的代码放置于不同html文件中，配合ajax监听点击事件触发页面的变化来实现前端路由。

$.ajax（{

type："GET"，

url： addr+"adcda.html"，

success：function（data）{

$（"#adc"）.html（""）； //清空容器

$（"#adc"）.html（data）；//填充容器

}

}）

通过项目应用后的实践改进，在ajax跳转地方同时加入“#”锚点的使用，Url链接中加入锚点并不影响页面跳转，同时支持无刷新的页面跳转使用。这样可以更好支撑单页的跳转使用，同时在页面回退的时候可以找到想要的页面，不会因为单页的跳转Url的固定而回退到首页或登录页。这种加入锚点的页面路由配置更加符合实际项目开发的需求。

var geturl = function （url，id） {

id = id || 'mainContents'；

$.ajax（{

type： "GET"，

url： url，

success： function （data） {

$（"#" + id）.html（data）；

mcurl = url；

window.location.hash=url；

}

}）；

}

window.onhashchange=hashChange；

function hashChange（）{

var loc = location.hash；

if（loc ！= mcurl）{

geturl（loc.replace（'#'，''），''）；

}

}

4 总结

Ajax的使用是实现路由跳转原理最基础的方法，本文通过Ajax无刷新的页面跳转，并借鉴现有的流行框架路由跳转的一些方式方法，改进了Ajax页面跳转的方式，增加部分功能从而实现页面的无刷新，可后退的单页面应用。对Ajax的改进这样检查减少开发人员对其他框架的学习成本，因为路由的使用在开发中使用可以提高效率。

参考文献：

[1] 范洪春.深入理解react-router路由系统[EB/OL].知乎：[2018.03.23]. https：//zhuanlan.zhihu.com/p/20381597.

[2] GAMELOFT9. AngularJs路由：ngRoute[EB/OL].CSDN：[2018.03.24]. https：//blog.csdn.net/gameloft9/article/details/50963466.

[3] ljxbbss.angularjs：路由设置[J/OL].CSDN：[2018.3.23]. https：//blog.csdn.net/ljxbbss/article/details/77854048.

[4] keepfool. Vue.js——60分鐘快速入门[EB/OL].博客园：[2018.03.23]. http：//www.cnblogs.com/keepfool/p/5619070.html.