基于组件封装实现组件复用的方法技术

本发明专利技术公开了一种基于组件封装实现组件复用的方法。该方法包括：分析系统需求，获取系统中各功能之间的共有功能；根据获取的共有功能，确定实现共有功能对应的ExtJS组件；对确定的ExtJS组件进行一次封装；在一次封装的ExtJS组件中，获取组件属性值和方法均相同的子组件，对获取的子组件进行二次封装；对一次封装的ExtJS组件以及二次封装的子组件的显示或隐藏属性进行三次封装；根据用户界面功能需求，调用设置的ExtJS组件、一次封装的ExtJS组件、二次封装的子组件以及三次封装组件中的任意一种组件或其组合，实现用户界面所需的各功能。应用本发明专利技术，可以提高组件复用的效率。

【技术实现步骤摘要】
基于组件封装实现组件复用的方法
本专利技术涉及组件复用技术，尤其涉及一种基于组件封装实现组件复用的方法。
技术介绍
ExtJS基于开发富客户端的异步JavaScript和XML(AJAX，AsynchronousJavaScriptandXML)应用，采用Javascript代码编写，主要用于创建前端用户界面。随着ExtJS的应用越来越广泛，ExtJS组件被多次重复定义的问题越来越突出。例如，在使用ExtJS的同类组件实现多个系统功能，或者，多个系统功能需要使用相同或类似的功能界面的情况下，如果不对组件进行封装，每一系统功能都需要相互独立地引用相应的ExtJS组件，使得组件被多次定义而引发代码冗余，实现系统功能所需的时间较长，执行效率较低；进一步地，在系统功能需求变更时，需要修改组件中多处定义的代码，才能达到相应修改系统功能的要求，而在修改过程中，容易因为考虑不周而没有修改组件中某处应修改的代码，造成软件漏洞(bug)，从而影响运行软件的系统质量。为了提高系统运行质量，必须对组件的修改方式进行优化，例如，降低加载组件的复杂性，减少代码的重复率，提高组件的复用率以便于后期维护。现有实现组件复用的方法，往往只注重ExtJS现有组件的优化和使用，该优化方法虽然能够在一定程度上降低代码的重复率，但由于相当多的代码是重复的，仍然存在修改组件中的某处代码后，其它相关代码必须同时修改的问题，增加了开发人员的工作量。以ExtJS本身提供的下拉组合框(ComboBox)组件为例，各不同系统功能实现下拉组合框组件ComboBox的复用，需要相互独立地执行以下步骤：首先，定义下拉组合框组件所需的数据源；本步骤中，对下拉组合框组件所需的数据源进行定义，以便各不同系统功能在后续执行代码时，能够获取到相应的数据。例如，在数据源中设置后台代码的路径、http请求参数、记录标签、字段映射、load是否自动调用等属性值。其次，设置下拉组合框组件的显示属性；本步骤中，显示属性包括：显示字段、值字段、组件默认值、鼠标移动到下拉框某项上的显示样式、隐藏域、label文本、是否可编辑、是否只读等属性值。最后，定义下拉组合框组件的选择属性。本步骤中，选择属性包括：选中、组件渲染前等监听事件，其中，可根据项目或系统实际需要，定义0个、1个或多个监听事件。由上述可见，对于一个多处使用到下拉组合框的系统来说，如果采用ExtJS本身提供的下拉组合框组件来实现组件复用的功能，每一次使用下拉组合框组件时，都需要对下拉组合框组件的数据源进行定义、设置显示属性以及定义选择属性，因而，即使多个系统功能所使用的下拉组合框中的内容一模一样，也需要分别进行多次定义和设置；进一步地，如果下拉组合框中的内容改变，需要相应修改多个系统功能所使用的下组合拉框定义的代码，增加了修改工作量，使得组件复用效率较低。因而，在多个功能使用到同样的组件或类似的功能界面的情况下，现有的组件复用实现方法是通过将组件进行多次重复的定义，从而造成大量的代码冗余，组件复用效率较低，甚至增加维护成本，使得在多个功能需要使用到同样的组件或类似的功能界面的情况下，针对组件进行封装和重组的需求和压力与日俱增。也就是说，现有基于多个功能实现组件复用的方法，根据ExtJS框架提供的组件(ExtJS组件)，针对每一功能，为每一功能直接编写Javascript代码，对ExtJS框架提供的组件进行设置和定义，从而通过运行代码，调用ExtJS组件来生成功能相应的用户界面，使得需要对组件进行多次重复的定义，从而造成大量的Javascript代码冗余，运行代码所需的时间较长，组件复用效率较低。
技术实现思路
本专利技术的实施例提供一种基于组件封装实现组件复用的方法，提高组件复用的效率。为达到上述目的，本专利技术实施例提供的一种基于组件封装实现组件复用的方法，包括：分析系统需求，获取系统中各功能之间的共有功能；根据获取的共有功能，确定实现共有功能对应的ExtJS组件；对确定的ExtJS组件进行第一次封装；在第一次封装的ExtJS组件中，获取组件属性值和方法均相同的子组件，对获取的子组件进行第二次封装；对第一次封装的ExtJS组件以及第二次封装的子组件的显示或隐藏属性进行第三次封装；根据用户界面功能需求，调用设置的ExtJS组件、第一次封装的ExtJS组件、第二次封装的子组件以及第三次封装组件中的任意一种组件或其组合，实现用户界面所需的功能。其中，所述对确定的ExtJS组件进行第一次封装的步骤之前，所述方法进一步包括：确定系统中各功能所需ExtJS组件的组件属性和方法；如果系统中各功能所需的ExtJS组件的组件属性和方法完全相同，或者，不超过预设阈值数的组件属性或方法，确定待封装的ExtJS组件不保留ExtJS组件的组件属性值和方法；否则，确定待封装的ExtJS组件保留ExtJS组件的组件属性值和方法。其中，所述组件属性包括：下拉组合框组件的长度、是否可编辑、标签文本以及是否有联动。其中，所述ExtJS组件为下拉组合框组件时，对确定的ExtJS组件进行第一次封装具体包括：调用Ext类的extend方法和apply方法，将数据源参数和ExtJS组件的valueField、displayField属性封装成不可见，其它属性、方法和事件封装成为可见；为封装的ExtJS组件增加可见的用于为数据源参数赋值的属性codeType。其中，所述方法进一步包括：对codeType属性进行赋值，触发数据源将该codeType属性的值作为数据源参数的值，输出至用户界面所属客户端的后台；后台根据接收的数据源参数的值，执行相应的结构化查询语言语句，从存储数据源的数据库中取出数据，绑定在第一次封装的ExtJS组件中。其中，所述获取组件属性值和方法均相同的子组件，对获取的子组件进行第二次封装包括：定义第二次封装的第一下拉组合框组件以及第二下拉组合框组件，其中，第一下拉组合框组件用于封装属性；第二下拉组合框组件封装属性及其选择监听事件。其中，所述第一下拉组合框组件的定义方法为：定义相应参数分别为前缀、codeType属性值、label文本属性值的方法，在该方法内调用下拉组合框第一次封装组件，通过传入的前缀值，为下拉组合框第一次封装组件的标识、隐藏域赋传入的前缀值对应的值；将定义的label文本属性值赋值给下拉组合框第一次封装组件的label文本属性。其中，所述第二下拉组合框组件的定义方法为：定义一个参数为前缀的方法，在该方法内，分别调用下拉组合框第一次封装组件，定义具有联动效果的下拉组合框子组件，通过传入相应的具有联动效果的子组件的前缀值，为下拉组合框第一次封装组件的标识、隐藏域赋相应的值，并将具有联动效果的子组件的选择事件进行封装。其中，所述第三次封装组件的定义方法为：定义相应参数分别为前缀、Window组件的ID、GridPanel组件的ID的方法，在该方法内，定义一个包括配置项items和按钮的面板组件。其中，所述面板组件的配置项items通过调用一个或多个ExtJS组件、和/或，第一次封装组件、和/或，第二次封装组件来构成相应的用户界面，通过前缀，为面板组件及其调用的组件的标识、隐藏域进行赋值，控制第三次封装组件的隐藏或显示，按钮的事件中，通本文档来自技高网...

【技术保护点】
一种基于组件封装实现组件复用的方法，包括：分析系统需求，获取系统中各功能之间的共有功能；根据获取的共有功能，确定实现共有功能对应的ExtJS组件；对确定的ExtJS组件进行一次封装；在一次封装的ExtJS组件中，获取组件属性值和方法均相同的子组件，对获取的子组件进行二次封装；对一次封装的ExtJS组件以及二次封装的子组件的显示或隐藏属性进行三次封装；根据用户界面功能需求，调用设置的ExtJS组件、一次封装的ExtJS组件、二次封装的子组件以及三次封装组件中的任意一种组件或其组合，实现用户界面所需的功能。

【技术特征摘要】
1.一种基于组件封装实现组件复用的方法，其特征在于，包括：分析系统需求，获取系统中各功能之间的共有功能；根据获取的共有功能，确定实现共有功能对应的ExtJS组件；对确定的ExtJS组件进行第一次封装；在第一次封装的ExtJS组件中，获取组件属性值和方法均相同的子组件，对获取的子组件进行第二次封装；对第一次封装的ExtJS组件以及第二次封装的子组件的显示或隐藏属性进行第三次封装；根据用户界面功能需求，调用设置的ExtJS组件、第一次封装的ExtJS组件、第二次封装的子组件以及第三次封装组件中的任意一种组件或其组合，实现用户界面所需的功能。2.根据权利要求1所述的方法，其中，所述对确定的ExtJS组件进行第一次封装的步骤之前，所述方法进一步包括：确定系统中各功能所需ExtJS组件的组件属性和方法；如果系统中各功能所需的ExtJS组件的组件属性和方法完全相同，或者，不超过预设阈值数的组件属性或方法，确定待封装的ExtJS组件不保留ExtJS组件的组件属性值和方法；否则，确定待封装的ExtJS组件保留ExtJS组件的组件属性值和方法。3.根据权利要求2所述的方法，其中，所述组件属性包括：下拉组合框组件的长度、是否可编辑、标签文本以及是否有联动。4.根据权利要求3所述的方法，其中，所述ExtJS组件为下拉组合框组件时，对确定的ExtJS组件进行第一次封装具体包括：调用Ext类的extend方法和apply方法，将数据源参数和ExtJS组件的valueField、displayField属性封装成不可见，其它属性、方法和事件封装成为可见；为封装的ExtJS组件增加可见的用于为数据源参数赋值的属性codeType。5.根据权利要求4所述的方法，其中，所述方法进一步包括：对codeType属性进行赋值，触发数据源将该codeType属性的值作为数据源参数的值，输出至用户界面所属客户端的后台；后台根据接收的数...

【专利技术属性】
技术研发人员：袁晓娟，梁云杰，朱春玲，贾晓霞，吕建波，吴卫荣，吴瑜，王非，郭红钰，张勇，
申请(专利权)人：中国电子科技集团公司第十五研究所，
类型：发明
国别省市：