原创《基于路由模式的前端框架设计和改进》：这篇前端论文范文为免费优秀学术论文范文,可用于相关写作参考。
摘 要：现今软件开发中对前端开发的重视度越来越高,要求自然也不断提高.当前流行的前端框架层出不穷,其中单页的应用在整个前端开发中占有绝对优势,而单页面的路由选择问题是困扰不少开发人员的一大难题,自从有了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 JaScript 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组件
3 设计与改进
3.1分析
前端路由的实现其实很简单.本质上就是检测 Url 的变化,截获 Url 地址,然后解析来匹配路由规则.现今流行的前端框架都有自己适合的路由选择机制,如angular的angular-route.js,React的路由库React-Router,以及Vue的Vue-Router库,但以上路由的集成都需要引入大量的js文件以及一定量的配置文件.通过框架引入的路由在使用中需要先学框架的使用方法,在去理解路由的使用,因此会带来一定量的学习成本.由此本文提出一个简单便捷的路由选择方法,同时配合回退机制.
前端论文参考资料：
结论：基于路由模式的前端框架设计和改进为关于对不知道怎么写前端论文范文课题研究的大学硕士、相关本科毕业论文前端论文开题报告范文和文献综述及职称论文的作为参考文献资料下载。
