CN110134396A - 一种基于Nodejs开发界面组件的开发框架及方法 - Google Patents

Abstract

本发明涉及一种界面组件开发框架，属于界面开发领域，尤其是一种基于Nodejs开发界面组件的开发框架及方法，同时适用于多种生产环境的便于维护的开发框架。包括开发单元、构建单元、组件包单元、皮肤单元、测试单元和发布单元；开发单元分别与组件包单元以及皮肤单元相连，组件包单元、构建单元、测试单元和发布单元依次相连；本发明灵活多样，使用方便。采用购物车模式，有专门的配置去管理发布组件需要挑选哪些组件，以及需要哪些主题，通过配置就可以实现多个产品线共用一套代码；对于多套皮肤的的图片素材管理成本极低，通过程序即能判断需要做的任务；框架组件友好，无需使用任何配置；可根据需要增加配置。

Description

一种基于Nodejs开发界面组件的开发框架及方法

技术领域

本发明涉及一种界面组件开发框架，尤其是一种基于Nodejs开发界面组件的开发框架及方法，同时适用于多种生产环境的便于维护的开发框架。

背景技术

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，界面组件是指封装了页面基本表单或自定义表单以及绑定了操作事件的集合。

目前市面上比较流行的界面组件开发框架是Element。Element是非常通用的基类，所有Document对象下的对象都继承它，这个接口描述了所有相同种类的元素所普遍具有的方法和属性；可以满足界面开发人员日常工作中遇到的70%的需求。它支持多套软件包打包，支持换主题色，有组件开发环境，背后有很大的开发社区群体一直在做贡献。

但是目前市面上流行的框架都暴露了一些明显的缺陷，即通过这些框架生产出来的组件普遍的浏览器对于Internet Explorer 支持都很薄弱，能支持的最低版本都保持在都在10及以上，目前很多政府机构使用的系统都是基于Internet Explorer做的定制开发。

Element可以更换主题色，仅仅更换主题色虽然可以给人带来一些耳目一新的感觉，但是如果更换主题的同时能够更改图片素材，页面带来的感官刺激和单纯的配色调整明显是不一样的。因为有时为了保持组件的通用性且容易维护，大部分组件框架都没能适配更换图片素材的功能。

目前基于Element的同一套组件可以选择搭配一套配色主题，同一套系统的风格非常的统一，既然选择了统一很大程度上就削弱了多样性。如果同时有多个生产环境都使用一套组件，每套环境的配置都有一些差异性，将无法同时在一套代码中维护多个产生环境。

现在的界面组件开发框架非常繁多，很少能有一个框架能够进行深度定制的，导致现在很多网页效果同质化越来越严重。在组件配色方面不能对图片进行定制，一套组件库不能支持多套皮肤同时使用，不能通过配置去发布多个产品线的组件库，以及对浏览器支持的宽容度不够高,尤其是Internet Explorer浏览器。

发明内容

本发明目的是针对上述不足之处提供一种基于Nodejs开发界面组件的开发框架及方法，解决现有的界面组件框架不能深度定制的缺陷，采用高度规范的配置和约定与目前流行开发套件深度结合使用，在需要快速生产优质前端组件的情况下，可以实现组件的快速的开发，达到组件开发效率高，视觉效果更加丰富，满足多个产品线一套框架同时维护。

本发明是采取以下技术方案实现的：

一种基于Nodejs开发界面组件的开发框架包括开发单元、构建单元、组件包单元、皮肤单元、测试单元和发布单元；

开发单元分别与组件包单元以及皮肤单元相连，组件包单元、构建单元、测试单元和发布单元依次相连；

开发单元严格依赖皮肤单元和组件包单元，皮肤单元负责配色，组件包单元负责逻辑（逻辑就等于组件的骨架），皮肤单元和组件包单元互相独立，用户根据需求进行开发。皮肤单元需要搭配组件包单元渲染让抽象的配色得以实例化。

构建单元，用于负责整个组件包单元的编译工作，通过内部的一个worker模块采用多线程编译，提高编译效率；

组件包单元，用于提供格式统一的组件源代码和素材；

皮肤单元，用于提供搭配组件渲染让抽象的配色得以实例化；

测试单元，用于进行单元测试和可视化测试；

发布单元，即产品输出目录模块，用于对接各个产品线的所需要的组件库，所述组件库均为单独定制。

所述组件包单元内具有至少一个组件包，所述组件包里包括格式统一的组件源代码和素材，具体的是位图素材、字体模块和其他组件。位图素材包括PNG、JPG和GIF等素材，由视觉开发人员提供；字体模块用做单色的矢量图标；其他组件包括功能性组件，例如弹窗组件、分页组件和可选的开发环境配置模块dev.conf.js，所述功能性组件由使用者根据需要自行开发。

所述功能性组件的入口一致，例如，入口文件模块index.js 为 javascript代码的入口，_index.css为stylesheet的文件入口。

测试单元包括单元测试unit模块和可视化测试visual模块，单元测试unit模块用于持续集成和持续发布（CI/CD），可视化测试visual模块用于在开发人员开发组件时作为开发组件界面。

构建单元是整个框架的心脏部分，包括调度中心和预定义配置模块；调度中心控制整个构建流程编排，预定义配置向调度中心发送既定任务，由调度中心根据任务分配线程、配置参数，进而构建子任务。

预定义配置模块发送的既定任务中包括需要打包的组件、需要搭配的配色方案、预先配置的参数和版本描述信息。

本发明灵活多样，使用方便，具备以下优点：

1）本发明框架采用了购物车模式，有专门的配置去管理发布组件需要挑选哪些组件，以及需要哪些主题，通过配置就可以实现多个产品线共用一套代码，非常的灵活。对于多套皮肤的的图片素材管理成本极低，没有太多的事情需要人为去记录的，哪些图片素材属于哪些主题，只要开发人员放到和主题同名的文件夹中，程序即能判断需要做的任务。

2）框架组件对于开发者十分友好，直接一行命令就可以对指定的组件进行代码的开发，无需使用任何配置；也可以根据需要增加配置，增加配置后开发生态将会变的更加多样化，可以加入其它组件进行真实环境模拟开发。

附图说明

以下将结合附图对本发明作进一步说明：

图1 是本发明框架的架构示意简图；

图2是本发明组件包单元的整体架构示意图；

图3是本发明组件包单元的目录架构示意图；

图4是本发明构建单元的框架结构和进行编译构建的流程示意图；

图5是本发明位图构建架构示意图；

图6是本发明框架实现步骤流程图；

图7是对图6中开发阶段的补充。

具体实施方式

下面将结合附图和具体实施例对本发明作进一步说明。

如图1所示，本发明基于Nodejs开发界面组件的开发框架包括开发单元、构建单元、组件包单元、皮肤单元、测试单元和发布单元；开发单元分别与组件包单元以及皮肤单元相连，组件包单元、构建单元、测试单元和发布单元依次相连。

开发单元严格依赖主题方案单元和组件包单元，主题方案单元负责配色，组件包单元负责逻辑（逻辑就等于组件的骨架），主题方案单元和组件包单元相互独立存放，需要用户自己从无到有的开发。组件包单元中的组件包有N个，N为大于等于1的自然数。各组件包联合选定的配色方案可以进行编译构建成生产库进行测试。

如图2～图3所示，组件包单元20包括格式统一的组件源代码和素材，位图素材201主要是PNG，JPG，GIF等素材，一般需要视觉开发人员提供；字体模块202主要设计用来做单色的矢量图标，位图素材201和字体模块202需要属于组件包中的内定组件，结构是确定的。其他组件203也即功能性组件只要保证入口一致即可，入口文件模块index.js 为javascript代码的入口，_index.css为stylesheet的文件入口，dev.conf.js是可选的开发环境配置模块，图2中的示例显示了功能性组件包括弹窗组件和分页组件。所有的功能性组件都是需要使用者自己去开发的，本发明仅仅提供了一种开发模式。

构建单元是整个框架的心脏部分，用于负责整个模块的编译工作，通过内部的一个worker模块采用多线程编译，提高编译效率。

构建单元是整个框架的心脏部分，包括调度中心301和预定义配置模块308；调度中心301控制整个构建流程编排，预定义配置308向调度中心301发送既定任务，由调度中心301根据任务分配线程302、配置参数309，进而构建子任务303。预定义配置模块308发送的既定任务中包括需要打包的组件、需要搭配的配色方案、预先配置的参数和版本描述信息。

图4所示，调度中心301获取到工作内容后分配合理的线程用来处理互相不依赖的任务，具体处理的任务为编译样式表304，javascript脚本305，字体和图标306生成和其他完善脚本307，其中样式表304的处理在整个构建过程中需要自行多次，具体的数量为N +1，N > 0的整数，N的和与组件包的配色方案的数量一致。

由于javascript，stylesheet，image，font分别都有不同的编译方式，通过调度中心301分配不同的worker采用多线程编译，提高编译效率，加快编译速度。

Javascript脚本任务305是从配置参数309中分离出只和javascript相关的配置内容，配置中只包含所有组件的javascript入口文件，上文所提及的index.js 文件，将所有组件的入口文件合并为一个文件，通过已有的技术Rollup进行打包转码生成目标文件。

Stylesheet脚本任务是从配置参数309中分离出只和Stylesheet相关的配置内容，配置中只包含所有组件的Stylesheet入口文件，上面所提及的_index.scss 先对stylesheet文件进行依赖整理：把所有的依赖关系用队列的形式表示，如果存在循环依赖说明组件设计的不合理需要重新设计（所谓的循环依赖是指如：A依赖B，B依赖C，C又依赖A如此结构形成了一个回路）；整理好的stylesheet 再通过 node-sass（已有的技术方案）组件直接输出。

image（字体和图标）的任务是进行图片素材的合并操作最后输出为目标文件：所有图片素材全部来自图5中素材仓库2011，通过约定的文件名即可知道将会走哪些处理流程，且文件夹的名称对应的就是其类名的一部分，文件夹如果后缀是一个数字，代表着这个图将会被重新调整为指定尺寸输出，图片的后缀部分就是文件的状态位，不同的状态将会输出到不同的图片中。还有一种确定命名的文件夹：lonely，该目录的图片将不进行合并处理，这部分属于分类阶段2012。如果只使用默认配色素材则进入默认素材2013中选取默认配色素材；如果有自定义配色的话，不仅包含默认素材2013，还会从定制素材2014对应的皮肤文件夹中选取素材，定制素材2014中没有覆盖到的素材将集成与默认素材2013的素材。最终的生成的中间产物2015是图4中字体和图标产物的一部分。例如，如果一张图的名称为：button-hover且位于hc-flag-24 的目录下面，那么最后这张图将会压缩成宽度为24像素的大小，且只有在鼠标移动到目标内容上才会出现，因为hover表示鼠标移上去的动作。

具体实施例：下面通过举例说明本发明框架的实现方法。

本具体实施例围绕页面弹窗组件开发进行，本实施例需要操作系统安装有NODEJS运行环境库，通过 nodejs 自带的 npm命令安装框架需要的依赖包。

如图6和图7所示，其实现方法包括如下步骤：

S1、在Nodejs上安装基础环境，选择历史版本中6.1.0版本；

S2、通过下载方式，将本发明框架下载开发机器上，通过Nodejs自带的依赖安装工具npm 执行安装；

S3、通过执行初始化组件的脚手架命令，对dialog组件进行初始化（命令为npm runinit）,操作界面会进入问答阶段，会分别询问你模块名（输入dialog）、是否创建javascript的入口文件、是否创建stylesheet的入口模块、是否创建模块的开发环境配置，是否创建测试文件，回答完以上五个问题后，dialog组件开发环境和配置就好了，初始化组件完成；

S4、开发dialog组件，执行框架的脚手架命令：npm run dev dialog 对弹窗组件进行开发，命令执行完后会自动打开电脑上的浏览器，启动一系列的监听程序对文件和代码的变化进行，实时渲染到浏览器。

步骤S4包括如下具体的实现步骤：

S41、执行S4的开发命令后NodeJS将会启动监听服务（javascript监听服务，stylesheet监听服务，图片及字体的监听服务）在开发过程中监测文件的变化实时渲染到浏览器端。

S42、根据弹窗的组件需求说明书在代码实现对应的功能，逻辑代码的入口为packages/dialog/index.js 中（在步骤S3中会生成）。按照默认设计实现弹窗的样式，在此阶段中先不考虑（图1）的配色模块的功能，默认的主题方案先集成到弹窗stylesheet 中不作提取；

S43、从默认的弹窗 stylesheet 中提取出组件的配色需要，将一些硬编码到组件的配色变量、图片素材和字体图标提取到图1的配色方案（50）中，按照主题目录进行存放。

S5、弹窗组件开发完成S44后，在 test/unit 目录中创建一个基于弹窗组件的单元测试用例，要覆盖全部该组件的所有功能。

S6、通过测试框架karma启动浏览器测试S5 创建的单元测试用例，如果全部pass则说明该组件版本可以发布。

S7、弹窗组件可以作为一套组件包中的一个和其他功能组件组成一套组件包，将开发好的加到（图4）中的预定义配置（308）中，可以通过这套配置执行脚手架命令 npm runbuild 配置文件路径生成一个包含弹窗组件的组件包。

本发明框架的整个开发过程都是引导式的，弹窗组件的从无到有，从有到发布使用，很少有需要用户侵入修改的，你可能只需要在交互式命令中告诉开发框架弹窗组件的英文名称即可，所见及所得，学习成本很低。

Claims (10)

1.一种基于Nodejs开发界面组件的开发框架，其特征在于：包括开发单元、构建单元、组件包单元、皮肤单元、测试单元和发布单元；

开发单元分别与组件包单元以及皮肤单元相连，组件包单元、构建单元、测试单元和发布单元依次相连；

开发单元依赖皮肤单元和组件包单元，皮肤单元负责配色，组件包单元负责逻辑，构建单元，用于负责整个组件包单元的编译工作，通过内部的一个worker模块采用多线程编译，提高编译效率；

组件包单元，用于提供格式统一的组件源代码和素材；

皮肤单元，用于提供搭配组件渲染让抽象的配色得以实例化；

测试单元，用于进行单元测试和可视化测试；

发布单元，即产品输出目录模块，用于对接各个产品线的所需要的组件库，所述组件库均为单独定制。

2.根据权利要求1所述的基于Nodejs开发界面组件的开发框架，其特征在于：皮肤单元和组件包单元互相独立，皮肤单元需要搭配组件包单元渲染让抽象的配色得以实例化。

3.根据权利要求1所述的基于Nodejs开发界面组件的开发框架，其特征在于：所述组件包单元内具有至少一个组件包，所述组件包里包括格式统一的组件源代码和素材，具体的是位图素材、字体模块和其他组件。

4.根据权利要求3所述的基于Nodejs开发界面组件的开发框架，其特征在于：所述位图素材包括PNG、JPG和GIF，由视觉开发人员提供；字体模块用做单色的矢量图标；其他组件包括功能性组件。

5.根据权利要求4所述的基于Nodejs开发界面组件的开发框架，其特征在于：所述功能性组件的入口一致。

6.根据权利要求1所述的基于Nodejs开发界面组件的开发框架，其特征在于：测试单元包括单元测试unit模块和可视化测试visual模块，单元测试unit模块用于持续集成和持续发布，可视化测试visual模块用于在开发人员开发组件时作为开发组件界面。

7.根据权利要求1所述的基于Nodejs开发界面组件的开发框架，其特征在于：构建单元是整个框架的心脏部分，包括调度中心和预定义配置模块；调度中心控制整个构建流程编排，预定义配置向调度中心发送既定任务，由调度中心根据任务分配线程、配置参数，进而构建子任务。

8.根据权利要求7所述的基于Nodejs开发界面组件的开发框架，其特征在于：预定义配置模块发送的既定任务中包括需要打包的组件、需要搭配的配色方案、预先配置的参数和版本描述信息。

9.权利要求1所述的基于Nodejs开发界面组件的开发框架的实现方法，其特征在于，包括如下步骤：

1）将开发框架下载开发机器上，通过Nodejs自带的依赖安装工具npm 执行安装；

2）通过执行初始化组件的脚手架命令，对dialog组件进行初始化,根据操作界面提示的问题回答后，dialog组件开发环境和配置完成，初始化组件完成；

3）开发dialog组件，执行框架的脚手架命令对弹窗组件进行开发，命令执行完后会自动打开电脑上的浏览器，启动一系列的监听程序对文件和代码的变化进行，实时渲染到浏览器；

4）弹窗组件开发完成后，在 test/unit 目录中创建一个基于弹窗组件的单元测试用例，覆盖全部该组件的所有功能；

5）通过测试框架karma启动浏览器测试S5 创建的单元测试用例，如果全部pass则说明该组件版本可以发布；

6）可以作为一套组件包中的一个和其他功能组件组成一套组件包，将开发好的弹窗组件目录加到对应地市生产环境的预定义配置中，即能通过这套配置执行脚手架命令配置文件路径生成一个包含弹窗组件的组件包。

10.根据权利要求9所述的基于Nodejs开发界面组件的开发框架的实现方法，其特征在于，所述步骤（3）包括如下具体的实现步骤：

3-1）执行步骤（3）的开发命令后NodeJS将会启动监听服务，在开发过程中监测文件的变化实时渲染到浏览器端；

3-2）根据弹窗的组件需求说明书在代码实现对应的功能，逻辑代码的入口在步骤（1）中生成；按照默认设计实现弹窗的样式，在此阶段中先不考虑主流程中的皮肤单元的功能，默认的主题方案先集成到弹窗stylesheet 中不作提取；

3-3）从默认的弹窗 stylesheet 中提取出组件的配色需要，将一些硬编码到组件的配色变量、图片素材和字体图标提取到主流程的皮肤单元中，按照主题目录进行存放。