一种基于Vue给Dom字符串绑定事件的方法和装置

技术领域

本发明涉及Dom字符串绑定事件技术领域，尤其涉及一种基于Vue给Dom字符串绑定事件的方法和装置。

背景技术

在基于Vue.js框架的前端项目开发中，在使用第三方插件尤其是图表插件时，经常会遇到通过Dom字符串方式配置自定义Dom节点的情况，当节点内容比较复杂，需要绑定事件甚至需要向事件中传递数据时，传统的处理方式主要有两种，方式一：通过字符串直接绑定事件字符；方式二：将Dom字符渲染成真实Dom后通过可运行在浏览器端的计算机脚本语言javascript绑定事件。

在实际应用中，处理方式一存在的不足是：事件绑定后，如果携带数据，可以通过浏览器的开发者模式清楚地查看到携带数据，并且携带的数据内容不能是函数类型的数据。方法二的不足是：必须要确保Dom字符渲染成真实Dom后才能通过javascript去绑定事件，并且无法实现将Dom和所需携带数据绑定在一起。

因此，如何提供一种更加隐私、灵活且兼容性更强的给Dom字符串绑定事件的方法，成为亟待解决的技术问题。

发明内容

有鉴于此，为了克服现有技术的不足，本发明旨在提供一种基于Vue给Dom字符串绑定事件的方法和装置。

根据本发明的第一方面，提供一种基于Vue给Dom字符串绑定事件的方法，包括：

通过构建内部闭包函数并采用构建的内部闭包函数注册工具方法，创建一个工具函数；

采用创建的工具函数接收函数名参数和待绑定数据，根据接收的函数名参数和待绑定数据执行创建的工具函数，生成事件绑定字符串；

将生成的事件绑定字符串插入到Dom字符串指定位置。

优选地，本发明基于Vue给Dom字符串绑定事件的方法中，通过构建内部闭包函数并采用构建的内部闭包函数注册工具方法，创建一个工具函数，包括：通过javascript脚本创建一个内部闭包函数，通过所述创建的内部闭包函数注册一个挂在标识浏览器窗口的window变量上的方法。

优选地，本发明基于Vue给Dom字符串绑定事件的方法中，采用创建的工具函数接收函数名参数和待绑定数据，根据接收的函数名参数和待绑定数据执行创建的工具函数，生成事件绑定字符串，包括：

采用创建的工具函数接收函数名参数和待绑定给Dom的数据；

携带待绑定给Dom的数据和事件对象，根据函数名执行注册在在Vue注册函数的methods对象上的函数名对应的函数；

返回挂在标识浏览器窗口的window变量上的方法的字符串，将返回的字符串作为事件绑定字符串。

优选地，本发明基于Vue给Dom字符串绑定事件的方法中，函数名参数为需要绑定给Dom的且已经注册在Vue注册函数的methods对象上的函数的函数名。

根据本发明的第二方面，提供一种基于Vue给Dom字符串绑定事件的装置，包括绑定服务端，该绑定服务端用于通过构建内部闭包函数并采用构建的内部闭包函数注册工具方法，创建一个工具函数；采用创建的工具函数接收函数名参数和待绑定数据，根据接收的函数名参数和待绑定数据执行创建的工具函数，生成事件绑定字符串；将生成的事件绑定字符串插入到Dom字符串指定位置。

优选地，本发明基于Vue给Dom字符串绑定事件的装置中，绑定服务端包括：

工具函数创建模块，用于通过构建内部闭包函数并采用构建的内部闭包函数注册工具方法，创建一个工具函数；

事件绑定字符串生成模块，用于采用创建的工具函数接收函数名参数和待绑定数据，根据接收的函数名参数和待绑定数据执行创建的工具函数，生成事件绑定字符串；

字符串绑定模块，用于将生成的事件绑定字符串插入到Dom字符串指定位置。

优选地，本发明基于Vue给Dom字符串绑定事件的装置中，工具函数创建模块具体用于通过javascript脚本创建一个内部闭包函数，通过所述创建的内部闭包函数注册一个挂在标识浏览器窗口的window变量上的方法。

优选地，本发明基于Vue给Dom字符串绑定事件的装置中，事件绑定字符串生成模块具体用于：

采用创建的工具函数接收函数名参数和待绑定给Dom的数据；

携带待绑定给Dom的数据和事件对象，根据函数名执行注册在在Vue注册函数的methods对象上的函数名对应的函数；

返回挂在标识浏览器窗口的window变量上的方法的字符串，将返回的字符串作为事件绑定字符串。

优选地本发明基于Vue给Dom字符串绑定事件的装置中，函数名参数为需要绑定给Dom的且已经注册在Vue注册函数的methods对象上的函数的函数名。

根据本发明的第三方面，提供一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现本发明第一方面所述的方法。

本发明的基于Vue给Dom字符串绑定事件的方法和装置，具有以下有益技术效果：

1.通过闭包函数访问javascript变量参数实现了给Dom字符串的绑定事件，增加了参数值的私密性。

2.通过将javascript的任何变量作为参数(包括函数)，实现了给Dom字符串绑定事件传参任意类型参数。

3.适用于需要添加更多灵活的自定义交互事件并且想携带数据执行调用函数的场景。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1为一种适用于本发明实施例的基于Vue给Dom字符串绑定事件的方法的装置的示意图；

图2为根据本发明实施例基于Vue给Dom字符串绑定事件的装置中绑定服务端的架构示例图；

图3为根据本发明实施例的一种基于Vue给Dom字符串绑定事件的方法的步骤流程图；

图4为本发明提供的设备的结构示意图。

具体实施方式

下面结合附图对本发明实施例进行详细描述。

需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合；并且，基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其它方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其它结构及/或功能性实施此设备及/或实践此方法。

本实施例中涉及的名词解释如下：

Dom是文档对象模型(Document Object Model)的简称，是W3C组织推荐的处理可扩展置标语言的标准编程接口，它是一种与平台和语言无关的应用程序接口(API)，可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。

Dom文档对象模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。Dom的方法(methods)允许用户采用特定方式操作这个树，用这些方法用户可以改变文档的结构、样式或者内容，节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

Vue：一款用于构建用户界面的JavaScript框架，基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

JavaScript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

图1示出了一种适用于本发明实施例的基于Vue给Dom字符串绑定事件的方法的示例性装置。如图1所示，该装置可以包括绑定服务端101、通信网络102和/或一个或多个绑定客户端103，图1中示例为多个绑定客户端103。

绑定服务端101可以时用于存储信息、数据、程序和/或任何其他合适类型的内容的任何适当的服务器。在一些实施例中，绑定服务端101可以执行适当的功能。例如，在一些实施例中，绑定服务端101可以用于基于Vue给Dom字符串绑定事件。作为可选的示例，在一些实施例中，绑定服务端101可以被用于通过构建内部闭包函数并采用构建的内部闭包函数注册工具方法，创建一个工具函数；采用创建的工具函数接收函数名参数和待绑定数据，根据接收的函数名参数和待绑定数据执行创建的工具函数，生成事件绑定字符串；将生成的事件绑定字符串插入到Dom字符串指定位置。

作为另一示例，在一些实施例中，绑定服务端101可以根据绑定客户端103的请求，将基于Vue给Dom字符串绑定事件的方法发送到绑定客户端103供用户使用。

图2为根据本发明实施例基于Vue给Dom字符串绑定事件的装置中绑定服务端的架构示例图，如图2所示，本实施例中的绑定服务端包括：

工具函数创建模块，用于通过构建内部闭包函数并采用构建的内部闭包函数注册工具方法，创建一个工具函数。作为可选的示例，本实施例中的工具函数创建模块具体用于通过javascript脚本创建一个内部闭包函数，通过所述创建的内部闭包函数注册一个挂在标识浏览器窗口的window变量上的方法。

事件绑定字符串生成模块，用于采用创建的工具函数接收函数名参数和待绑定数据，根据接收的函数名参数和待绑定数据执行创建的工具函数，生成事件绑定字符串。作为可选的示例，本实施例中的事件绑定字符串生成模块具体用于：采用创建的工具函数接收函数名参数和待绑定给Dom的数据，其中，函数名参数为需要绑定给Dom的且已经注册在Vue注册函数的methods对象上的函数的函数名；携带待绑定给Dom的数据和事件对象，根据函数名执行注册在在Vue注册函数的methods对象上的函数名对应的函数；返回挂在标识浏览器窗口的window变量上的方法的字符串，将返回的字符串作为事件绑定字符串。

字符串绑定模块，用于将生成的事件绑定字符串插入到Dom字符串指定位置。

作为可选的示例，在一些实施例中，绑定客户端103用于提供可视化绑定界面，该可视化绑定界面用于接收用户基于Vue给Dom字符串绑定事件的选择输入操作，以及，用于响应于选择输入操作，从绑定服务端101获取与选择输入操作所选择的选项所对应的绑定界面并展示绑定界面，绑定界面中至少展示有基于Vue给Dom字符串绑定事件的信息以及针对基于Vue给Dom字符串绑定事件的信息的操作选项。

在一些实施例中，通信网络102可以是一个或多个有线和/或无线网络的任何适当的组合。例如，通信网络102能够包括以下各项中的任何一种或多种：互联网、内联网、广域网(WAN)、局域网(LAN)、无线网络、数字订户线路(DSL)网络、帧中继网络、异步转移模式(ATM)网络、虚拟专用网(VPN)和/或任何其它合适的通信网络。绑定客户端103能够通过一个或多个通信链路(例如，通信链路104)连接到通信网络102，该通信网络102能够经由一个或多个通信链路(例如，通信链路105)被链接到绑定服务端101。通信链路可以是适合于在绑定客户端103和绑定服务端101之间传送数据的任何通信链路，诸如网络链路、拨号链路、无线链路、硬连线链路、任何其它合适的通信链路或此类链路的任何合适的组合。

绑定客户端103可以包括通过适当形式呈现与基于Vue给Dom字符串绑定事件相关的界面，以供用户使用和操作的任何一个或多个客户端。在一些实施例中，绑定客户端103可以包括任何合适类型的设备。例如，在一些实施例中，绑定客户端103可以包括移动设备、平板计算机、膝上型计算机、台式计算机和/或任何其他合适类型的客户端设备。

尽管将绑定服务端101图示为一个设备，但是在一些实施例中，可以使用任何适当数量的设备来执行由绑定服务端101执行的功能。例如，在一些实施例中，可以使用多个设备来实现由绑定服务端101执行的功能。或者，可使用云服务实现绑定服务端101的功能。

基于上述装置，本申请实施例提供了一种基于Vue给Dom字符串绑定事件的方法，以下通过以下实施例进行说明。

参照图3，示出了根据本申请实施例的一种基于Vue给Dom字符串绑定事件的方法的步骤流程图。

本实施例的基于Vue给Dom字符串绑定事件的方法可在绑定服务端执行，该基于Vue给Dom字符串绑定事件的方法包括以下步骤：

步骤S201：通过构建内部闭包函数并采用构建的内部闭包函数注册工具方法，创建一个工具函数。

作为可选的示例，本实施例方法通过javascript脚本创建一个内部闭包函数，通过所述创建的内部闭包函数注册一个挂在标识浏览器窗口的window变量上的方法。举例来说，本实施例方法中创建的工具函数可以自定义命名为createDomEvent，该函数用于接收name参数即函数名参数和数据data，其中，name参数为需要绑定给Dom的已经注册在methods上面的函数名，本实施例方法基于Vue实现，methods为Vue注册函数的对象)，数据data为需要绑定给Dom的数据。createDomEvent的主要实现思路是创建一个内部闭包函数(在javascript里，函数中的局部函数称为该函数的闭包函数)，该函数注册一个挂在window(javascript系统变量，标识浏览器窗口)上的方法，该方法运行后，携带数据data和事件对象去执行注册在methods上面的name函数，最后返回这个挂在window上的方法的字符串。

步骤S202：采用创建的工具函数接收函数名参数和待绑定数据，根据接收的函数名参数和待绑定数据执行创建的工具函数，生成事件绑定字符串。

举例来说，假设用户期望将名称为definedEvent注册在methods上的函数绑定给Dom并携带数据data，那么根据本实施例方法的执行代码为：createDomEvent(‘definedEvent’,data)，即获取函数返回事件绑定字符串。

作为可选的示例，本实施例方法采用创建的工具函数接收函数名参数和待绑定给Dom的数据，其中，函数名参数为需要绑定给Dom的且已经注册在Vue注册函数的methods对象上的函数的函数名；在接收到函数名参数和待绑定给Dom的数据后，本实施例方法需要携带待绑定给Dom的数据和事件对象，根据函数名执行注册在在Vue注册函数的methods对象上的函数名对应的函数；然后返回挂在标识浏览器窗口的window变量上的方法的字符串，将返回的字符串作为事件绑定字符串。

步骤S203：将生成的事件绑定字符串插入到Dom字符串指定位置。

在生成事件绑定字符串后，本实施例方法还需要将生成的事件绑定字符串插入到Dom字符串指定位置，从而实现给Dom字符串绑定事件的目的。

本实施例方法通过闭包函数访问javascript变量参数实现了给Dom字符串的绑定事件。假如通过字符串直接绑定事件字符，且需要传参，会生成需要调用的函数连同参数一起的字符串赋值给onclick属性，因此通过开发者模式可以清楚查看到Dom上的参数值。本实施例方法通过闭包函数去访问javascript变量参数，开发者模式查看dom只能查看被调用函数，无法查看参数值。因此，与通过字符串直接绑定事件字符方式中直接将参数内容添加到Dom事件绑定字符串相比，本实施例方法增加了参数值的私密性。

通过字符串直接绑定事件字符时，由于参数需要转化成字符串，无法使用函数参数，本实施例方法可以将javascript的任何变量作为参数(包括函数)，实现了给Dom字符串绑定事件传参任意类型参数。

在实际应用场景中，很多第三方工具提供自定义Dom渲染的方法，但是大多只能拼接传入Dom字符串(例如大多数图表工具的悬浮tooltip框)，当需要添加更多灵活的自定义交互事件并且想携带数据执行调用函数时，本实施例方法可以很好地进行匹配。

如图4所示，本发明还提供了一种设备，包括处理器310、通信接口320、用于存储处理器可执行计算机程序的存储器330及通信总线340。其中，处理器310、通信接口320及存储器330通过通信总线340完成相互间的通信。处理器310通过运行可执行计算机程序以实现上述的高速访问ORC外部表的方法。

其中，存储器330中的计算机程序可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所描述的系统实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以基于实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分的方法。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。