CN102073686A - 一种页面文件的垂直动态加载方法及装置 - Google Patents
一种页面文件的垂直动态加载方法及装置 Download PDFInfo
- Publication number
- CN102073686A CN102073686A CN 201010603830 CN201010603830A CN102073686A CN 102073686 A CN102073686 A CN 102073686A CN 201010603830 CN201010603830 CN 201010603830 CN 201010603830 A CN201010603830 A CN 201010603830A CN 102073686 A CN102073686 A CN 102073686A
- Authority
- CN
- China
- Prior art keywords
- module
- pagefile
- dynamic loading
- javascript file
- vertical dynamic
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Stored Programmes (AREA)
Abstract
本发明涉及页面文件加载设计技术领域,具体公开了一种页面文件的垂直动态加载方法及装置。该页面文件的垂直动态加载方法包括步骤:将页面文件按照功能划分为多个模块;提取并优化页面文件运行的核心javascript文件;将核心javascript文件引入到页面文件首页中;设置核心javascript调用所述多个模块的初始化接口。本发明提供的页面文件的垂直动态加载方法和装置,可以提高页面响应速度,减少冗余请求,提高页面处理速度,优化网络访问,起到实现对页面进行动态控制的作用。
Description
技术领域
本发明涉及页面文件加载设计技术领域,特别涉及一种页面文件的垂直动态加载方法及装置。
背景技术
当前Ajax技术设计被大量使用于web2.0项目中,Ajax因为其能在不更新整个页面的前提下更新页面部分数据,这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上重复发送那些没有改变过的数据。彻底革新了以前传统的基于html的web应用程序设计,页面设计由JavaScript的设计OOP思想代替了html的设计思想。页面的存储由html等静态文件变成了js文件,通过ajax把以前一些服务器负担的工作转接到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,Ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。使用ajax开发页面,特别是在比较大型的一些产品或者项目中,因为功能的复杂和多样,那么程序实现的代码也会随之增长,必然会遇到需要加载很多js文件的情况。客户端在访问程序的时候,大量的资源文件会在程序初始化的时候引入。每个资源文件需要通过http协议进行传输,耗费一些重新连接的时间,特别是一些内容较多,文件体积比较大的文件,增加大量的http开销,所以会导致页面响应过慢、处理时间过长的情况。而对于有权限控制的模块,更是增加了无谓的资源开销。
发明内容
(一)要解决的技术问题
本发明要解决的技术问题是提供一种页面文件的垂直动态加载方法,克服目前在访问程序时,出现的页面响应较慢,处理时间过长,用户体验感不高等缺点。
(二)技术方案
为了解决上述问题,本发明一方面提供一种页面文件的垂直动态加载方法,包括以下步骤:
将页面文件按照功能划分为多个模块;
提取并优化页面文件运行的核心javascript文件;
将核心javascript文件引入到页面文件首页中;
设置所述核心javascript调用所述多个模块的初始化接口。
另一方面,本发明还提供一种页面文件的垂直动态加载装置,包括:
划分模块,用于将页面文件按照功能划分为多个模块;
提取模块,用于提取并优化页面文件运行的核心javascript文件;
引入模块,用于将核心javascript文件引入到页面文件首页中;
设置模块,用于设置所述核心javascript调用所述多个模块的初始化接口。
(三)有益效果
本发明具有以下优点:本发明提供的页面文件的垂直动态加载方法和装置,可以提高页面响应速度,减少冗余请求,提高页面处理速度,优化网络访问,起到实现对页面进行动态控制的作用。
附图说明
图1是本发明实施例页面文件的垂直动态加载方法流程图;
图2是本发明实施例页面文件的垂直动态加载装置结构示意图。
具体实施方式
下面结合附图和实施例,对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明,但不用来限制本发明的范围。
如图1所示,本发明实施例页面文件的垂直动态加载方法具体包括如下步骤:
步骤S1,将页面文件按照功能划分为多个模块,提取多个模块共有的页面功能、实现函数或界面控件,并将提取后的页面功能、实现函数或界面控件单独存放。
具体为:模块划分原则是由需求分析员根据用户需求,编写出软件需求分析文档,项目经理和系统架构师根据软件需求分析文档整理出软件概要设计文档,概要设计文档中体现出功能模块的划分关系,功能模块根据用户的需求不同而不同。例如在普通的管理系统中,根据用户的需求可以划分为用户管理模块、系统管理模块、业务管理模块等。研发人员根据概要设计文档编写详细设计文档,在详细设计文档中详细描述每个功能模块所需的交互界面、界面实现的功能函数、界面所需控件、数据交互接口等。在界面设计中,提取多个模块共有的页面功能、实现函数或界面控件,并将提取后的页面功能、实现函数或界面控件单独存放。统一交互接口的前提下设计出可以共用的解决方案,减少重复性的功能设计。
该步骤中还包括标识javascript文件,模块与其存放的javascript文件一一对应。具体为:将功能模块运行所需代码编写到单独的javascript文件中,对每个javascript文件做好编号标记,分模块存放javascript文件,每个文件只实现该模块相关的功能。当模块功能过于复杂,其要求代码也随之庞大。若模块中存放的javascript文件大于50K时,将模块按照子功能进行二次拆分,拆分成多个子模块,每个子模块存放的javascript文件不大于50K,并标识该子模块中的javascript文件。
步骤S2,提取并优化页面文件的核心javascript文件。
具体实践设计中如果使用了一些开源的Javascript框架,如Ext,那么则必须优先优化调用ExtAll.js、ExtBase.js文件;如果使用Jquery框架,就必须优化调用Jquery.js文件。无论Ext、Jquery或其他自行设计的框架,都是基于javascript语言的设计的,该核心javascript文件,即是程序运行所需的基础类库。
步骤S3,将核心javascript文件引入到页面文件首页中。
步骤S4,设置核心javascript文件调用多个模块的初始化接口,同时设置模块调用子模块的回调接口。模块的初始化接口具有ajax文件动态引入。
当客户访问页面文件时,每次先调用核心javascript文件,通过识别javascript文件的标识来调用所需功能模块的初始化接口,对于不需要在初始化接口处理的功能模块,则存放在拆分的子模块中,拆分的子模块设置自身的初始化接口,如有需要时,模块文件将通过回调接口去调用拆分后的子模块。拆分可依据该功能模块是否需要立即初始化,还是由用户选择性的触发才初始化。
如图2所示,本发明实施例页面文件的垂直动态加载装置具体包括:
划分模块1,用于将页面文件按照功能划分为多个模块;
提取模块2,用于提取并优化页面文件运行的核心javascript文件;
引入模块3,用于将核心javascript文件引入到页面文件首页中中;
设置模块4,用于设置所述核心javascript调用所述多个模块的初始化接口。
标识模块5,用于标识javascript文件,模块与其存放的javascript文件一一对应;或者,用于标识子模块中存放的javascript文件。
拆分模块6,若模块中存放的javascript文件大于50K时,拆分模块将模块按照子功能拆分成多个子模块。
其中,提取模块2包括提取子模块21,用于提取多个模块共有的页面功能、实现函数或界面控件;设置模块4包括设置子模块41,用于设置模块调用子模块的回调接口。
本发明提供的页面文件的垂直动态加载方法和装置,可以提高页面响应速度,减少冗余请求,提高页面处理速度,优化网络访问,起到实现对页面进行动态控制的作用。
以上实施方式仅用于说明本发明,而并非对本发明的限制,有关技术领域的普通技术人员,在不脱离本发明的精神和范围的情况下,还可以做出各种变化和变型,因此所有等同的技术方案也属于本发明的范畴,本发明的专利保护范围应由权利要求限定。
Claims (10)
1.一种页面文件的垂直动态加载方法,其特征在于,包括以下步骤:
将页面文件按照功能划分为多个模块;
提取并优化页面文件运行的核心javascript文件;
将核心javascript文件引入到页面文件首页中;
设置所述核心javascript调用所述多个模块的初始化接口。
2.如权利要求1所述的页面文件的垂直动态加载方法,其特征在于,还包括:
提取所述多个模块共有的页面、实现函数或界面控件,并将所述提取后的页面、实现函数或界面控件单独存放。
3.权利要求1所述的页面文件的垂直动态加载方法,其特征在于,
将所述多个模块各自所需的运行代码编写到单独的javascript文件中;
标识javascript文件,所述模块与其存放的javascript文件一一对应。
4.如权利要求3所述的页面文件的垂直动态加载方法,其特征在于,
若所述模块中存放的javascript文件大于50K时,将所述模块按照子功能拆分成多个子模块,并标识所述子模块中的javascript文件。
5.如权利要求4所述的页面文件的垂直动态加载方法,其特征在于,设置模块调用子模块的回调接口。
6.如权利要求1所述的页面文件的垂直动态加载方法,其特征在于,所述模块的初始化接口具有ajax文件动态引入。
7.一种页面文件的垂直动态加载装置,其特征在于,包括:
划分模块,用于将页面文件按照功能划分为多个模块;
提取模块,用于提取并优化页面文件运行的核心javascript文件;
引入模块,用于将核心javascript文件引入到页面文件首页中;
设置模块,用于设置所述核心javascript调用所述多个模块的初始化接口。
8.如权利要求7所述的页面文件的垂直动态加载装置,其特征在于,
所述提取模块包括提取子模块,所述提取子模块用于提取所述多个模块共有的页面、实现函数或界面控件;
所述设置模块包括设置子模块,所述设置子模块用于设置模块调用子模块的回调接口。
9.如权利要求7所述的页面文件的垂直动态加载装置,其特征在于,还包括标识模块,用于标识javascript文件,所述模块与其存放的javascript文件一一对应;
或者,用于标识子模块中存放的javascript文件。
10.如权利要求7所述的页面文件的垂直动态加载装置,其特征在于,还包括:
拆分模块,若所述模块中存放的javascript文件大于50K时,所述拆分模块将所述模块按照子功能拆分成多个子模块。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN 201010603830 CN102073686A (zh) | 2010-12-24 | 2010-12-24 | 一种页面文件的垂直动态加载方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN 201010603830 CN102073686A (zh) | 2010-12-24 | 2010-12-24 | 一种页面文件的垂直动态加载方法及装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN102073686A true CN102073686A (zh) | 2011-05-25 |
Family
ID=44032225
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN 201010603830 Pending CN102073686A (zh) | 2010-12-24 | 2010-12-24 | 一种页面文件的垂直动态加载方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102073686A (zh) |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102929599A (zh) * | 2012-09-26 | 2013-02-13 | 广州市动景计算机科技有限公司 | 移动终端浏览器界面的修改方法及装置、移动终端 |
CN103440151A (zh) * | 2013-09-05 | 2013-12-11 | 北京京东尚科信息技术有限公司 | 一种动态加载Web页面的方法和装置 |
CN106156352A (zh) * | 2016-07-26 | 2016-11-23 | 北京分形科技有限公司 | 可视化内容管理方法和系统 |
CN108170493A (zh) * | 2017-12-27 | 2018-06-15 | 广州安食通信息科技有限公司 | 一种系统模块的加载方法、系统及装置 |
CN109240756A (zh) * | 2018-07-06 | 2019-01-18 | 沈文策 | 一种动态加载JavaScript模块的方法及装置 |
CN109658250A (zh) * | 2018-12-29 | 2019-04-19 | 深圳源中瑞科技有限公司 | 一种基于网页的股票交易k线处理方法和存储介质 |
CN110704055A (zh) * | 2019-09-06 | 2020-01-17 | 北京三快在线科技有限公司 | 接口前置的优化方法、装置、电子设备及存储介质 |
CN111857855A (zh) * | 2019-04-01 | 2020-10-30 | 苏宁易购集团股份有限公司 | 一种网页加载方法及其装置、智能设备 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1835507A (zh) * | 2005-03-17 | 2006-09-20 | 国际商业机器公司 | 用于用户与web浏览器交互的服务器端处理的方法与系统 |
CN101122921A (zh) * | 2007-09-21 | 2008-02-13 | 北京意科通信技术有限责任公司 | 基于ajax与html标记形成树形显示结构的方法 |
-
2010
- 2010-12-24 CN CN 201010603830 patent/CN102073686A/zh active Pending
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1835507A (zh) * | 2005-03-17 | 2006-09-20 | 国际商业机器公司 | 用于用户与web浏览器交互的服务器端处理的方法与系统 |
CN101122921A (zh) * | 2007-09-21 | 2008-02-13 | 北京意科通信技术有限责任公司 | 基于ajax与html标记形成树形显示结构的方法 |
Cited By (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102929599A (zh) * | 2012-09-26 | 2013-02-13 | 广州市动景计算机科技有限公司 | 移动终端浏览器界面的修改方法及装置、移动终端 |
CN102929599B (zh) * | 2012-09-26 | 2015-12-02 | 广州市动景计算机科技有限公司 | 移动终端浏览器界面的修改方法及装置、移动终端 |
CN103440151A (zh) * | 2013-09-05 | 2013-12-11 | 北京京东尚科信息技术有限公司 | 一种动态加载Web页面的方法和装置 |
CN106156352A (zh) * | 2016-07-26 | 2016-11-23 | 北京分形科技有限公司 | 可视化内容管理方法和系统 |
CN108170493A (zh) * | 2017-12-27 | 2018-06-15 | 广州安食通信息科技有限公司 | 一种系统模块的加载方法、系统及装置 |
CN108170493B (zh) * | 2017-12-27 | 2021-01-26 | 广州安食通信息科技有限公司 | 一种系统模块的加载方法、系统及装置 |
CN109240756A (zh) * | 2018-07-06 | 2019-01-18 | 沈文策 | 一种动态加载JavaScript模块的方法及装置 |
CN109658250A (zh) * | 2018-12-29 | 2019-04-19 | 深圳源中瑞科技有限公司 | 一种基于网页的股票交易k线处理方法和存储介质 |
CN109658250B (zh) * | 2018-12-29 | 2021-11-12 | 深圳源中瑞科技有限公司 | 一种基于网页的股票交易k线处理方法和存储介质 |
CN111857855A (zh) * | 2019-04-01 | 2020-10-30 | 苏宁易购集团股份有限公司 | 一种网页加载方法及其装置、智能设备 |
CN111857855B (zh) * | 2019-04-01 | 2021-10-29 | 南京星云数字技术有限公司 | 一种网页加载方法及其装置、智能设备 |
CN110704055A (zh) * | 2019-09-06 | 2020-01-17 | 北京三快在线科技有限公司 | 接口前置的优化方法、装置、电子设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN102073686A (zh) | 一种页面文件的垂直动态加载方法及装置 | |
CN102638566B (zh) | 一种基于云存储的blog系统运行方法 | |
CN111324610A (zh) | 一种数据同步的方法及装置 | |
CN102254021A (zh) | 基于虚拟机管理系统的数据库构建方法 | |
CN110851237A (zh) | 一种面向国产平台的容器跨异构集群重构方法 | |
CN102243559A (zh) | 一种用图形界面进行媒体资产管理的方法及系统 | |
CN102999364B (zh) | 一种基于电网运行监视主题分类和动态加载的方法及设备 | |
CN102982161A (zh) | 网页信息的获取方法和装置 | |
CN103177045A (zh) | 文本解析方法及装置 | |
CN102567399B (zh) | 一种访问数据库的方法和装置 | |
CN103905472A (zh) | 一种通过网页方式访问的云存储方法和系统 | |
CN104320482A (zh) | 一种银行柜员前端系统 | |
CN101860734B (zh) | 一种ajax实现动态图像增量传输与显示的方法 | |
CN103309728A (zh) | 异步请求处理方法和设备 | |
CN103823818A (zh) | 一种基于虚拟现实的图书系统 | |
CN101246420A (zh) | 多语言系统实现统一开发的方法及系统 | |
CN102479185A (zh) | 一种通过服务器端控制软件语言版本的方法 | |
CN110069248A (zh) | 接口数据的调用方法、装置、设备及计算机可读存储介质 | |
CN101382888A (zh) | 一种处理国际化资源的方法及系统 | |
CN114169303A (zh) | 基于vue.js的表格编辑方法、装置、设备及介质 | |
CN103618758A (zh) | Web服务器及其系统资源访问控制方法 | |
CN101533409B (zh) | 一种网络浏览器系统和控制方法 | |
CN103745399A (zh) | 拍卖处理系统及方法 | |
CN106302125A (zh) | 一种对请求信息进行响应的方法、装置及系统 | |
CN101324885A (zh) | 一种可在软件界面上自定义标识信息的装置和方法 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
C12 | Rejection of a patent application after its publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20110525 |