CN105786522A - 基于Node.js平台的WEB前端通用组件 - Google Patents

Abstract

本发明提供一种基于Node.js平台的WEB前端通用组件，包括：组件管理模块和多个通用组件；组件管理模块是各组件与前端网页以及各组件之间的通讯接口；通用组件包括对象编辑器组件、对象选择器组件、表格浏览组件和对话框组件。对象编辑器组件用于用户对对象的编辑；对象选择器组件用于用户依据不同属性对对象的筛选，又包括条件选择器、下拉框选择器、条件下拉框选择器、二级选择器和多项选择器；表格浏览组件用于查询结果的展示；对话框组件用于和用户的信息交互。

Description

基于Node.js平台的WEB前端通用组件

技术领域

本发明涉及互联网技术领域，尤其是一种基于Node.js平台的WEB前端通用组件。

背景技术

WorldWideWeb（简称WEB）是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。

Web前端开发技术包括三个要素：HTML、CSS（层叠样式表单）和JavaScript。随着Web2.0概念的普及和W3C组织的推广，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于JavaScript为标志的前端技术实现的。

然而，随着网站需求的惊人增长，传统的基于JavaScript的前端开发已经越来越不能满足开发需要，虽然JavaScript以其灵活性能实现各种网页的需求，但是其代码量却随之大幅度上升，代码的可读性与维护性急剧恶化。WEB的组件化开发逐渐成为近几年来的发展趋势，其可快速使用、编辑和删除的高度灵活性和可重用性大大提高了WEB网站的开发效率。另外，WEB前端采用JavaScript语言开发，后端的开发语言却多种多样，这也大大增加了前后端开发人员的沟通难度。Node.js是近几年来发展起来的一个基于ChromeV8引擎的JavaScript运行环境，它是运行在服务器端的JavaScript容器。Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效。Node.js的包管理器npm，是全球最大的开源库生态系统。因此，越来越多的人加入基于Node.js平台的WEB开发行列。

发明内容

本发明的目的在于提供一种基于Node.js平台的WEB前端通用组件，通过对WEB网站常规功能的调研与分析归类，设计出低耦合性的可满足WEB常规功能需求的各类组件，并通过对各类组件可配置性的研究，以配置文件的形式对组件的属性、样式进行配置，大大增加了组件的灵活性，使得组件能移植于各类不同的WEB网站。本发明可使WEB网站的整体结构更加清晰、易于理解，同时由于组件与WEB网站之间通过接口联系，可以随时删除、插入和修改，大大增强了WEB网站的易维护性。组件的可移植性强，重用力度大，组件之间的低耦合度都促成了WEB网站灵活多变的开发方式及升级方式。本发明采用的技术方案是：

一种基于Node.js平台的WEB前端通用组件，包括：组件管理模块和多个通用组件；所述通用组件包括：对象编辑器组件、对象选择器组件、表格浏览器组件和对话框组件；

所述组件管理模块，为各组件与前端WEB网页的接口，用于负责实例化相应的组件；每个组件的配置信息从后台配置文件读取，配置信息包括组件和对象的属性信息、组件html显示信息、组件的CSS样式信息；组件管理模块也是各个组件之间的接口，使得各组件能够配合使用。

进一步地，

对象编辑器组件直接与用户交互，对象编辑器组件用于对象属性信息的新建、编辑和删除，用户对对象的属性通过配置文件进行设置；

对象选择器组件直接与用户交互，用户可通过对象选择器组件选择对象的不同属性来筛选对象；

表格浏览组件直接与用户交互，用于数据信息的展示，表格浏览组件与对象选择器组件组合使用，将对象选择器组件中条件选择器对数据库数据的筛选结果通过表格形式展现出来；

对话框组件直接与用户交互，包括提示型对话框和确认型对话框；提示型对话框组件对用户起到提示或警示作用；确认型对话框组件起到和用户交互的作用，让用户对自身的行为进行确认。

更进一步地，

所述对象选择器组件包括条件选择器、下拉框选择器、条件下拉框选择器、二级选择器和多项选择器；

条件选择器用于根据用户选择的条件类别在数据库中查询到相应数据；

下拉框选择器用于将选定对象的所有属性信息以下拉框的形式显示出来，以供用户选择；

条件下拉框选择器用于在下拉框选择器的基础之上，用户根据条件筛选得到响应的对象属性信息，再加以选择；

二级选择器用于将具有二级属性的对象属性以分级的形式显示出来，以供用户选择；

多项选择器用于将一个对象的所有属性信息以选择框的形式显示出来，用户可在其中选取多个属性。

本发明的优点：可大大节约网站建设人员的代码开发量，组件灵活可配置的特性也能满足各网站的不同需求，同时增强了网站的可维护性；组件的可移植性强，重用力度大，组件之间的低耦合度都促成了WEB网站灵活多变的开发方式及升级方式。

附图说明

图1为本发明的结构组成示意图。

具体实施方式

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

基于Node.js平台的WEB前端通用组件，包括：组件管理模块和多个通用组件；

参考图1，Node.js由前端WEB网页和后台服务器组成，当网站编码人员从前台需要调用后台组件时，需要调用组件管理模块，组件管理模块负责实例化相应的组件；每个组件的配置信息从后台js文件读取，配置信息包括组件和对象的属性信息、组件html显示信息、组件的CSS样式信息；js文件是以js为扩展名的文件,是用javascript脚本语言编写的，本例中作为配置文件；

本发明的通用组件包括对象编辑器组件、对象选择器组件、表格浏览器组件和对话框组件；

1)对象编辑器组件直接与用户交互，对象编辑器组件用于对象属性信息的新建、编辑和删除，用户对对象的属性通过配置文件（具体采用js文件）进行设置；比如网页中一件商品的名称、价格等信息就是对象的属性信息；网站编码人员通过js文件对对象的属性、每种属性的展现形式、字体样式等进行配置，且具备可复用等特点；

2)对象选择器组件直接与用户交互，用户可通过对象选择器组件选择对象的不同属性来筛选对象；对象选择器组件包括条件选择器、下拉框选择器、条件下拉框选择器、二级选择器和多项选择器五个组件模块；

2.1)条件选择器用于根据用户选择的条件类别在数据库中查询到相应数据，常与表格浏览组件配合使用；网站编码人员根据需要通过js文件对对象的选择条件进行配置，同时可对条件选择器的CSS样式及展现方式（即html显示信息）进行配置；

2.2)下拉框选择器用于将选定对象的所有属性信息以下拉框的形式显示出来，以供用户选择；网站编码人员根据需要通过js文件对对象的属性信息进行配置，同时可对下拉框选择器的CSS样式及展现方式（即html显示信息）进行配置；

2.3)条件下拉框选择器用于在下拉框选择器的基础之上，用户根据条件筛选得到响应的对象属性信息，再加以选择。网站编码人员根据需要通过js文件对对象的属性信息进行配置，同时可对条件下拉框选择器的CSS样式及展现方式（即html显示信息）进行配置；

2.4)二级选择器用于将某个具有二级属性的对象属性以分级的形式显示出来，以供用户选择，常用的为城市选择器、公司所属行业选择器等。网站编码人员根据需要通过js文件对对象的属性信息进行配置，同时可对二级选择器的CSS样式及展现方式（即html显示信息）进行配置；

2.5)多项选择器用于将某个对象的所有属性信息以选择框的形式显示出来，用户可在其中选取多个属性；网站编码人员根据需要通过js文件对对象的属性信息进行配置，同时可对多项选择器的CSS样式及展现方式（即html显示信息）进行配置。

3)表格浏览组件直接与用户交互，用于数据信息的展示，表格浏览组件与对象选择器组件组合使用，将对象选择器组件中条件选择器对数据库数据的筛选结果通过表格形式展现出来；网站编码人员可通过js文件（配置文件）对表格的表头内容，表格每行每列的宽度和高度等样式进行配置。

4)对话框组件直接与用户交互，主要分为提示型对话框和确认型对话框两种。提示型对话框组件主要是对用户起到提示或警示作用；确认型对话框组件主要是起到和用户交互的作用，让用户对自身的行为进行确认。网站编码人员通过js文件（配置文件）对对话框的CSS样式进行配置。

上述通用组件可用于任意信息展示型的网站，组件化的开发思想可大大节约网站建设人员的代码开发量，组件灵活可配置的特性也能满足各网站的不同需求，同时增强了网站的可维护性；基于Node.js开发平台，前后端开发人员均采用JavaScript开发语言，前后台交接更加流畅。以上举例仅仅是对本发明的举例说明，并不构成对本发明的保护范围的限制，凡是与本申请的相同的构思及简单变形，均属于本发明的保护范围。

Claims (3)

1.一种基于Node.js平台的WEB前端通用组件，其特征在于，包括：组件管理模块和多个通用组件；所述通用组件包括：对象编辑器组件、对象选择器组件、表格浏览器组件和对话框组件；

所述组件管理模块，为各组件与前端WEB网页的接口，用于负责实例化相应的组件；每个组件的配置信息从后台配置文件读取，配置信息包括组件和对象的属性信息、组件html显示信息、组件的CSS样式信息；组件管理模块也是各个组件之间的接口，使得各组件能够配合使用。

2.如权利要求1所述的基于Node.js平台的WEB前端通用组件，其特征在于：

对象编辑器组件直接与用户交互，对象编辑器组件用于对象属性信息的新建、编辑和删除，用户对对象的属性通过配置文件进行设置；

对象选择器组件直接与用户交互，用户可通过对象选择器组件选择对象的不同属性来筛选对象；

表格浏览组件直接与用户交互，用于数据信息的展示，表格浏览组件与对象选择器组件组合使用，将对象选择器组件中条件选择器对数据库数据的筛选结果通过表格形式展现出来；

对话框组件直接与用户交互，包括提示型对话框和确认型对话框；提示型对话框组件对用户起到提示或警示作用；确认型对话框组件起到和用户交互的作用，让用户对自身的行为进行确认。

3.如权利要求2所述的基于Node.js平台的WEB前端通用组件，其特征在于：

所述对象选择器组件包括条件选择器、下拉框选择器、条件下拉框选择器、二级选择器和多项选择器；

条件选择器用于根据用户选择的条件类别在数据库中查询到相应数据；

下拉框选择器用于将选定对象的所有属性信息以下拉框的形式显示出来，以供用户选择；

条件下拉框选择器用于在下拉框选择器的基础之上，用户根据条件筛选得到响应的对象属性信息，再加以选择；

二级选择器用于将具有二级属性的对象属性以分级的形式显示出来，以供用户选择；

多项选择器用于将一个对象的所有属性信息以选择框的形式显示出来，用户可在其中选取多个属性。