CN106951271A - 一种基于JavaScript的模块加载方法及系统 - Google Patents

一种基于JavaScript的模块加载方法及系统 Download PDF

Info

Publication number
CN106951271A
CN106951271A CN201710253670.8A CN201710253670A CN106951271A CN 106951271 A CN106951271 A CN 106951271A CN 201710253670 A CN201710253670 A CN 201710253670A CN 106951271 A CN106951271 A CN 106951271A
Authority
CN
China
Prior art keywords
html
module
modules
loaded
loading
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
Application number
CN201710253670.8A
Other languages
English (en)
Inventor
罗国俊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Si Tech Information Technology Co Ltd
Original Assignee
Beijing Si Tech Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Si Tech Information Technology Co Ltd filed Critical Beijing Si Tech Information Technology Co Ltd
Priority to CN201710253670.8A priority Critical patent/CN106951271A/zh
Publication of CN106951271A publication Critical patent/CN106951271A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及一种基于JavaScript的模块加载方法及系统，包括以下步骤：获取多个html模块和多个html模块之间的组合信息，作为配置数据存储在配置文件中；通过JavaScript代码调用加载函数，从配置文件中读取所述配置数据；根据所述配置数据，对多个所述html模块进行循环加载，分别得到每个html模块的待加载文件；从所述待加载文件中提取待加载内容和元素区域的位置信息；将所述待加载内容渲染到与所述位置信息对应的元素区域。本发明提供的一种基于JavaScript的模块加载方法，具有代码的可读性好、可维护性高、复用度高等优点，并且在开发过程中，以模块的方式编写html，具有不会因拼接符号缺失而出错的优点。

Description

一种基于JavaScript的模块加载方法及系统
技术领域
本发明涉及前端开发领域，尤其涉及一种基于JavaScript的模块加载方法及系统。
背景技术
当人们使用互联网浏览网页时，在网页中显示的内容均来源于html页面代码，在当前互联网环境下，网页中需要显示的内容越来越多，用户对体验的要求也越来越高，而html页面的加载速度是用户体验中最重要的一环，为了提高加载速度，以往将所有代码写在一个html文件中的方法已经无法满足需求。
因此，现有前端开发技术趋向于模块化，将需要实现的功能代码封装在不同的文件中，按需动态加载，但是现有的动态加载技术，都是通过在JavaScript中拼接html字符串或通过后端服务返回html字符串实现，这两种方法具有以下缺点：
1)拼接的html字符串无法直接体现网络节点的层次结构，导致代码的可读性差；
2)拼接的html字符串无法表达完整的功能含义，只是以变量的方式存在，导致代码的可维护性低；
3)拼接的html字符串没有抽象成具备独立功能的模块，导致代码的复用度低；
4)在开发过程中，极易因拼接符号缺失而出错。
发明内容
本发明所要解决的技术问题是针对现有动态加载技术具有代码可读性差、可维护性低、复用度低以及开发过程中易出错等问题，提供一种基于JavaScript的模块加载方法及系统。
本发明解决上述技术问题的技术方案如下：
一种基于JavaScript的模块加载方法，包括以下步骤：
步骤1，获取多个html模块和多个所述html模块之间的组合信息，作为配置数据存储在配置文件中；
步骤2，通过JavaScript代码调用加载函数，从所述配置文件中读取所述配置数据；
步骤3，根据所述配置数据，对多个所述html模块进行循环加载，分别得到每个html模块的待加载文件；
步骤4，从所述待加载文件中提取待加载内容和元素区域的位置信息；
步骤5，将所述待加载内容渲染到与所述位置信息对应的元素区域。
本发明的有益效果是：本发明提供的一种基于JavaScript的模块加载方法，通过将编写的代码存储在模块中，并以模块的方式加载html页面，具有代码的可读性好、可维护性高、复用度高等优点，并且在开发过程中，以模块的方式编写html，具有不会因拼接符号缺失而出错的优点，并且模块的加载顺序、组合情况都是在配置文件中配置，即使后续因需求变更需要修改组合的情况，只需要修改此配置文件即可，并且模块代码与主网页代码完全解耦，同一个模块可以在多个组合中复用，具有更高的实用性和适用性。
在上述技术方案的基础上，本发明还可以做如下改进。
进一步地，在步骤1之前还包括：
以模块的形式编写html，得到html模块；
将所述html模块进行组合并存储。
进一步地，所述html模块的形式具体为标准的html标签格式。
进一步地，所述组合信息包括各所述html模块与html模块名称的对应关系，以及各所述html模块之间的包括先后顺序的组合方式。
进一步地，所述html模块名称为所述html模块的唯一标识。
进一步地，步骤3中，根据所述配置数据，对多个所述html模块进行循环加载，通过ajax分别得到每个html模块的待加载文件。
进一步地，所述待加载文件为异步加载文件。
进一步地，还包括：
步骤6，修改所述配置文件中多个html模块的组合信息，并对修改后的所述配置文件执行步骤2至步骤5。
采用上述进一步方案的有益效果是：当因需求变更，需要对模块的组合进行修改时，只需要对配置文件进行修改就可以了，修改方便，具有良好的可扩展性。
本发明解决上述技术问题的另一种技术方案如下：
一种基于JavaScript的模块加载系统，包括：依次连接的获取模块、读取模块、循环模块和加载模块，其中：
所述获取模块用于获取多个html模块和多个所述html模块之间的组合信息，作为配置数据存储在配置文件中；
所述读取模块用于通过JavaScript代码调用加载函数，从所述配置文件中读取所述配置数据；
所述循环模块用于根据所述配置数据，对多个所述html模块进行循环加载，分别得到每个html模块的待加载文件；
所述加载模块用于从所述待加载文件中提取待加载内容和元素区域的信息，并将所述待加载内容渲染到所述元素区域。
进一步地，还包括编写模块，用于以模块的形式编写html，得到html模块，并将所述html模块进行组合并存储。
进一步地，所述html模块的形式具体为标准的html标签格式。
进一步地，所述组合信息包括各所述html模块与html模块名称的对应关系，以及各所述html模块之间的包括先后顺序的组合方式。
进一步地，所述html模块名称为所述html模块的唯一标识。
进一步地，所述循环模块具体用于根据所述配置数据，对多个所述html模块进行循环加载，通过ajax分别得到每个html模块的待加载文件。
进一步地，所述待加载文件为异步加载文件。
进一步地，所述读取模块还用于修改所述配置文件中多个html模块的组合信息。
本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。
附图说明
图1为本发明实施例提供的一种基于JavaScript的模块加载方法的流程示意图；
图2为本发明另一实施例提供的一种基于JavaScript的模块加载系统的结构框架图。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
如图1所示，为本发明实施例提供的一种基于JavaScript的模块加载方法的流程示意图，该方法包括：
S101，获取多个html模块和多个html模块之间的组合信息，作为配置数据存储在配置文件中；
S102，通过JavaScript代码调用加载函数，从配置文件中读取配置数据；
S103，根据配置数据，对多个html模块进行循环加载，分别得到每个html模块的待加载文件；
S104，从待加载文件中提取待加载内容和元素区域的位置信息；
S105，将待加载内容渲染到与位置信息对应的元素区域。
上述实施例中提供的一种基于JavaScript的模块加载方法，通过将编写的代码存储在模块中，并以模块的方式加载html页面，具有代码的可读性好、可维护性高、复用度高等优点，并且在开发过程中，以模块的方式编写html，具有不会因拼接符号缺失而出错的优点，并且模块的加载顺序、组合情况都是在配置文件中配置，即使后续因需求变更需要修改组合的情况，只需要修改此配置文件即可，并且模块代码与主网页代码完全解耦，同一个模块可以在多个组合中复用，具有更高的实用性和适用性。
在另一实施例中，以加载个人相关信息为例，对本发明提供的一种基于JavaScript的模块加载方法进行说明，该方法包括：
以模块的形式编写html，分别得到个人信息模块和圈子内容模块，两个模块的形式具体为标准的html标签格式，而不是字符串格式，例如，个人信息模块可以为“wodexinxi#mydiv”，圈子内容模块可以为"quanzineirong#topicdiv"；
将个人信息模块和圈子内容模块按先后顺序进行组合并存储，例如，可以存储为"myinfo2":["wodexinxi#mydiv","quanzineirong#topicdiv"]，模块的先后顺序也是配置数据中的一项，当对模块进行循环时，是按先后顺序对模块进行循环的，即，先循环"wodexinxi#mydiv"，再循环"quanzineirong#topicdiv"；
获取个人信息模块和圈子内容模块的代码、组合信息等后，作为配置数据存储在配置文件中，配置文件中还存储有其他模块的模块名称、组合信息等，例如，配置文件中可以包括以下内容：
"topicInfo":["quanzineirong#topicdiv","zengjiatiezihuifu#replydiv"]
"myinfo":["wodexinxi#mydiv"]
"myinfo2":["wodexinxi#mydiv"，"quanzineirong#topicdiv"]，
其中，"myinfo2"为我们需要加载的个人相关信息；
通过JavaScript代码调用加载函数app.initpage，initpage内部首先读取配置文件，然后先从配置文件中筛选出名称为"myinfo2"的配置数据["wodexinxi#mydiv"，"quanzineirong#topicdiv"]；
通过加载函数initpage，根据配置数据["wodexinxi#mydiv"，"quanzineirong#topicdiv"]的配置，对"myinfo2"模块的内容进行循环加载，通过ajax分别得到"myinfo2"模块的异步待加载文件，例如，"wodexinxi#mydiv"代表会加载wodexinxi/index.html文件，"quanzineirong#topicdiv"代表会加载quanzineirong/index.html文件；
将wodexinxi/index.html文件和quanzineirong/index.html文件渲染到#后标识的元素区域，例如，将wodexinxi/index.html文件渲染到mydiv区域，将quanzineirong/index.html文件渲染到topicdiv区域，完成页面的加载。
在另一实施例中，如图2所示，为本发明另一实施例提供的一种基于JavaScript的模块加载系统的结构框架图，该系统包括：
依次连接的获取模块201、读取模块202、循环模块203和加载模块204，其中：
获取模块201用于获取多个html模块和多个所述html模块之间的组合信息，作为配置数据存储在配置文件中；
读取模块202用于通过JavaScript代码调用加载函数，从配置文件中读取配置数据；
循环模块203用于根据配置数据，对多个html模块进行循环加载，分别得到每个html模块的待加载文件；
加载模块204用于从待加载文件中提取待加载内容和元素区域的信息，并将待加载内容渲染到元素区域。
进一步，还包括编写模块205，用于以模块的形式编写html，得到html模块，并将所述html模块进行组合并存储。
进一步，html模块的形式具体为标准的html标签格式。
进一步，组合信息包括各html模块与html模块名称的对应关系，以及各html模块之间的包括先后顺序的组合方式。
进一步，html模块名称为html模块的唯一标识。
进一步，循环模块203具体用于根据配置数据，对多个html模块进行循环加载，通过ajax分别得到每个html模块的待加载文件。
进一步，待加载文件为异步加载文件。
进一步，读取模块202还用于修改配置文件中多个html模块的组合信息。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统和方法，可以通过其它的方式实现。例如，以上所描述的系统实施例仅仅是示意性的，例如，模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或单元可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种基于JavaScript的模块加载方法，其特征在于，包括以下步骤：
步骤1，获取多个html模块和多个所述html模块之间的组合信息，作为配置数据存储在配置文件中；
步骤2，通过JavaScript代码调用加载函数，从所述配置文件中读取所述配置数据；
步骤3，根据所述配置数据，对多个所述html模块进行循环加载，分别得到每个html模块的待加载文件；
步骤4，从所述待加载文件中提取待加载内容和元素区域的位置信息；
步骤5，将所述待加载内容渲染到与所述位置信息对应的元素区域。
2.根据权利要求1所述的模块加载方法，其特征在于，在步骤1之前还包括：
以模块的形式编写html，得到html模块；
将所述html模块进行组合并存储。
3.根据权利要求1所述的模块加载方法，其特征在于，所述组合信息包括各所述html模块与html模块名称的对应关系，以及各所述html模块之间的包括先后顺序的组合方式。
4.根据权利要求1至3任一项所述的模块加载方法，其特征在于，步骤3中，根据所述配置数据，对多个所述html模块进行循环加载，通过ajax分别得到每个html模块的待加载文件。
5.根据权利要求4所述的模块加载方法，其特征在于，还包括：
步骤6，修改所述配置文件中多个html模块的组合信息，并对修改后的所述配置文件执行步骤2至步骤5。
6.一种基于JavaScript的模块加载系统，其特征在于，包括：依次连接的获取模块、读取模块、循环模块和加载模块，其中：
所述获取模块用于获取多个html模块和多个所述html模块之间的组合信息，作为配置数据存储在配置文件中；
所述读取模块用于通过JavaScript代码调用加载函数，从所述配置文件中读取所述配置数据；
所述循环模块用于根据所述配置数据，对多个所述html模块进行循环加载，分别得到每个html模块的待加载文件；
所述加载模块用于从所述待加载文件中提取待加载内容和元素区域的信息，并将所述待加载内容渲染到所述元素区域。
7.根据权利要求6所述的模块加载系统，其特征在于，还包括编写模块，以模块的形式编写html，得到html模块，并将所述html模块进行组合并存储。
8.根据权利要求6所述的模块加载系统，其特征在于，所述组合信息包括各所述html模块与html模块名称的对应关系，以及各所述html模块之间的包括先后顺序的组合方式。
9.根据权利要求6至8任一项所述的模块加载系统，其特征在于，所述循环模块具体用于根据所述配置数据，对多个所述html模块进行循环加载，通过ajax分别得到每个html模块的待加载文件。
10.根据权利要求9所述的模块加载系统，其特征在于，所述读取模块还用于修改所述配置文件中多个html模块的组合信息。
CN201710253670.8A 2017-04-18 2017-04-18 一种基于JavaScript的模块加载方法及系统 Pending CN106951271A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710253670.8A CN106951271A (zh) 2017-04-18 2017-04-18 一种基于JavaScript的模块加载方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710253670.8A CN106951271A (zh) 2017-04-18 2017-04-18 一种基于JavaScript的模块加载方法及系统

Publications (1)

Publication Number Publication Date
CN106951271A true CN106951271A (zh) 2017-07-14

Family

ID=59477047

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710253670.8A Pending CN106951271A (zh) 2017-04-18 2017-04-18 一种基于JavaScript的模块加载方法及系统

Country Status (1)

Country Link
CN (1) CN106951271A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019052417A1 (zh) * 2017-09-15 2019-03-21 广州优视网络科技有限公司 页面加载方法、装置、电子设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050160071A1 (en) * 2004-01-21 2005-07-21 Naoki Ura Electronic apparatus
CN102541851A (zh) * 2010-12-10 2012-07-04 金蝶软件（中国）有限公司 页面模块化生成方法及系统
CN103377059A (zh) * 2012-04-23 2013-10-30 阿里巴巴集团控股有限公司 基于jQuery框架的功能模块动态加载方法和装置
CN103955366A (zh) * 2014-04-18 2014-07-30 南威软件股份有限公司 一种可视化网站模版的制作方法
CN104102485A (zh) * 2014-06-26 2014-10-15 湖北安标信息技术有限公司 一种基于Html的模块封装加载方法
CN105159686A (zh) * 2015-09-28 2015-12-16 北京奇虎科技有限公司 一种网站页面开发方法和装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20050160071A1 (en) * 2004-01-21 2005-07-21 Naoki Ura Electronic apparatus
CN102541851A (zh) * 2010-12-10 2012-07-04 金蝶软件（中国）有限公司 页面模块化生成方法及系统
CN103377059A (zh) * 2012-04-23 2013-10-30 阿里巴巴集团控股有限公司 基于jQuery框架的功能模块动态加载方法和装置
CN103955366A (zh) * 2014-04-18 2014-07-30 南威软件股份有限公司 一种可视化网站模版的制作方法
CN104102485A (zh) * 2014-06-26 2014-10-15 湖北安标信息技术有限公司 一种基于Html的模块封装加载方法
CN105159686A (zh) * 2015-09-28 2015-12-16 北京奇虎科技有限公司 一种网站页面开发方法和装置

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019052417A1 (zh) * 2017-09-15 2019-03-21 广州优视网络科技有限公司 页面加载方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN101025738B (zh) 一种免模板动态网站生成方法
CN105159949B (zh) 一种中文地址分词方法及系统
JP4657432B2 (ja) 階層構造の構造化文書を変換する装置
CN101609399B (zh) 基于建模的智能化网站开发系统及方法
CN101937427B (zh) 一种基于浏览器的内容编辑及发布的系统及方法
CN101751382B (zh) 一种基于标签的数据采集方法与系统
CN101079024B (zh) 一种专业词表动态生成系统和方法
CN102279847B (zh) 软件系统国际化方法和装置
CN103870506B (zh) 一种网页信息的抽取方法和系统
CN107391153A (zh) 一种基于Spring与MyBatis框架整合的代码生成方法及装置
CN101582074B (zh) 一种DeepWeb响应页面数据抽取方法
CN101146281A (zh) 一种面向移动终端的创建图形用户界面模型
CN107608948A (zh) 一种文本信息抽取模型的构建方法及装置
CN103049536A (zh) 提取网页正文内容的方法和系统
CN105468793B (zh) 一种仿真模型数据的自动化管理方法
CN110286903A (zh) 用户信息表单的构建方法、装置、设备及存储介质
CN104484337B (zh) Xml文档的存储方法
CN103186610B (zh) 数据同步方法和装置
CN106951271A (zh) 一种基于JavaScript的模块加载方法及系统
CN105574066A (zh) 网页正文提取比对方法及其系统
CN101295251A (zh) 一种界面发布方法和装置
CN112199960B (zh) 一种标准知识元粒度解析系统
CN103929499A (zh) 一种物联网异构标识识别方法和系统
CN110109675A (zh) 智能合约处理方法、装置以及计算机可读存储介质
CN103092973A (zh) 信息抽取方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20170714

RJ01 Rejection of invention patent application after publication