动态页面渲染方法及装置.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN106991096A(43)申请公布日2017.07.28(21)申请号201610041871.7(22)申请日2016.01.21(71)申请人阿里巴巴集团控股有限公司地址英属开曼群岛大开曼资本大厦一座四层847号邮箱(72)发明人李正林王劲(74)专利代理机构北京润泽恒知识产权代理有限公司11319代理人苏培华(51)Int.Cl.G06F17/30(2006.01)G06F9/44(2006.01)权利要求书3页说明书8页附图3页(54)发明名称动态页面渲染方法及装置(57)摘要本申请实施例公开了动态页面渲染方法及装置，该方法包括：提供类库，所述类库中包括渲染器抽象基类以及显示类；所述渲染器抽象基类提供多个调用接口；所述显示类定义各类型显示对象的属性及渲染方法，所述渲染方法通过所述渲染器抽象基类的各个调用接口进行定义，以便通过对所述显示类进行实例化的方式进行动态界面的编辑；在目标浏览器中展示所述动态页面时，通过执行所述动态页面中注入的脚本确定所述目标浏览器的类型，并通过对对应的渲染器子类进行实例化，创建对应的目标渲染器；遍历所述动态页面的显示结构树，通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理。通过本申请实施例，能提高开发效率，节省系统存储资源。CN106991096ACN106991096A权利要求书1/3页1.一种动态页面渲染方法，其特征在于，包括：提供类库，所述类库中包括渲染器抽象基类以及显示类；所述渲染器抽象基类提供多个调用接口，通过继承该渲染器抽象基类提供多个渲染器子类，不同的渲染器子类对应不同的浏览器类型，在渲染器子类内部，根据对应浏览器类型对显示对象的渲染方式，实现各个调用接口的处理逻辑；所述显示类定义各类型显示对象的属性及渲染方法，所述渲染方法通过所述渲染器抽象基类的各个调用接口进行定义，以便通过对所述显示类进行实例化的方式进行动态界面的编辑；在目标浏览器中展示所述动态页面时，通过执行所述动态页面中注入的脚本确定所述目标浏览器的类型，并通过对对应的渲染器子类进行实例化，创建对应的目标渲染器；遍历所述动态页面的显示结构树，通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理。2.根据权利要求1所述的方法，其特征在于，所述调用接口包括以下接口中的一个或多个：开始绘图接口、绘图位移转换接口、绘图接口、绘图结束接口。3.根据权利要求2所述的方法，其特征在于，所述渲染器子类包括适用于第一类浏览器的第一渲染器子类，所述第一类浏览器基于flash进行显示对象的渲染，所述通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理，包括：加载flash播放器；通过所述开始绘图接口调用所述flash播放器的第一预置接口生成flash元素；通过所述绘图位移转换接口设置所述flash元素的属性，以便对当前的处理对象进行变换；通过所述绘图接口调用flash播放器最外层容器的第二预置接口显示所述当前处理对象。4.根据权利要求2所述的方法，其特征在于，所述渲染器子类包括适用于第二类浏览器的第二渲染器子类，所述第二类浏览器基于div标签进行显示对象的渲染，所述通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理，包括：通过所述开始绘图接口调用第三预置接口，生成div标签；通过所述绘图位移转换接口调用所述div标签的第四预置接口，以便对当前的处理对象进行变换；通过所述绘图接口调用div标签的第五预置接口将div标签添加到页面上进行显示。5.根据权利要求2所述的方法，其特征在于，所述渲染器子类包括适用于第三类浏览器的第三渲染器子类，所述第三类浏览器基于Canvas标签进行显示对象的渲染，所述通过所述目标渲染器对所述显示结构树中的各个显示对象进行渲染处理，包括：通过所述开始绘图接口调用Canvas的第六预置接口，以便存储环境数据；通过所述绘图位移转换接口调用Canvas的第七预置接口，以便对当前的处理对象进行变换；通过所述绘图接口调用Canvas的第八预置接口对所述处理对象进行绘图；通过所述绘图结束接口调用Canvas的第九预置接口，以便恢复环境数据。6.根据权利要求1至5任一项所述的方法，其特征在于，所述显示类包括显示对象类以及容器类，利用所述调用接口对显示对象类或者容器类进行显示方式的定义。2CN106991096A权利要求书2/3页7.根据权利要求6所述的方法，其特征在于，所述容器类包括舞台类，所述舞台为页面的最外层容器，所述方法还包括：执行所述动态页面中注入的脚本生成所述动态页面的舞台；将所述生成的目标渲染器注入到所述舞台，以便通过调用所述舞台的预置方法，执行所述遍历所述动态页面的显示结构树的操作。8.根据权利要求