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

最近切换到一个新项目,使用的技术栈是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的管理,提供forward/back等方法,屏蔽业务开发者对router的配置和访问。

在此基础上根据用户配置的viewname:controller映射,router={"view_index":"controller_index.js",...},在用户跳转view的时候直接调用forward指定目标viewname,application则可调用底层Backbone的router实现url切换,负责view的创建,对view进行入栈管理。

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

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

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

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

时间: 2024-10-09 03:55:42

WebApp中的页面生命周期及路由管理的相关文章

【微信小程序开发?系列文章六】生命周期和路由

这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程序开发•系列文章四]模块化 [微信小程序开发•系列文章五]主界面 [微信小程序开发•系列文章六]生命周期和路由 整个微信小程序从打开到关闭,整个过程可以分为很多阶段或者说状态,这一整段的过程,我们称之为小程序的生命周期.而周期中的每种不同的状态,到另一个状态的过度和转化,是需要一个触发机制的,这种机

ASP.NET页面生命周期与控件生命周期

ASP.NET页面生命周期 (1)PreInit 预初始化(2)Init 初始化(3)InitComplete 初始化完成(4)PreLoad 预加载(5)Load 加载(6)LoadComplete 加载完成(7)PreRender 预输出(8)PreRenderComplete 预输出完成(9)Unload 卸载 ASP.NET控件生命周期 -- 实例化(Instantiate) 控件被页面或另一个控件通过调用它的构造器所实例化.这个步骤之后所列出的阶段,仅当控件加入控件树中才会发生. --

【译】ASP.NET应用程序和页面生命周期

为何翻译此文 一.此文是Code Project社区2010年4月ASP.NET板块的最佳文章,说明了此文的份量: 二.锻炼自己的英文技术文章翻译能力,提高英文技术文档阅读能力: 三.了解掌握ASP.NET页面生命周期是非常必要的,这有助于我们更加灵活的控制页面,以我们需要的方式编程开发: 关于原文作者 原文作者:Shivprasad koirala 原文地址:http://www.codeproject.com/Articles/73728/ASP-NET-Application-and-Pa

ASP.NET Web 应用程序及页面生命周期

以客户端浏览器向 ASP.NET Web 应用程序页面发送请求(Request)为起点,以浏览器收到 Web 服务器的响应(Response)为终点,这一完整的过程被称为"应用程序及页面的生命周期". ASP.NET Web 页面生命周期开始之前发生了什么? 用户浏览器向 Web 服务器(IIS)发出资源的请求. Web 服务器收到请求,会根据请求文件的扩展名(如 .aspx..ascx..ashx..asmx),指定 ISAPI 扩展来处理该请求,这里提到的扩展名将会由 aspnet

ASP.NET学习笔记——webform页面生命周期

webform运行原理 运行原理相同点:aspx和ashx运行机制差不多. 运行原理不同点: 1.执行事件管道的时候,在7,8个事件之间创建的是前台页面类对象,那后台类是什么时候创建的呢?由于aspx前台页面继承自后台,所以创建前台页面类时,后台就创建好了. 2.在第11.12事件之间,调用存放在remapHandler中的前台页面类对象的processRequest方法,会进行复杂的处理,也就是走页面生命周期. webform页面生命周期 1.通过反编译,查看前台类代码 前台代码P01Inde

JSF控件的immediate属性和页面生命周期

JSF中的控件基本都有immediate属性,对于这个属性的使用总结如下,更详细内容可参考Oracle官方文档. 1,为了更好的理解immediate属性,先看一下JSF页面的生命周期: JSF页面的生命周期有六个,可参考下面的图:ADF页面是建立在JSF页面基础上的,它的生命周期包括JSF页面的六个生命周期外,还包括Init Context and Prepare Model.Validate Model Updates.Metadata Commit和Prepare Render几个阶段.J

Asp.Net请求原理and页面生命周期

前天去面试,让我说下生命周期,本来之前就了解过,但是没说出来,被深深的鄙视了;今天弄了一上午,现在发到这分享一下,有什么错误请各位大牛们指出~~ 昨天面试,又遇到这问题了...  然后说了半天,人家问我一用户控件的周期在哪执行,我想了半天,也没有想出来,回来只好再研究了.. 请求的本页面Page-Load->用户自定义控件Page-Load->本页面渲染之前Page-PreRender    这样一个顺序 页面发送请求原理 浏览器将请求封装成Http请求报文发送到服务器; 服务器端HTTP.S

ASP.NET应用程序生命周期趣谈(四) HttpHandler和页面生命周期

在之前的三篇文章中,我们还算简明扼要的学习了asp.net的整个生命周期,我们知道了一个Request进来以后先去ISAPI Filter,发现是asp.net程序后又ASPNET_ISAPI.dll这个ISAPI Extension来进行处理.在ASPNT_ISAPI创建了Worder Process后,在管道中经过HttpModule的处理来到HttpHander的手中. 我们知道P_Handler程序员使用“乾坤大挪移”对页面进行了处理后又通过管道中的HttpModule把response

asp.net页面生命周期之页面的终结阶段

处理过回发事件之后,页面便为浏览器生成输出做好了准备.呈现阶段分为两部分:预呈现和标记生成.预呈现这个子阶段有两个事件表征,分别为:预处理和投递处理. PreRender事件 通过处理该事件,页面和控件可以进行生成输出前的任何更改.页面会首先引发自己的PreRender事件,然后按递归方式引发所有的子控件.注意,这时的页面已确保其所有子控件都被创建.对于组合控件来说,该阶段尤为重要. PreRenderComplete事件 由于所有子控件的PreRender事件会以递归方式逐一被调用,因而页面设