CN108984178A - 一种通信方法和装置 - Google Patents
一种通信方法和装置 Download PDFInfo
- Publication number
- CN108984178A CN108984178A CN201810672716.4A CN201810672716A CN108984178A CN 108984178 A CN108984178 A CN 108984178A CN 201810672716 A CN201810672716 A CN 201810672716A CN 108984178 A CN108984178 A CN 108984178A
- Authority
- CN
- China
- Prior art keywords
- data structure
- component
- assignment
- communication means
- array
- 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.)
- Granted
Links
- 238000004891 communication Methods 0.000 title claims abstract description 26
- 238000000034 method Methods 0.000 claims description 18
- 238000003860 storage Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 6
- 238000012546 transfer Methods 0.000 claims description 3
- 230000008859 change Effects 0.000 description 5
- 238000013507 mapping Methods 0.000 description 5
- 238000009877 rendering Methods 0.000 description 5
- DBGIVFWFUFKIQN-UHFFFAOYSA-N (+-)-Fenfluramine Chemical compound CCNC(C)CC1=CC=CC(C(F)(F)F)=C1 DBGIVFWFUFKIQN-UHFFFAOYSA-N 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 239000003638 chemical reducing agent Substances 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 238000013508 migration Methods 0.000 description 1
- 230000005012 migration Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/45—Exploiting coarse grain parallelism in compilation, i.e. parallelism between groups of instructions
- G06F8/457—Communication
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例公开了一种通信方法和装置,所述通信方法包括:将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联;将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与所述第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。本发明实施例通过将为组件定义是数据结构进行关联来实现信息的传递,实现简单,提高了性能,降低了代码冗余。
Description
技术领域
本发明实施例涉及但不限于互联网技术,尤指一种通信方法和装置。
背景技术
React作为前端框架的后起之秀,凭借它设计独特,性能出众,代码逻辑简单等特性,受到越来越多的关注和使用,有人认为它可能是将来万维网(Web,World Wide Web)开发的主流工具。它的灵魂包括虚拟文档对象模型(DOM,Document Object Model),JavaScript可扩展标记语言(XML,Extensible Markup Language)(JSX,JavaScript XML),函数式编程和immutable(不可改变的),单向数据流,组件化抽象。React中的虚拟DOM对于性能的优化,以及React中组件化模块化的开发方式提供的代码复用和方便团队协作的优势已经越来越被Web前端开发人员所青睐。
目前,组件化开发是前端开发中的主流方式,组件的复用性是组件开发的核心。不仅要写出高质量和高复用性的组件,更要考虑好组件之间的传递信息和数据的方式。目前,React也提供了一些组件之间交流通信的一些方式,父子组件之间可以通过React提供的props属性和回调函数的方式进行信息和数据的相互传递。但是如果是两个不相关的组件,就要借助与React结合使用的第三方数据流管理模块Redux才能实现数据和信息的传递。借助Redux不仅需要在项目环境配置中进行配置,而且还要遵循action、reducer、对象(store)等整个逻辑的完成,这对于复杂的数据处理很有必要。但是,这种对于组件之间的信息传递会浪费性能和代码冗余。
发明内容
本发明实施例提供了一种通信方法和装置,能够提高性能,降低代码冗余。
本发明实施例提供了一种通信方法,包括:
将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联;
将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与所述第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。
在本发明另一个实施例中,该方法还包括:
将所述第二数据结构的赋值存储到所述第二组件的状态中。
在本发明另一个实施例中,该方法之前还包括:
为所述第一组件定义第一数据结构;为所述第二组件定义第二数据结构。
在本发明实施例中,所述第一数据结构或所述第二数据结构包括以下任一种:数组、对象。
本发明实施例还提出了一种通信装置,包括:
关联模块,用于将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联;
信息传递模块,用于将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与所述第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。
本发明实施例还提出了一种通信装置,包括处理器和计算机可读存储介质,所述计算机可读存储介质中存储有指令,当所述指令被所述处理器执行时,实现上述任一种通信方法。
本发明实施例还提出了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述任一种通信方法的步骤。
本发明实施例包括:将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联;将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。本发明实施例通过将为组件定义是数据结构进行关联简单的实现了信息的传递,提高了性能,降低了代码冗余。
本发明实施例的其它特征和优点将在随后的说明书中阐述,并且,部分地从说明书中变得显而易见,或者通过实施本发明实施例而了解。本发明实施例的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。
附图说明
附图用来提供对本发明实施例技术方案的进一步理解,并且构成说明书的一部分,与本发明实施例的实施例一起用于解释本发明实施例的技术方案,并不构成对本发明实施例技术方案的限制。
图1为本发明实施例通信方法的流程图;
图2为本发明实施例通信装置的结构组成示意图。
具体实施方式
下文中将结合附图对本发明实施例进行详细说明。需要说明的是,在不冲突的情况下,本发明中的实施例及实施例中的特征可以相互任意组合。
在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
网页页面上所能看到的元素均能翻译成小组件,多个小组件组成一个大组件。也就是说,一个网页页面可以看做是一个大组件,网页里面的表格、表单、按钮、输入框等页面元素都是一个个小组件,甚至这些小组件还可以分成更小的组件。
在React中将大组件定义为父组件,将小组件定义为子组件。
React已经提供了父组件和子组件之间的传值方式,即props和状态(state)的更改都会触发组件渲染更新,同一个组件内的props和state,props是从外层父组件获取的,而state则是当前组件自己维护的。父组件可以通过props向子组件传递信息,实现父组件和子组件之间的数据传递和改变。一个组件的内部,可以通过state的改变进行数据的更改。但是不相关的两个组件之间传递信息除了可以借助redux,目前还没有特别好的方法。
参见图1,本发明一个实施例提出了一种通信方法,包括:
步骤100、将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联。
在本发明实施例中,第一数据结构或第二数据结构可以是任意数据结构,如数组或对象。
在本发明实施例中,第一组件的第一数据结构可以和一个第二组件的第二数据结构关联;或者,第一组件的第一数据结构和至少两个第二组件的第二数据结构关联。
在本发明实施例中,可以通过建立第一数据结构的标识(ID)和第二数据结构的标识之间的映射关系来实现将第一数据结构和第二数据结构进行关联。
当第一数据结构和第二数据结构为数组时,建立第一数据结构的标识和第二数据结构的标识之间的映射关系之外还可以建立第一数组的索引值和第二数组的索引值的映射关系,也就是说,将第一数组的索引值和第二数组的索引值相同的元素一一对应。
步骤101、将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。
在本发明实施例中,当第一数据结构和第二数据结构为数组时,可以利用Javascript将进行信息交流的元素赋值到第一数据结构中,并传递到与第一数据结构关联的至少一个第二数据结构,具体的,利用Javascript中的操作数组的方法push将进行信息交流的元素的赋值插入到第一组件的数组中,并传递到第二组件的数组。
当第一数据结构和第二数据结构为对象时,在将进行信息交流的元素的赋值插入到第一数据结构时,将进行信息交流的元素自定义一个名称和进行赋值,以对象的形式{name:value}存储到第一数据结构中;其中,name为进行信息交流的元素的名称,value为进行信息交流的元素的赋值。
在将第一数据结构中进行信息交流的元素的赋值传递到与第一数据结构关联的至少一个第二数据结构时,可以为第二数据结构中进行信息交流的元素定义一个变量,并将该变量赋值为第一数据结构中同一进行信息交流的元素的赋值;
或者,将第二组件的进行信息交流的元素的所有可能的赋值插入到第二数据结构中,并将第一数据结构中进行信息交流的元素的赋值合并到第二数据结构中(可以利用Javascript合并对象的方法,即Object.assign()方法),然后将第一数据结构中进行信息交流的元素的赋值与第二数据结构中同一进行信息交流的元素的所有可能的赋值进行比较(可以利用Javascript比较对象的方法,即Object.is()方法),如果相同,则将第二数据结构中该进行信息交流的元素的该赋值转换成Json数据(可以利用JSON.stringify(obj)方法转换成Json数据),并存储到第二组件的状态中,即第二组件的状态发生改变,触发第二组件重新进行渲染更新,从而达到组件间信息的传递。
在另一个实施例中,在将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与第一数据结构关联的至少一个第二数据结构之前,该方法还包括:确定用户对第一组件进行操作。这种情况下说明用户希望将第一组件的赋值传递到第二组件,因此,需要将第一数据结构中进行信息交流的元素的赋值传递给第二数据结构。
当确定用户对第二组件进行操作时,将进行信息交流的元素的赋值插入到第二数据结构中,并传递到与第二数据结构关联的至少一个第一数据结构。
在本发明另一个实施例中,该方法还包括:
判断第一组件和第二组件是否是父子组件,当判断出第一组件和第二组件不是父子组件时,采用步骤101实现信息传递;
当判断出第一组件和第二组件为父子组件时,通过props和state进行信息传递,当state改变时触发组件渲染更新,从而实现数据更新。
在本发明另一个实施例中,该方法还包括:
将所述第二数据结构的赋值存储到所述第二组件的状态中。
在本发明实施例中,可以以json数据的形式(即key:value的形式;其中,key表示元素,value为具体取值)将第二数据结构的赋值存储到第二组件的状态中,即第二组件的状态发生改变,触发第二组件重新进行渲染更新,从而达到组件间信息的传递。
在本发明另一个实施例中,该方法之前还包括:
为所述第一组件定义第一数据结构;为所述第二组件定义第二数据结构。
也就是说,为每一个组件定义一个数据结构。例如,为每一个组件定义一个空数组。
下面以快速时间选择组件和日历组件之间的信息传递为例说明本发明实施例的实现方式。
快速时间选择组件和日历组件是不相关的两个组件,即不是父子组件。快速时间选择组件有最近三天、最近七天、最近一个月、以及最近一年这几个按钮元素,日历组件有开始时间和结束时间两个元素。
(1)为快速时间选择组件定义空数组1,为日历组件定义空数组2。
(2)将空数组1和空数组2进行关联,即建立空数组1的索引值和空数组2的索引值之间的映射关系,也就是说,将空数组1和空数组2的索引值一一对应好,具体的,将空数组1的索引值为0的元素与空数组2的索引值为0的元素对应,将空数组1的索引值为1的元素与空数组2的索引值为1的元素对应,……,以此类推。
(3)当用户点击快速时间选择组件的某个按钮元素时,获取点击的按钮元素的赋值,即开始时间和结束时间,将获得的赋值插入到空数组1中。
根据映射关系将数组1中的赋值传递到数组2中,即将数组1中的赋值传递到数组2中索引值相同的元素中。
以Json数据的形式将数组2中的赋值存储到日历组件的state中,即日历组件的state进行改变,触发日历组件进行重新渲染,从而完成组件之间信息的传递。
(4)当用户在日历组件上选择好开始时间和结束时间时,将选择的开始时间和结束时间的赋值插入到空数组2中。
根据映射关系将数组2的赋值传递到数组1中,即将数组2中的赋值传递到数组1中索引值相同的元素中。
以Json数据的形式将数组1中的赋值存储到快速时间选择组件的state中,即快速时间选择组件的state进行改变,触发快速时间选择组件进行重新渲染,从而完成组件之间信息的传递。
本发明实施例利用数组的索引值对应关系,以及react组件自身state属性相结合,完成不相关组件的相互连接和组件的重新渲染以及数据的最终改变。同样本发明实施例也适用于三个或者三个以上不相关组件进行传递信息,原理简单易懂,操作方便,节约性能,并且有比较好的扩展性。
参见图2,本发明另一个实施例提出了一种通信装置,包括:
关联模块201,用于将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联;
信息传递模块202,用于将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。
在本发明另一个实施例中,还包括:
存储模块203,用于将所述第二数据结构的赋值存储到所述第二组件的状态中。
在本发明另一个实施例中,还包括:
自定义模块204,用于为所述第一组件定义第一数据结构;为所述第二组件定义第二数据结构。
本发明另一个实施例提出了一种通信装置,包括处理器和计算机可读存储介质,所述计算机可读存储介质中存储有指令,当所述指令被所述处理器执行时,实现上述任一种通信方法。
本发明另一个实施例提出了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述任一种通信方法的步骤。
计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。
虽然本发明实施例所揭露的实施方式如上,但所述的内容仅为便于理解本发明实施例而采用的实施方式,并非用以限定本发明实施例。任何本发明实施例所属领域内的技术人员,在不脱离本发明实施例所揭露的精神和范围的前提下,可以在实施的形式及细节上进行任何的修改与变化,但本发明实施例的专利保护范围,仍须以所附的权利要求书所界定的范围为准。
Claims (7)
1.一种通信方法,包括:
将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联;
将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与所述第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。
2.根据权利要求1所述的通信方法,其特征在于,该方法还包括:
将所述第二数据结构的赋值存储到所述第二组件的状态中。
3.根据权利要求1所述的通信方法,其特征在于,该方法之前还包括:
为所述第一组件定义第一数据结构;为所述第二组件定义第二数据结构。
4.根据权利要求1或2所述的通信方法,其特征在于,所述第一数据结构或所述第二数据结构包括以下任一种:数组、对象。
5.一种通信装置,包括:
关联模块,用于将预先为第一组件定义的第一数据结构和M个预先为第二组件定义的第二数据结构进行关联;
信息传递模块,用于将进行信息交流的元素的赋值插入到第一数据结构中,并传递到与所述第一数据结构关联的N个第二数据结构;其中,M,N为大于或等于1的整数,且N小于或等于M。
6.一种通信装置,包括处理器和计算机可读存储介质,所述计算机可读存储介质中存储有指令,其特征在于,当所述指令被所述处理器执行时,实现如权利要求1~4任一项所述的通信方法。
7.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1~4任一项所述的通信方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810672716.4A CN108984178B (zh) | 2018-06-26 | 2018-06-26 | 一种通信方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810672716.4A CN108984178B (zh) | 2018-06-26 | 2018-06-26 | 一种通信方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN108984178A true CN108984178A (zh) | 2018-12-11 |
CN108984178B CN108984178B (zh) | 2022-02-18 |
Family
ID=64538844
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810672716.4A Active CN108984178B (zh) | 2018-06-26 | 2018-06-26 | 一种通信方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN108984178B (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110209440A (zh) * | 2019-06-14 | 2019-09-06 | 福建睿思特科技股份有限公司 | 一种React组件的使用优化方法及存储介质 |
CN113407163A (zh) * | 2021-05-18 | 2021-09-17 | 中广核工程有限公司 | 模块关联赋值方法、装置、计算机设备及可读存储介质 |
CN114968752A (zh) * | 2021-02-25 | 2022-08-30 | 北京嘀嘀无限科技发展有限公司 | 赋值元素的确定方法、装置、计算机设备和存储介质 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
CN107273104A (zh) * | 2016-04-08 | 2017-10-20 | 阿里巴巴集团控股有限公司 | 一种配置数据结构的处理方法及装置 |
CN108062223A (zh) * | 2017-11-29 | 2018-05-22 | 北京新能源汽车股份有限公司 | 一种Simulink模型之间建立连接关系的方法及装置 |
-
2018
- 2018-06-26 CN CN201810672716.4A patent/CN108984178B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105354013A (zh) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | 应用界面渲染方法及装置 |
CN107273104A (zh) * | 2016-04-08 | 2017-10-20 | 阿里巴巴集团控股有限公司 | 一种配置数据结构的处理方法及装置 |
CN108062223A (zh) * | 2017-11-29 | 2018-05-22 | 北京新能源汽车股份有限公司 | 一种Simulink模型之间建立连接关系的方法及装置 |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110209440A (zh) * | 2019-06-14 | 2019-09-06 | 福建睿思特科技股份有限公司 | 一种React组件的使用优化方法及存储介质 |
CN114968752A (zh) * | 2021-02-25 | 2022-08-30 | 北京嘀嘀无限科技发展有限公司 | 赋值元素的确定方法、装置、计算机设备和存储介质 |
CN113407163A (zh) * | 2021-05-18 | 2021-09-17 | 中广核工程有限公司 | 模块关联赋值方法、装置、计算机设备及可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN108984178B (zh) | 2022-02-18 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11514033B2 (en) | System for providing dynamic linked panels in user interface | |
US10379710B2 (en) | Modeling system for graphic user interface | |
US7836119B2 (en) | Distributed execution model for cross-organizational declarative web applications | |
Mena et al. | A progressive web application based on microservices combining geospatial data and the internet of things | |
US8839192B2 (en) | System and method for presentation of cross organizational applications | |
CN109697064A (zh) | 一种自定义页面的生成方法及装置 | |
US8769439B2 (en) | Method for creation, management, and presentation of user-scoped navigation topologies for web applications | |
CN108984178A (zh) | 一种通信方法和装置 | |
CN109670011B (zh) | 一种多图源地图服务引擎 | |
Cincovic et al. | Architecture of web applications based on Angular Framework: A Case Study | |
Kirsch et al. | The snippet platform architecture-dynamic and interactive compound documents | |
CN110362305A (zh) | 一种表单组件状态切换方法及装置 | |
Picozzi | End user develompent of mashups: models, composition paradigms and tools | |
CN107180107A (zh) | Ionic框架下的手机附件上传选择文件的方法及系统 | |
Ruponen | The front-end architectural design and implementation of a modularized web portal | |
Rojas et al. | Working with Vue. js | |
Volk | Visual Analysis of TeX Repositories | |
Rossi* et al. | Integrating patterns into the hypermedia development process | |
Kolovos et al. | Using model-to-text transformation for dynamic web-based model navigation | |
Baumgärtner | Framework Design | |
Yadav | Building a Blog Project Using JavaScript, NodeJS and MongoDB | |
CN106886465A (zh) | 一种数据获取方法及装置 | |
Liang | The Study and Application of the New Control Layer for Enterprise-Class Web Applications | |
Grüneberger et al. | Real-time Collaboration Support for JavaScript Frameworks | |
CN117348871A (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant | ||
PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: A communication method and device Granted publication date: 20220218 Pledgee: Beijing Bank Co.,Ltd. Beiyuan Road Branch Pledgor: BEIJING BAIWU TECH CO.,LTD. Registration number: Y2024110000052 |
|
PE01 | Entry into force of the registration of the contract for pledge of patent right |