CN109766503A - 一种模块化的前端框架构建方法及装置 - Google Patents
一种模块化的前端框架构建方法及装置 Download PDFInfo
- Publication number
- CN109766503A CN109766503A CN201811629976.XA CN201811629976A CN109766503A CN 109766503 A CN109766503 A CN 109766503A CN 201811629976 A CN201811629976 A CN 201811629976A CN 109766503 A CN109766503 A CN 109766503A
- Authority
- CN
- China
- Prior art keywords
- code
- configuration file
- frame
- file
- css
- 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
- 238000010276 construction Methods 0.000 title claims abstract description 27
- 238000004458 analytical method Methods 0.000 claims description 3
- 238000000034 method Methods 0.000 abstract description 8
- 238000002955 isolation Methods 0.000 abstract description 3
- 230000000694 effects Effects 0.000 description 2
- 230000033772 system development Effects 0.000 description 2
- 238000005034 decoration Methods 0.000 description 1
- 230000018109 developmental process Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Abstract
本发明公开了一种模块化的前端框架构建方法及装置，该方法包括：定义模块内容，所述模块内容包括配置文件、HTML代码、CSS代码及业务代码；编译所述配置文件以获得模块运行时所指向的文件；加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用。本发明的有益效果是，模块化构建单页面Web应用系统，实现模块间的资源隔离和模块的独立运行，并能够实现页面单独构建。
Description
技术领域
本发明涉及web应用系统开发技术领域，尤其涉及一种模块化的前端框架构建方法及装置。
背景技术
在基于单页面的web应用系统开发过程中，所有Web资源运行于同一个html页面，这与传统的多html页面运行机制完全不同。如何保证多个开发人员同时进行开发，这需要对静态资源进行模块化的划分。在模块化划分后，如何保证模块的独立运行和模块之间的有效交互，现有的技术方案一般为通过iframe引入独立的html页面，以实现模块间的隔离和访问。如此，部分单页面APP无法以独立的路径展示页面功能。因此，该方法的缺点主要有：
1、以iframe的形式引入性能低，存在跨域访问的问题；
2、单页面APP无法独立运行某个功能模块。
发明内容
本发明的目的在于提供一种模块化的前端框架构建方法及装置，解决现有技术中以iframe的形式引入性能低，存在跨域访问；以及单页面APP无法独立运行某个功能模块的问题。
本发明的技术方案实现如下：
一方面，本发明提供一种模块化的前端框架构建方法，包括：
定义模块内容，所述模块内容包括配置文件、HTML代码、CSS代码及业务代码；
编译所述配置文件以获得模块运行时所指向的文件；
加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用。
在本发明所述的前端框架构建方法中，所述定义模块内容，包括：
将所述配置文件引用所述HTML代码、所述CSS代码及所述业务代码；
定义所述配置文件以配置所述HTML代码、所述CSS代码及所述业务代码的路径；
初始化所述业务代码。
在本发明所述的前端框架构建方法中，所述编译所述配置文件以获得模块运行时所指向的文件，包括：
通过requireJS提供的插件进行模块化编译，从而依据所述配置文件生成编译文件；
依据所述编译文件获得模块运行时所指向的文件。
在本发明所述的前端框架构建方法中，所述加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载所述配置文件；
加载并解析所述配置文件引用的HTML代码；
加载所述配置文件引用的CSS代码以替换页面多语言文件；
加载所述配置文件引用的业务代码；
依据所加载的所述HTML代码、所述CSS代码及所述业务代码进行UI元素权限解析；
构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用。
在本发明所述的前端框架构建方法中，所述构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载并执行预设的jsx文件以兼容react，从而通过所述react构建所述前端UI框架。
另一方面，提供一种模块化的前端框架构建装置，其中存储有多条指令，所述指令适于由处理器加载并执行，包括：
定义模块内容，所述模块内容包括配置文件、HTML代码、CSS代码及业务代码；
编译所述配置文件以获得模块运行时所指向的文件；
加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用。
在本发明所述的前端框架构建装置中，所述定义模块内容，包括：
将所述配置文件引用所述HTML代码、所述CSS代码及所述业务代码；
定义所述配置文件以配置所述HTML代码、所述CSS代码及所述业务代码的路径；
初始化所述业务代码。
在本发明所述的前端框架构建装置中，所述编译所述配置文件以获得模块运行时所指向的文件，包括：
通过requireJS提供的插件进行模块化编译，从而依据所述配置文件生成编译文件；
依据所述编译文件获得模块运行时所指向的文件。
在本发明所述的前端框架构建装置中，所述加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载所述配置文件；
加载并解析所述配置文件引用的HTML代码；
加载所述配置文件引用的CSS代码以替换页面多语言文件；
加载所述配置文件引用的业务代码；
依据所加载的所述HTML代码、所述CSS代码及所述业务代码进行UI元素权限解析；
构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用。
在本发明所述的前端框架构建装置中，所述构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载并执行预设的jsx文件以兼容react，从而通过所述react构建所述前端UI框架。
因此，本发明的有益效果是，模块化构建单页面Web应用系统，实现模块间的资源隔离和模块的独立运行，并能够实现页面单独构建。
附图说明
下面将结合附图及实施例对本发明作进一步说明，附图中：
图1为本发明一实施例提供的一种模块化的前端框架构建方法的流程图。
具体实施方式
为了对本发明的技术特征、目的和效果有更加清楚的理解，以下将对照附图详细说明本发明的具体实施方式。应当理解，以下说明仅为本发明实施例的具体阐述，不应以此限制本发明的保护范围。
参见图1，图1为本发明一实施例提供的一种模块化的前端框架构建方法的流程图，该模块化的前端框架构建方法包括步骤S1-S3：
S1、定义模块内容，所述模块内容包括配置文件、HTML代码、CSS代码及业务代码；步骤S1包括步骤S11-S13：
S11、将所述配置文件引用所述HTML代码、所述CSS代码及所述业务代码；其中：
配置文件为JS-PAGE-SRC：模块的访问路径，本方案中，模块的使用者可以通过#+配置文件路径的形式来进行访问，同时，配置文件中定义了当前模块的业务代码、UI布局代码和CSS代码的路径、多语言文件。
配置文件的具体格式如下：
业务代码为FUN-CODE：基于AMD的代码规范，通过init方法实现模块的初始化。代码格式如下：
HTML代码为LAYOUT：由html片段组成。
CSS代码：为CSS样式文件。
S12、定义所述配置文件以配置所述HTML代码、所述CSS代码及所述业务代码的路径；例如：一个模块是通过基于AMD代码规范的一个JS文件来定义，模块的内容主要有配置文件(基于AMD的JS代码)、html代码、css代码、业务代码(基于AMD的JS代码)四部分构成。
S13、初始化所述业务代码。即通过init方法实现模块的初始化。
S2、编译所述配置文件以获得模块运行时所指向的文件；步骤S2包括步骤S21-S22：
S21、通过requireJS提供的插件进行模块化编译，从而依据所述配置文件生成编译文件；具体的，本方案中所应用的文件编译是基于nodejs运行环境，通过requireJS提供的r.js插件进行模块化编译；通过编译可以将本模块使用到的资源文件进行合并和代码的混淆，以增强运行效率和代码安全性。
S22、依据所述编译文件获得模块运行时所指向的文件。其中：
编译文件为FUN-BUILD.JS：模块编译的配置文件，主要定义模块所涉及文件的目录以及压缩规则。
JS-PAGE为模块运行时指向的文件。
S3、加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用。步骤S3包括步骤S31-S36：
S31、加载所述配置文件；
S32、加载并解析所述配置文件引用的HTML代码；
S33、加载所述配置文件引用的CSS代码以替换页面多语言文件；
S34、加载所述配置文件引用的业务代码；
S35、依据所加载的所述HTML代码、所述CSS代码及所述业务代码进行UI元素权限解析；例如：根据模块的定义规则，提供了一套完整的针对模块定义的解析方法，主要包括html解析，多语言引用解析，业务代码执行，自定义插件接入的解析，页面控件权限控制。
S36、构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用。其中，加载并执行预设的jsx文件以兼容react，从而通过所述react构建所述前端UI框架。即本方案所构建的UI框架可以将单个的功能模块进行独立展示，同时也可以被其他功能进行调用。
此外，本发明还提供一种模块化的前端框架构建装置(即存储介质)，其中存储有多条指令，所述指令适于由处理器加载并执行，从而实现上述方法。
如此，本发明可以获得以下直接或间接的效果：
1、解决了单页面的Web应用系统实现模块化开发的问题；
2、解决单页面Web应用系统的功能模块无法独立运行的问题。
综上所述，虽然本发明已以优选实施例揭露如上，但上述优选实施例并非用以限制本发明，本领域的普通技术人员，在不脱离本发明的精神和范围内，均可作各种更动与润饰，因此本发明的保护范围以权利要求界定的范围为准。
Claims (10)
1.一种模块化的前端框架构建方法，其特征在于，包括：
定义模块内容，所述模块内容包括配置文件、HTML代码、CSS代码及业务代码；
编译所述配置文件以获得模块运行时所指向的文件；
加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用。
2.根据权利要求1所述的前端框架构建方法，其特征在于，所述定义模块内容，包括：
将所述配置文件引用所述HTML代码、所述CSS代码及所述业务代码；
定义所述配置文件以配置所述HTML代码、所述CSS代码及所述业务代码的路径；
初始化所述业务代码。
3.根据权利要求1所述的前端框架构建方法，其特征在于，所述编译所述配置文件以获得模块运行时所指向的文件，包括：
通过requireJS提供的插件进行模块化编译，从而依据所述配置文件生成编译文件；
依据所述编译文件获得模块运行时所指向的文件。
4.根据权利要求2所述的前端框架构建方法，其特征在于，所述加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载所述配置文件；
加载并解析所述配置文件引用的HTML代码；
加载所述配置文件引用的CSS代码以替换页面多语言文件；
加载所述配置文件引用的业务代码；
依据所加载的所述HTML代码、所述CSS代码及所述业务代码进行UI元素权限解析；
构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用。
5.根据权利要求4所述的前端框架构建方法，其特征在于，所述构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载并执行预设的jsx文件以兼容react，从而通过所述react构建所述前端UI框架。
6.一种模块化的前端框架构建装置，其中存储有多条指令，所述指令适于由处理器加载并执行，其特征在于，包括：
定义模块内容，所述模块内容包括配置文件、HTML代码、CSS代码及业务代码；
编译所述配置文件以获得模块运行时所指向的文件；
加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用。
7.根据权利要求6所述的前端框架构建装置，其特征在于，所述定义模块内容，包括：
将所述配置文件引用所述HTML代码、所述CSS代码及所述业务代码；
定义所述配置文件以配置所述HTML代码、所述CSS代码及所述业务代码的路径；
初始化所述业务代码。
8.根据权利要求6所述的前端框架构建装置，其特征在于，所述编译所述配置文件以获得模块运行时所指向的文件，包括：
通过requireJS提供的插件进行模块化编译，从而依据所述配置文件生成编译文件；
依据所述编译文件获得模块运行时所指向的文件。
9.根据权利要求7所述的前端框架构建装置，其特征在于，所述加载所述配置文件、解析所述HTML代码、加载所述CSS代码、并执行所述业务代码以形成前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载所述配置文件；
加载并解析所述配置文件引用的HTML代码；
加载所述配置文件引用的CSS代码以替换页面多语言文件；
加载所述配置文件引用的业务代码；
依据所加载的所述HTML代码、所述CSS代码及所述业务代码进行UI元素权限解析；
构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用。
10.根据权利要求9所述的前端框架构建装置，其特征在于，所述构建所述前端UI框架，从而使所述前端UI框架独立展示或被调用，包括：
加载并执行预设的jsx文件以兼容react，从而通过所述react构建所述前端UI框架。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811629976.XA CN109766503A (zh) | 2018-12-28 | 2018-12-28 | 一种模块化的前端框架构建方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811629976.XA CN109766503A (zh) | 2018-12-28 | 2018-12-28 | 一种模块化的前端框架构建方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109766503A true CN109766503A (zh) | 2019-05-17 |
Family
ID=66452397
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811629976.XA Pending CN109766503A (zh) | 2018-12-28 | 2018-12-28 | 一种模块化的前端框架构建方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109766503A (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110704101A (zh) * | 2019-09-06 | 2020-01-17 | 平安普惠企业管理有限公司 | 代码文件构建方法、装置、设备及计算机可读存储介质 |
| CN111949260A (zh) * | 2020-06-24 | 2020-11-17 | 武汉烽火众智数字技术有限责任公司 | 一种移动端业务配置化方法及系统 |
| CN112083966A (zh) * | 2020-08-14 | 2020-12-15 | 杭州当虹科技股份有限公司 | 一种加载远程vue组件的方法 |
| CN112162747A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
| CN113805871A (zh) * | 2021-09-26 | 2021-12-17 | 平安国际智慧城市科技股份有限公司 | 前端代码的生成方法、装置及计算机设备 |
| CN114610409A (zh) * | 2022-03-14 | 2022-06-10 | 中原银行股份有限公司 | 基于Webpack的调用系统、方法及电子设备 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103064685A (zh) * | 2012-12-27 | 2013-04-24 | 北京思特奇信息技术股份有限公司 | 一种模块化配置网页页面的方法及装置 |
| CN106020823A (zh) * | 2016-05-19 | 2016-10-12 | 浪潮电子信息产业股份有限公司 | 一种前端Web表现与数据分离以及页面快速响应的方式 |
| CN107194005A (zh) * | 2017-06-19 | 2017-09-22 | 福建中金在线信息科技有限公司 | 一种web前端页面及其生成方法、页面加载方法和装置 |
| CN107273528A (zh) * | 2017-06-28 | 2017-10-20 | 努比亚技术有限公司 | 一种前后端分离方法、移动终端以及计算机可读存储介质 |
| CN107766046A (zh) * | 2017-10-20 | 2018-03-06 | 江苏电力信息技术有限公司 | 一种基于移动框架的模块化构建方法 |
| CN108874389A (zh) * | 2018-06-27 | 2018-11-23 | 中国建设银行股份有限公司 | 前端页面开发框架 |
-
2018
- 2018-12-28 CN CN201811629976.XA patent/CN109766503A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103064685A (zh) * | 2012-12-27 | 2013-04-24 | 北京思特奇信息技术股份有限公司 | 一种模块化配置网页页面的方法及装置 |
| CN106020823A (zh) * | 2016-05-19 | 2016-10-12 | 浪潮电子信息产业股份有限公司 | 一种前端Web表现与数据分离以及页面快速响应的方式 |
| CN107194005A (zh) * | 2017-06-19 | 2017-09-22 | 福建中金在线信息科技有限公司 | 一种web前端页面及其生成方法、页面加载方法和装置 |
| CN107273528A (zh) * | 2017-06-28 | 2017-10-20 | 努比亚技术有限公司 | 一种前后端分离方法、移动终端以及计算机可读存储介质 |
| CN107766046A (zh) * | 2017-10-20 | 2018-03-06 | 江苏电力信息技术有限公司 | 一种基于移动框架的模块化构建方法 |
| CN108874389A (zh) * | 2018-06-27 | 2018-11-23 | 中国建设银行股份有限公司 | 前端页面开发框架 |
Non-Patent Citations (1)
| Title |
|---|
| 杨帆: "WEB前端工程化方案浅析", 《福建电脑》 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110704101A (zh) * | 2019-09-06 | 2020-01-17 | 平安普惠企业管理有限公司 | 代码文件构建方法、装置、设备及计算机可读存储介质 |
| CN111949260A (zh) * | 2020-06-24 | 2020-11-17 | 武汉烽火众智数字技术有限责任公司 | 一种移动端业务配置化方法及系统 |
| CN112083966A (zh) * | 2020-08-14 | 2020-12-15 | 杭州当虹科技股份有限公司 | 一种加载远程vue组件的方法 |
| CN112083966B (zh) * | 2020-08-14 | 2024-02-27 | 杭州当虹科技股份有限公司 | 一种加载远程vue组件的方法 |
| CN112162747A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
| CN113805871A (zh) * | 2021-09-26 | 2021-12-17 | 平安国际智慧城市科技股份有限公司 | 前端代码的生成方法、装置及计算机设备 |
| CN113805871B (zh) * | 2021-09-26 | 2023-08-15 | 平安国际智慧城市科技股份有限公司 | 前端代码的生成方法、装置及计算机设备 |
| CN114610409A (zh) * | 2022-03-14 | 2022-06-10 | 中原银行股份有限公司 | 基于Webpack的调用系统、方法及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109766503A (zh) | 一种模块化的前端框架构建方法及装置 | |
| US10325012B2 (en) | Filtered stylesheets | |
| US9201631B2 (en) | Method and system for providing content | |
| US10061575B2 (en) | Managed execution environment for software application interfacing | |
| US20170286073A1 (en) | Apparatus for providing framework to develop client application executed on multiple platforms, and method using the same | |
| CN103179166A (zh) | 在客户端中提供服务的方法和客户端 | |
| CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
| US20160012147A1 (en) | Asynchronous Initialization of Document Object Model (DOM) Modules | |
| JP2016520932A (ja) | マルチディスプレイシステム | |
| US20160012144A1 (en) | Javascript-based, client-side template driver system | |
| CN104317573A (zh) | 安卓安装包转换方法和装置以及运行应用的方法和装置 | |
| CN107704499A (zh) | 一种应用程序的页面跳转控制方法及装置 | |
| US20090265716A1 (en) | System and method for feature addition to an application | |
| US20220334853A1 (en) | System and method for accelerating modernization of user interfaces in a computing environment | |
| CN114297549A (zh) | 组件处理方法及装置 | |
| KR101907660B1 (ko) | 웹 기반의 운영체제를 탑재한 단말 장치 및 이를 이용한 서비스 제공 방법 | |
| CN112631563A (zh) | 基于框架的系统开发方法、装置、计算机设备及存储介质 | |
| CN113094138A (zh) | 界面显示方法、装置、电子设备及存储介质 | |
| CN112287255A (zh) | 页面构建方法及装置、计算设备、计算机可读存储介质 | |
| US9916391B2 (en) | Method, apparatus and terminal for webpage content browsing | |
| US20150378688A1 (en) | Developing rich internet application | |
| US8943476B2 (en) | System and method to in-line script dependencies | |
| CN111736833A (zh) | 弹窗组件的生成方法、系统、电子设备和存储介质 | |
| Kao et al. | Designing an XML-based context-aware transformation framework for mobile execution environments using CC/PP and XSLT | |
| CN112988136B (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: 20190517 |
|
| RJ01 | Rejection of invention patent application after publication |