WebApp中的页面生命周期及路由管理

时间:2022-08-11 10:56:53

最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在其中尽显无遗。

说说自己对Backbone优缺点的看法。

Backbone确实是优秀的单页MVC框架,Events自定义事件机制,为Model/View/Colllection提供基础模块通信,Aync模块封装了CRUD的ajax操作,Router/History为开发者提供了路由机制,从很大程度上解决了开发者自己写路由跳转的逻辑。

当然也存在缺陷,面对大型webapp项目,以page为单位的view数量增多时,一方面路由过于集中,路由逻辑变得复杂,甚至有大量对"职责分离"原则缺乏认识的同学会在router中写入大量的业务逻辑,另一方面缺少对view的统一管理,如view的创建、切换、销毁、跳转回退等。

为了弥补Backbone在webapp中的缺陷,可以为其提供页面生命周期管理和路由管理机制。

先来说webapp生命周期管理。

别被生命周期这种大概念吓住了,生命周期就是页面从创建到销毁的一个抽象过程,如果能抽象的好,可以为页面内部的业务逻辑提供良好的管理。

熟悉android activity的同学可以看到在android framework为activity提供相当完美的生命周期,从onCreate到onShow到onHide到onDestroy,开发者只需要在生命周期回调函数中填写相应的业务代码即可。

(注:可以把android的activity当做一个page)

那么我们学习activity是否可以为page(把一个全屏view当成一个page,view即page)提供这种机制,在page被插入到dom节点(viewport)时提供onCreate回调,在page被显示出来时提供onShow回调,以此类推,page还能提供onHide/onDestroy回调。这样前端写业务的同学是不是能更好的专注业务逻辑,无须考虑页面是如何创建销毁,不会导致框架级代码和业务代码混合在一起。

除了对page提供生命周期,我们还可以学习android framework中activity的管理对整个webapp进行管理。

在android应用启动时,会启动全局application,并为activity准备好运行环境,虽然这在基础的android demo上并未可见,是因为android提供了默认的application。

我们在创建webapp的时候,也能提供一个全局的application,为application也提供生命周期,如onCreate/onDestroy等。如webapp在启动时初始化application,等到依赖的框架资源加载完成时,触发onCreate回调,这时默认的第一个page则可以开始创建并显示。

在application的环境下,我们还能提供对view的管理,建立类似activity task/stack的机制。

在android第一个activity启动时,会建立一个默认的stack,将该activity放入其中,每一个activity在stack中被称为一个task,这样在用户回退时可根据stack中的task来自动选择回退,而不需要指定跳转的目标activity。

有了task/stack管理机制,针对webapp也能提供对view的管理。在创建application的时候提供一个stack,当显示一个view的时候将该view作为一个task压入stack中,在页面返回管理时则变得与android activity一样简单。

除此之外,我们还能挖掘activity的高级特性,如standard,singleTop,singleTask,singleInstance,这样可以为view提供很多丰富的特性。

默认standard即创建一个view,将其压入stack,返回时弹出stack;singleTop方式可指定view显示时在stack顶层不能出现两个同样的view;

singleTask模式则不允许一个stack中出现两个同样的view,比如某些特殊的公共页面可指定这种方式;singleInstance则是单独为该view创建一个stack,这种模式在webapp中暂时少见。

有了以上对view生命周期的管理、application生命周期的管理、application对view stack的管理,我们就能解决Backbone对view管理的不足。

接着说webapp的路由与返回管理。

Backbone提供的路由机制适用于小型的单页应用,如果不对其进行管理则会变得混乱。

我们根据以上application对view的管理,为view封装一个生命周期基类Page,其中包括forward/back等方法,并提供一个对应的PageManager,屏蔽业务开发者对router的直接访问。

根据用户配置的hash:view映射,在用户跳转view的时候直接调用forward指定目标viewname(hash),Page则可调用底层Backbone的router实现url切换,负责view的创建,并且可以通过PageManager将view进行入栈管理,保存view的状态。

而webapp中页面的返回管理,则可以在back中根据PageManager中的stack信息实现页面的默认跳转、指定页面跳转等。

默认跳转则是按照stack出栈顺序返回,指定跳转则可以回到栈中的某一view,并可以指定是将view新建一个置顶到stack top,还是将该view以上的其他view全部销毁。

这只是其中的两个简单返回机制,更多的返回可以通过抽象业务场景来设计。

以上的两点可以解决在构建webapp时遇到的通用问题,不管view/router是否使用Backbone,都能建立一个良好的webapp框架。