首页 > 杂记 > 正文

一、前言

从早期的传统(Web)前端到当下的大前端,无论是iOS端还是Android端,路由管理这个概念,一直贯穿在应用(APP)开发的过程里。了解路由管理的形成与发展,可以帮助我们理解应用设计与开发,透析其中的技术原理,对于提升个人开发能力也是大有裨益。

QQ音乐技术团队(下称“团队”)汇聚了Web、Android、iOS、Flutter等平台的众多优秀人才,更在如MOO音乐、Q音探歌等项目上,进行了非常多的前沿技术实践,对于路由管理这个技术话题也是积累良多。

围绕页面栈,团队形成了一系列技术文章,对这一话题进行了精炼又不失深度地阐述,并将它们分享给开发者群体,希望能够帮助到更多开发同仁,共同繁荣应用开发。这一系列文章包括:

大前端开发中的路由管理之一:开篇【即本文】

大前端开发中的路由管理之二:Web篇

大前端开发中的路由管理之三:Android篇

大前端开发中的路由管理之四:iOS篇

大前端开发中的路由管理之五:Flutter篇

大前端开发中的路由管理之六:总结篇

二、历程

在大前端(包含前端,安卓,iOS)的开发语境里,我们经常会遇到“路由”这个概念。那么,到底什么是路由?

简单来说,路由就是URL到函数(页面)的映射。通常,我们把看到的一屏的内容叫做是一个页面,一个较复杂的完整应用(非Single-page application),由多个页面组成的。页面的前进后退则由一个栈保存管理,这个栈就叫页面栈。

1. 初始:服务端时代

早期的web开发很多是由后端人员来完成的,比如Web服务器(198.0.0.1)提供了两个页面index.html和about.html,那么我们可以在浏览器分别输入http://198.0.0.1/index.html、http://198.0.0.1/about.html来访问这两个页面。这时的路由指的是一个服务器搜索的功能。

传统页面访问

2. 进化:Ajax的出现

随着Ajax的出现,开发人员可以通过js脚本在浏览器端异步获取数据,再用数据来渲染一个页面,从而实现页面的变化。这样的好处在于,页面的变化不再需要重新打开一个新的浏览器窗口了,页面内容的加载也更流畅,体验更好。

此时,前端页面便由以前的多个html对应多个页面的模式,变为了一个html加载一个js文件实现页面变化的模式,这种模式便称为SPA(Single-page application 单页面应用)模式

3. 转变:前端路由

spa页面访问

现代前端框架都发展出了对应的路由实现,如vue-router、react-router。开发者把每个页面的逻辑打包成一个个独立的js模块,web端的路由便转变为对这些模块的映射,浏览器执行不同的模块从而展示不同的页面。前端web开发者从此接过后端人员的使命,开启了一个新的前端web时代。

4. 延伸:大前端新大陆

在广义“路由”的概念下,上面提到的路由只是Web路由,除此之外,还包含原生、跨端应用路由。二者在路由实现方案的主要区别在于,Web路由依托浏览器的导航。而原生、跨端应用需要将页面导航和路由映射一起实现,具体各个端在实现上会有一些差异,不过目标都是一致的,实现一个统一的路由管理中心去处理应用内的页面导航 。

5. 本质:路由管理的目标

上面的文字快速回顾了“路由”的发展历程,在不同的技术时期,它的概念和表现不尽相同,但透过技术演变,我们也看到路由的本质,进而,路由管理的目标也由此得出:

  1. 实现路由映射,绑定URL/URI和页面
  2. 实现统一的路由管理中心,维护页面的构建和导航

至此,我们了解到了路由管理的发展历程以及目标,那么,就请期待我们下一篇文章《大前端开发中的路由管理之二:Web篇》吧,下篇文章将为大家揭秘web端是如何去做路由管理的。

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。