一种通信方法和装置与流程

文档序号:16246317发布日期:2018-12-11 23:36阅读:99来源:国知局
本发明实施例涉及但不限于互联网技术,尤指一种通信方法和装置。
背景技术
:react作为前端框架的后起之秀,凭借它设计独特,性能出众,代码逻辑简单等特性,受到越来越多的关注和使用,有人认为它可能是将来万维网(web,worldwideweb)开发的主流工具。它的灵魂包括虚拟文档对象模型(dom,documentobjectmodel),javascript可扩展标记语言(xml,extensiblemarkuplanguage)(jsx,javascriptxml),函数式编程和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)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。虽然本发明实施例所揭露的实施方式如上,但所述的内容仅为便于理解本发明实施例而采用的实施方式,并非用以限定本发明实施例。任何本发明实施例所属领域内的技术人员,在不脱离本发明实施例所揭露的精神和范围的前提下,可以在实施的形式及细节上进行任何的修改与变化,但本发明实施例的专利保护范围,仍须以所附的权利要求书所界定的范围为准。当前第1页12当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1