CN106775751A - 一种web前端框架系统及架构方法 - Google Patents
一种web前端框架系统及架构方法 Download PDFInfo
- Publication number
- CN106775751A CN106775751A CN201611252746.7A CN201611252746A CN106775751A CN 106775751 A CN106775751 A CN 106775751A CN 201611252746 A CN201611252746 A CN 201611252746A CN 106775751 A CN106775751 A CN 106775751A
- Authority
- CN
- China
- Prior art keywords
- module
- layer
- component
- data
- end frame
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及一种web前端框架系统,包括项目层、消息处理中心层、中间件处理器层、桥连接层、应用层、工具类层和打包构建工具层;所述项目层包括项目配置和项目页面模块;所述消息处理中心层包括自定义组件模块、组件模块和元件模块,所述组件用于项目中的独立组件封装,并快速进行拼接页面,所述消息处理中心层用于处理每个组件之间的消息;所述中间件控制器层用于处理第三方中间件数据;所述桥连接层用于调用不同平台的API;所述打包构建工具层用于对代码的打包、压缩、加密,并针对不同的平台,打包成不同的上线包。
Description
技术领域
本发明涉及Web前端框架技术领域,更具体地说,涉及一种基于提高前端开发效率的web前端框架系统及架构方法。
背景技术
目前流行的前端框架有很多,例如,如果是纯移动端的话,一般是zepto加frozenui加seajs。如果是做H5那种活动页,则多半采用motion.js,PC端的话,jq+bootstrap是个挺好的组合,或者用backbone也是挺普遍的,但是如果是开发企业管理系统那种的web页面可以考虑extjs,现在改名叫sencha了,组件多。
对于敏捷开发中的团队,长期处于快速开发于需求响应中,处于不同岗位上的开发人员,则需要能够根据需求快速调整自己负责的层面的代码,而Web前端在项目开发中需求的变更更加频繁。一个小型团队,Web控件更多的来自第三方,控件替换以及修改和与页面开发人员进行沟通进行知识普及,则变成前端开发人员最频繁的工作。目前解决办法:前端开发人员把新控件导入项目中,并将旧控件删除。先把旧控件调用的页面,旧控件引用路径先删除,换为新控件地址。然后将旧控件的使用一一处理掉,使用新控件API(Application Programming Interface,应用程序编程接口)来完成原有的功能,经过一一测试后,项目上的改造才算完成。接下来,还需要大量的时间与开发人员沟通讲解新控件的使用方法。
为了解决上述问题,如图1所示,专利申请号为201410203465.7的文献公开了一种web应用前端框架,包括:应用层,为基于核心类文件中的API编写的运行在不同设备环境中的页面;核心类文件层,包含由接口层通过核心文件整合在一起而形成供应用层调用的API集合;接口层,包括基于CMD规范编写的控件API。控件层,包括第三方控件或旧控件的API。根据上述方案的web应用前端框架,所述控件包括:按钮控件、标签控件、文本框控件、图片控件、浏览器控件、视频控件、音频控件。该技术方案通过基于CMD规范的前端模块加载器构建框架核心类文件,所述核心类文件含有框架基本信息以及整合控件接口的方法;在核心类文件的下层构建遵循CMD模块定义规范的接口层类,所述接口层类与所述核心类对应,且所述接口层类与底层控件的功能属性对应。进行控件替换时,仅需改变控件API满足接口层需求,便完成全部工作,减少了web前端开发人员开发工作量。更换调整Web控件,无需与其他开发人员进行新控件知识普及工作。实现了web控件层与项目页面的解耦,控件调整后,可减少页面测试工作,保证了代码健壮性。可以直接兼容遵循CMD规范的第三方控件。在同一接口层下,可覆盖同类型不同平台Web控件。使应用开发人员知识认知无需过多更新的情况下进行多平台同接口开发。
然而,本发明人发现,上述技术方案主要是针对控件而设计的框架结构,没有考虑安全问题和工具提供等其他相关需求。
发明内容
本发明的目的在于提供一种新的web前端框架,用来快速开发移动端、微信端和PC端项目,提高项目内部的前端开发效率。
本发明的技术方案为,一种web前端框架系统,包括项目层、消息处理中心层、中间件处理器层、桥连接层、应用层、工具类层和打包构建工具层;其中,所述项目层包括项目配置和项目页面模块;所述消息处理中心层包括自定义组件模块、组件模块和元件模块,所述组件用于项目中的独立组件封装,并快速进行拼接页面,所述消息处理中心层用于处理每个组件之间的消息;所述中间件处理器层用于处理第三方中间件数据,所述桥连接层用于调用不同平台的API;所述打包构建工具层用于对代码的打包、压缩、加密,并针对不同的平台,打包成不同的上线包。
进一步地,,所述中间件处理器层包括事件管理模块、适配器模块、路由管理模块、网络请求模块、安全模块和缓存模块;其中,所述事件管理模块用于处理不同平台的点击、移动,数据绑定等事件;所述网络请求模块用于处理和后端交互的数据读取;所述安全模块用于在数据传输中,对数据进行加密;所述适配器模块用于对不同的数据源进行数据格式化,使前端保持统一的数据格式;所述路由管理模块用于处理页面与页面之间跳转的动画。
进一步地,所述应用层包括PC模块、微信模块、IOS模块和Android模块。
一种web前端框架系统架构方法,包括如下步骤:前端启动;框架选型;构建项目;梳理UE;编写实现业务逻辑代码/交互;集成/联调;打包工具进行打包压缩上线;结束。
进一步地,上述梳理UE步骤之后,包括如下步骤,梳理技术难点和寻找解决方案。
进一步地,,所述梳理UE步骤之后,包括如下步骤,梳理公用模块、方法和输出公共类。
进一步地,所述梳理UE步骤之后,包括如下步骤,规划接口数据和构建本地数据容器。
一种web前端框架系统架构方法,包括如下步骤:前端启动;框架选型;构建项目;梳理UI;规划项目整体页面结构;抽取公用模版/组件/元件;输出静态页面/模版/组件/元件;集成/联调;打包工具进行打包压缩上线;结束。
一种web前端框架系统架构方法,包括如下步骤:开始;读取配置文件;加载页面;渲染组件;读取数据;渲染页面;结束;其特征在于,所述渲染组件步骤包括:判断是否是自定义组件,如果所述组件是自定义组件,则加载自定义组件,注册到消息中心。
进一步地,所述读取数据步骤包括:
第一步,判断是否使用API路由中间件,如果是,则进入API路由解析;如果否,则直接进入第二步;
第二步,判断是否使用缓存中间件,如果是,则获取缓存数据;如果否,则进入第三步;
第三步,判断是否使用适配器中间件,如果是,则数据通过适配器格式化;如果否,则返回数据。
本发明的有益效果在于,提供了一种功能强大、反应迅速的web前端框架系统及方法,能快速开发移动端、微信端和PC端项目,大大提高使用者内部的前端开发效率。
附图说明
图1为本发明的背景技术的结构示意图;
图2为本发明一种web前端框架系统的结构示意图;
图3为本发明一种web前端框架系统架构方法的实施例的流程示意图;
图4为本发明一种web前端框架系统架构方法的另一实施例的流程示意图
具体实施方式
下面结合附图和实施例进一步说明本发明,如图2所示,一种web前端框架系统,包括项目层、消息处理中心层、中间件处理器层、桥连接层、应用层、工具类层和打包构建工具层;其中,所述项目层包括项目配置和项目页面模块;所述消息处理中心层包括自定义组件模块、组件模块和元件模块,所述组件用于项目中的独立组件封装,并快速进行拼接页面,所述消息处理中心层用于处理每个组件之间的消息;所述中间件控制器层用于处理第三方中间件数据;所述桥连接层用于调用不同平台的API;所述打包构建工具层用于对代码的打包、压缩、加密,并针对不同的平台,打包成不同的上线包。
进一步地,所述中间件处理器层包括事件管理模块、适配器模块、路由管理模块、网络请求模块、安全模块和缓存模块;其中,所述事件管理模块用于处理不同平台的点击、移动,数据绑定等事件;所述网络请求模块用于处理和后端交互的数据读取;所述安全模块用于在数据传输中,对数据进行加密;所述适配器模块用于对不同的数据源进行数据格式化,使前端保持统一的数据格式;所述路由管理模块用于处理页面与页面之间跳转的动画。
在此说明,本发明的所述中间件处理器层是一个对第三方或者自己开发的中间件进行维护,可以新增任何中间件(可以是第三方开发的),也可以移除任何一个中间件,按项目所需,对中间件进行管控和数据分发处理,这样逻辑上可以最大程度的灵活处理项目上的特殊业务。
进一步地,所述应用层包括PC模块、微信模块、IOS模块和Android模块。
如图3所示,一种web前端框架系统架构方法,包括如下步骤:前端启动;框架选型;构建项目;梳理UE;编写实现业务逻辑代码/交互;集成/联调;打包工具进行打包压缩上线;结束。
进一步地,上述梳理UE步骤之后,包括如下步骤,梳理技术难点和寻找解决方案。
进一步地,,所述梳理UE步骤之后,包括如下步骤,梳理公用模块、方法和输出公共类。
进一步地,所述梳理UE步骤之后,包括如下步骤,规划接口数据和构建本地数据容器。
如图3所示,一种web前端框架系统架构方法,包括如下步骤:前端启动;框架选型;构建项目;梳理UI;规划项目整体页面结构;抽取公用模版/组件/元件;输出静态页面/模版/组件/元件;集成/联调;打包工具进行打包压缩上线;结束。
如图4所示,一种web前端框架系统架构方法,包括如下步骤:开始;读取配置文件;加载页面;渲染组件;读取数据;渲染页面;结束;其特征在于,所述渲染组件步骤包括:判断是否是自定义组件,如果所述组件是自定义组件,则加载自定义组件,注册到消息中心。
进一步地,所述读取数据步骤包括:
第一步,判断是否使用API路由中间件,如果是,则进入API路由解析;如果否,则直接进入第二步;
第二步,判断是否使用缓存中间件,如果是,则获取缓存数据;如果否,则进入第三步;
第三步,判断是否使用适配器中间件,如果是,则数据通过适配器格式化;如果否,则返回数据。本发明的技术方案的有益效果在于:首先,本发明通过引入NOS解决了不同环境之间网络隔离的问题,将更新后的配置文件先发送到NOS上,然后各个环境中配置对应的agent从NOS上获取更新后的的配置文件。
以上的描述仅仅涉及本发明的一些具体实施方式,任何本领域的技术人员基于本发明的精神所做的替换或改进均应为本发明的保护范围所涵盖,本发明的保护范围应以权利要求书为准。
Claims (10)
1.一种web前端框架系统,包括项目层、消息处理中心层、中间件处理器层、桥连接层、应用层、工具类层和打包构建工具层;其中,所述项目层包括项目配置和项目页面模块;所述消息处理中心层包括自定义组件模块、组件模块和元件模块,所述组件用于项目中的独立组件封装,并快速进行拼接页面,所述消息处理中心层用于处理每个组件之间的消息;所述中间件控制器层用于处理第三方中间件数据;所述桥连接层用于调用不同平台的API;所述打包构建工具层用于对代码的打包、压缩、加密,并针对不同的平台,打包成不同的上线包。
2.根据权利要求1所述的web前端框架系统,其特征在于,所述中间件处理器层包括事件管理模块、适配器模块、路由管理模块、网络请求模块、安全模块和缓存模块;其中,所述事件管理模块用于处理不同平台的点击、移动,数据绑定等事件;所述网络请求模块用于处理和后端交互的数据读取;所述安全模块用于在数据传输中,对数据进行加密;所述适配器模块用于对不同的数据源进行数据格式化,使前端保持统一的数据格式;所述路由管理模块用于处理页面与页面之间跳转的动画。
3.根据权利要求1或2所述的web前端框架系统,其特征在于,所述应用层包括PC模块、微信模块、IOS模块和Android模块。
4.一种web前端框架系统架构方法,包括如下步骤:前端启动;框架选型;构建项目;梳理UE;编写实现业务逻辑代码/交互;集成/联调;打包工具进行打包压缩上线;结束。
5.如权利要求4所述的web前端框架系统架构方法,其特征在于,所述梳理UE步骤之后,包括如下步骤,梳理技术难点和寻找解决方案。
6.如权利要求4所述的web前端框架系统架构方法,其特征在于,所述梳理UE步骤之后,包括如下步骤,梳理公用模块、方法和输出公共类。
7.如权利要求4所述的web前端框架系统架构方法,其特征在于,所述梳理UE步骤之后,包括如下步骤,规划接口数据和构建本地数据容器。
8.一种web前端框架系统架构方法,包括如下步骤:前端启动;框架选型;构建项目;梳理UI;规划项目整体的页面结构;抽取公用模版/组件/元件;输出静态页面/模版/组件/元件;集成/联调;打包工具进行打包压缩上线;结束。
9.一种web前端框架系统架构方法,包括如下步骤:开始;读取配置文件;加载页面;渲染组件;读取数据;渲染页面;结束;其特征在于,所述渲染组件步骤包括:判断是否是自定义组件,如果所述组件是自定义组件,则加载自定义组件,注册到消息中心。
10.如权利要求9所述的web前端框架系统架构方法,其特征在于,所述读取数据步骤包括:
第一步,判断是否使用API路由中间件,如果是,则进入API路由解析;如果否,则直接进入第二步;
第二步,判断是否使用缓存中间件,如果是,则获取缓存数据;如果否,则进入第三步;
第三步,判断是否使用适配器中间件,如果是,则数据通过适配器格式化;如果否,则返回数据。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611252746.7A CN106775751A (zh) | 2016-12-30 | 2016-12-30 | 一种web前端框架系统及架构方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611252746.7A CN106775751A (zh) | 2016-12-30 | 2016-12-30 | 一种web前端框架系统及架构方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106775751A true CN106775751A (zh) | 2017-05-31 |
Family
ID=58928520
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201611252746.7A Pending CN106775751A (zh) | 2016-12-30 | 2016-12-30 | 一种web前端框架系统及架构方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106775751A (zh) |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107678745A (zh) * | 2017-09-25 | 2018-02-09 | 南京中新赛克科技有限责任公司 | 基于页面组件化的系统和方法 |
CN107729061A (zh) * | 2017-10-12 | 2018-02-23 | 武汉市灯塔互动文化传播有限公司 | 一种ios平台下工程项目的组件化构建方法 |
CN107968841A (zh) * | 2017-12-20 | 2018-04-27 | 深圳乐信软件技术有限公司 | 网络页面的动态路由方法、装置、存储介质及客户端 |
CN108762841A (zh) * | 2018-05-24 | 2018-11-06 | 吉旗(成都)科技有限公司 | 一种移动端第三方应用接入权限自动分层的方法 |
CN108932119A (zh) * | 2018-07-01 | 2018-12-04 | 甘肃万维信息技术有限责任公司 | 一种基于android系统的项目分层结构 |
CN109086114A (zh) * | 2018-07-26 | 2018-12-25 | 郑州云海信息技术有限公司 | 一种生成web前端交互界面的方法、装置及终端 |
CN109274724A (zh) * | 2018-08-30 | 2019-01-25 | 上海艾融软件股份有限公司 | 一种前后端分离架构的实现系统及方法 |
CN109284096A (zh) * | 2018-08-22 | 2019-01-29 | 深圳点猫科技有限公司 | 一种编程项目的自动化构建方法及电子设备 |
CN109597604A (zh) * | 2018-10-22 | 2019-04-09 | 国网新疆电力有限公司电力科学研究院 | 基于iOS平台的APP模块化开发方法、装置和设备 |
WO2019080796A1 (zh) * | 2017-10-23 | 2019-05-02 | 北京金山云网络技术有限公司 | web系统的前后端分离方法、装置、设备及存储介质 |
CN110008431A (zh) * | 2019-04-11 | 2019-07-12 | 成都四方伟业软件股份有限公司 | 页面组件构建方法、装置、页面生成设备及可读存储介质 |
Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103955364A (zh) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | 一种适用于手机的前端组件方法 |
-
2016
- 2016-12-30 CN CN201611252746.7A patent/CN106775751A/zh active Pending
Patent Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103955364A (zh) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | 一种适用于手机的前端组件方法 |
Non-Patent Citations (2)
Title |
---|
李张永 等: "跨平台移动Web开发框架与数据交互方法", 《计算机工程与设计》 * |
编程知识库: "【京东前端技术架构】京东前端架构组团队是如何工作的?", 《HTTP://WWW.WUFANGBO.COM/6871-2/》 * |
Cited By (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107678745A (zh) * | 2017-09-25 | 2018-02-09 | 南京中新赛克科技有限责任公司 | 基于页面组件化的系统和方法 |
CN107678745B (zh) * | 2017-09-25 | 2021-04-13 | 南京中新赛克科技有限责任公司 | 基于页面组件化的系统和方法 |
CN107729061A (zh) * | 2017-10-12 | 2018-02-23 | 武汉市灯塔互动文化传播有限公司 | 一种ios平台下工程项目的组件化构建方法 |
WO2019080796A1 (zh) * | 2017-10-23 | 2019-05-02 | 北京金山云网络技术有限公司 | web系统的前后端分离方法、装置、设备及存储介质 |
CN107968841A (zh) * | 2017-12-20 | 2018-04-27 | 深圳乐信软件技术有限公司 | 网络页面的动态路由方法、装置、存储介质及客户端 |
CN107968841B (zh) * | 2017-12-20 | 2021-03-09 | 深圳乐信软件技术有限公司 | 网络页面的动态路由方法、装置、存储介质及客户端 |
CN108762841A (zh) * | 2018-05-24 | 2018-11-06 | 吉旗(成都)科技有限公司 | 一种移动端第三方应用接入权限自动分层的方法 |
CN108932119A (zh) * | 2018-07-01 | 2018-12-04 | 甘肃万维信息技术有限责任公司 | 一种基于android系统的项目分层结构 |
CN109086114A (zh) * | 2018-07-26 | 2018-12-25 | 郑州云海信息技术有限公司 | 一种生成web前端交互界面的方法、装置及终端 |
CN109284096A (zh) * | 2018-08-22 | 2019-01-29 | 深圳点猫科技有限公司 | 一种编程项目的自动化构建方法及电子设备 |
CN109274724A (zh) * | 2018-08-30 | 2019-01-25 | 上海艾融软件股份有限公司 | 一种前后端分离架构的实现系统及方法 |
CN109597604A (zh) * | 2018-10-22 | 2019-04-09 | 国网新疆电力有限公司电力科学研究院 | 基于iOS平台的APP模块化开发方法、装置和设备 |
CN110008431A (zh) * | 2019-04-11 | 2019-07-12 | 成都四方伟业软件股份有限公司 | 页面组件构建方法、装置、页面生成设备及可读存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106775751A (zh) | 一种web前端框架系统及架构方法 | |
CN100462917C (zh) | 用户界面内容数据的数据容器 | |
CN104854561B (zh) | 用于应用程序管理框架的应用程序封装 | |
CN101699393B (zh) | 一种面向网络的智能化软件界面动态生成方法 | |
CN101695032B (zh) | 统一客户端、统一客户端的业务配置方法及系统 | |
CN107122200A (zh) | 加载插件sdk的方法、系统及客户端 | |
Kapitsaki et al. | Model-driven development of composite context-aware web applications | |
CN105955744A (zh) | 一种移动跨平台开发系统及方法 | |
CN107870821A (zh) | 应用程序的跨平台调用方法及系统 | |
CN102495735A (zh) | web 端UI组件应用框架系统 | |
CN101645013A (zh) | 综合业务管理平台插件式业务管理系统及方法 | |
CN111414193A (zh) | 基于微服务框架的业务系统的实现方法及相关装置 | |
CN102624762B (zh) | 基于云计算提升机器人软件功能的方法和云计算服务器 | |
CN103513976B (zh) | 业务流程建模方法及装置 | |
CN101185303A (zh) | 创建用于绑定应用程序与关联后端服务器之间的消息的映射文档的系统及方法 | |
CN114077423A (zh) | 基于移动跨平台的机场app开发容器架构 | |
CN104219295A (zh) | 基于服务器端配置的移动设备的信息展示方法及系统 | |
CN101135966A (zh) | 一种基于命令行的图形界面开发方法及系统 | |
AU2018202837B2 (en) | Server and method for making customized application using integrated application and recording medium therefor | |
KR101086620B1 (ko) | 스마트 오피스 시스템 및 운용을 위한 서버 및 운용 방법 | |
CN110262830A (zh) | 一种移动端基于应用二次开发的方法 | |
US20110289515A1 (en) | Generating service-access activities for workflow applications | |
CN110069321A (zh) | 业务容器化运行方法、设备、存储介质及装置 | |
CN107066888A (zh) | 可扩展的可信用户接口、方法和电子设备 | |
CN114416314B (zh) | 一种基于api网关的服务编排方法 |
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: 20170531 |
|
RJ01 | Rejection of invention patent application after publication |