CN108664456B - 一种动态构造文档中的显示元素的功能的方法 - Google Patents

一种动态构造文档中的显示元素的功能的方法 Download PDF

Info

Publication number
CN108664456B
CN108664456B CN201710206523.5A CN201710206523A CN108664456B CN 108664456 B CN108664456 B CN 108664456B CN 201710206523 A CN201710206523 A CN 201710206523A CN 108664456 B CN108664456 B CN 108664456B
Authority
CN
China
Prior art keywords
elements
document
type
event
document element
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.)
Active
Application number
CN201710206523.5A
Other languages
English (en)
Other versions
CN108664456A (zh
Inventor
陈春宇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Jingdong Shangke Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN201710206523.5A priority Critical patent/CN108664456B/zh
Publication of CN108664456A publication Critical patent/CN108664456A/zh
Application granted granted Critical
Publication of CN108664456B publication Critical patent/CN108664456B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/103Formatting, i.e. changing of presentation of documents
    • G06F40/106Display of layout of documents; Previewing
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/12Use of codes for handling textual entities
    • G06F40/137Hierarchical processing, e.g. outlines

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种动态构造文档中的显示元素的功能的方法,其特征在于,包括:响应于对文档元素初始化的请求,对所述文档元素进行初始化以使得所述文档元素具有预定功能,所述初始化包括:生成预定功能元素集,所述预定功能元素集定义了所述预定功能,其中所述预定功能元素集中的每个元素具有与所述文档元素相关联的标识符;将所述功能元素集封装进所述文档元素;将所述功能元素集中的第一类型的一个或多个元素与第二类型的一个或多个元素相关联,使得响应于经由所述第一类型的一个或多个元素接收到输入而执行与所述第二类型的一个或多个元素相对应的动作。

Description

一种动态构造文档中的显示元素的功能的方法
技术领域
本发明涉及一种动态构造文档中的显示元素的功能的方法、装置、电子设备和可读存储介质。
背景技术
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:
目前的文档元素,诸如web文档元素,在页面加载时被赋予预定的功能。但是所赋予的功能都是基于诸如HTML语言的,且每个文档元素所具有的功能都是受限于HTML语言内嵌的功能。用户无法自定义显示样式,无法自由组合执行相应的动作,也无法监听整套动作中的各个环节。
例如对于文件上传来讲,目前的文件上传只能使用两种方法:
使用HTML的input组件上传文件。该方法只能同步上传,导致页面刷新,在很多情况下无法使用。
借助于浏览器插件上传文件。这种方法强依赖特定插件。而特定插件需要用户手动安装到浏览器,并且该方法只适用于特定的浏览器而没有很好的兼容性。
这两种上传文件的方法都无法自定义文档元素显示样式、无法自由组合上传动作、无法监听从文件选择—文件显示—文件上传中—上传完成整套动作的各个环节。
发明内容
有鉴于此,本发明实施例提供一种动态构造文档中的显示元素的功能的方法,能够需要一种能适应大多数环境,具有高度扩展性。。
为实现上述目的,根据本发明实施例的一个方面,提供了一种动态构造文档中的显示元素的功能的方法。
根据本发明的一个方面的动态构造文档中的显示元素的功能的方法,包括响应于对文档元素初始化的请求,对所述文档元素进行初始化以使得所述文档元素具有预定功能,所述初始化包括:生成预定功能元素集,所述预定功能元素集定义了所述预定功能,其中所述预定功能元素集中的每个元素具有与所述文档元素相关联的标识符;将所述功能元素集封装进所述文档元素;将所述功能元素集中的第一类型的一个或多个元素与第二类型的一个或多个元素相关联,使得响应于经由所述第一类型的一个或多个元素接收到输入而执行与所述第二类型的一个或多个元素相对应的动作。
可选地,所述方法还包括对经初始化的所述文档元素进行兼容性处理,所述兼容性处理包括:修改所述预定功能元素集中的元素子集的样式,以使得所述元素子集对用户不可见;根据所述文档元素在文档上的位置和大小,计算出所述预定功能元素集中的所述第一类型的一个或多个元素的位置和大小;用所述第一类型的一个或多个元素覆盖所述文档元素。
可选地,所述初始化还包括向事件模块注册所述第二类型的一个或多个元素,所述第二类型的一个或多个元素用于基于与所述第二类型的一个或多个元素相关联的事件执行用户定义的动作;并且其中,所述第二类型的一个或多个元素中的每个元素与事件回调函数相关联,所述事件回调函数定义了与该元素相关联的事件。
可选地,所述方法还包括响应于与所述第二类型的一个或多个元素相关联的事件被触发,调用与所述第二类型的一个或多个元素相关联的事件回调函数,以执行与所述事件相对应的动作。
可选地,其中,所述文档元素是HTML元素,所述第一类型的功能元素是label元素,并且所述第二类型的功能元素是input元素。
可选地,与所述第二类型的功能元素相关联的事件是上传文件事件。
可选地,所述执行与上传文件相对应的动作包括:确定所述文档元素是否特定文档元素;响应于确定所述文档元素是特定文档元素,利用表单的异步提交特性执行上传文件;响应于确定所述文档元素不是特定文档元素:创建框架,所述框架包括所述功能元素集中的每一个功能元素;利用所创建的框架开启特定页面,在所述特定页面中执行上传文件,其中所述特定页面对用户不可见。
可选地,其中所述特定文档元素是HTML5文档元素,所述表单是基于jQuery的表单,所述框架是iframe框架。
为实现上述目的,根据本发明实施例的另一个方面,提供了一种动态构造文档中的显示元素的功能的方法。
根据本发明的另一个方面的动态构造文档中的显示元素的功能的装置,包括:初始化模块,所述初始化模块用于响应于对文档元素初始化的请求,对所述文档元素进行初始化以使得所述文档元素具有预定功能,所述初始化包括:生成预定功能元素集,所述预定功能元素集定义了所述预定功能,其中所述预定功能元素集中的每个元素具有与所述文档元素相关联的标识符;将所述功能元素集封装进所述文档元素;将所述功能元素集中的第一类型的一个或多个元素与第二类型的一个或多个元素相关联,使得响应于经由所述第一类型的一个或多个元素接收到输入而执行与所述第二类型的一个或多个元素相对应的动作。
可选地,所述装置还包括兼容性模块,所述兼容性模块用于对经初始化的所述文档元素进行兼容性处理,所述兼容性处理包括:修改所述预定功能元素集中的元素子集的样式,以使得所述元素子集对用户不可见;根据所述文档元素在文档上的位置和大小,计算出所述预定功能元素集中的所述第一类型的一个或多个元素的位置和大小;用所述第一类型的一个或多个元素覆盖所述文档元素。
可选地,所述初始化模块还用于:向事件模块注册所述第二类型的一个或多个元素,所述第二类型的一个或多个元素用于基于与所述第二类型的一个或多个元素相关联的事件执行用户定义的动作;并且其中,所述第二类型的一个或多个元素中的每个元素与事件回调函数相关联,所述事件回调函数定义了与该元素相关联的事件。
可选地,所述装置还包括:事件模块,所述事件模块用于响应于与所述第二类型的一个或多个元素相关联的事件被触发,调用与所述第二类型的一个或多个元素相关联的事件回调函数,以执行与所述事件相对应的动作。
可选地,其中,所述文档元素是HTML元素,所述第一类型的功能元素是label元素,并且所述第二类型的功能元素是input元素。
可选地,与所述第二类型的功能元素相关联的事件是上传文件事件。
可选地,所述装置还包括文件异步上传模块,所述文件异步上传模块用于:确定所述文档元素是否特定文档元素;响应于确定所述文档元素是特定文档元素,利用表单的异步提交特性执行上传文件;响应于确定所述文档元素不是特定文档元素:创建框架,所述框架包括所述功能元素集中的每一个功能元素;利用所创建的框架开启特定页面,在所述特定页面中执行上传文件,其中所述特定页面对用户不可见。
可选地,其中所述特定文档元素是HTML5文档元素,所述表单是基于jQuery的表单,所述框架是iframe框架。
为实现上述目的,根据本发明实施例的另一个方面,提供了一种电子设备。
根据本发明实施例的的电子设备,包括:一个或多个处理器;存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明实施例提供的动态构造文档中的显示元素的功能的方法。
为实现上述目的,根据本发明实施例的另一个方面,提供了一种计算机可读介质。
根据本发明实施例的计算机可读介质,其上存储有计算机程序,所述程序被处理器执行时实现本发明实施例提供的动态构造文档中的显示元素的功能的方法。
上述发明中的一个实施例具有如下优点或有益效果:因为采用通过诸如label元素来实现触发事件转移的技术手段,克服了仅有有限的文档元素能够用于执行动作的技术问题,进而达到使得文档元素彻底解放并且可自定义格式和样式,适用于各种场景的技术效果。此外,本发明通过预先配置、注册事件、绑定元素的技术手段,达到接口可扩展的目的,前端开发人员可自由的在本发明基础上做其他的拓展。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明,不构成对本发明的不当限定。其中:
图1是根据本发明的一个实施例的响应于对文档元素初始化的请求而对所述文档元素进行初始化的流程图。
图2是根据本发明实施例的对经初始化的文档元素进行兼容性处理的流程图。
图3是根据本发明实施例的文件异步上传过程的流程图。
图4是是根据本发明实施例的动态构造文档中的显示元素的功能的装置的示意图。
图5是根据本发明实施例的初始化模块和兼容性模块工作原理的示意图。
图6是根据本发明实施例的事件模块的工作原理的示意图。
图7是根据本发明实施例的异步上传模块的工作原理的示意图。
图8是用来实现本发明实施例的动态构造文档中的显示元素的功能的方法的电子设备的硬件结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明,其中包括本发明实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本发明的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
图1是根据本发明的一个实施例的响应于对文档元素初始化的请求而对所述文档元素进行初始化的流程图。本文中所述的文档元素可以是指任何能够接受点击事件的元素。在某些实施例中,文档可以是HTML页面,也可以是XML、XHTML页面。本文主要以HTML页面来进行描述。在某些实施例中,文档元素可以是诸如“button”、“image”等对用户可见的元素。在其他实施例中,文档元素也可以是诸如“div”、“span”等常规对用户隐藏的元素。
在一个实施例中,对文档元素初始化的请求可以是对加载该文档元素所在文档的请求。在该实施例中,响应于对加载文档的请求,读取预定义的配置中心模块定义的配置信息。在该配置信息中,定义了诸如要对哪些文档元素进行初始化、要对这些文档元素构造什么功能等信息。读取到配置信息之后,按照配置信息的指示,确定要执行初始化的文档元素。对于每一个要执行初始化的文档元素,调用初始化模块来执行图1所示的初始化过程。在初始化及兼容性调整之后,响应于对被初始化的文档元素的诸如点击的动作,而触发后续事件处理并执行动作。
在另一个实施例中,构造文档元素功能可以是响应于用户对该文档元素的点击而被触发的。在用户点击该文档元素后,触发对该文档元素的初始化、兼容性调整、事件处理、以及执行动作。
在下面的描述中,可以将被构造功能的文档元素称为“宿主元素”。其中,初始化过程是由初始化模块来执行的,初始化的目的是为了让宿主元素具备预定功能。
在步骤S11中,生成预定功能元素集,所述预定功能元素集定义了所述预定功能,其中所述预定功能元素集中的每个元素具有与所述文档元素相关联的标识符。
在一个实施例中,文档元素可以是HTML文档元素。在该实施例中,所生成的预定功能元素集可以至少包括form元素、label元素、和input元素。在一种实施方式中,通过加载初始化脚本,构造<form>标签、<label>标签、和<input>标签来构造相应的form、label和input元素。
其中,所述功能元素集定义了预定功能。在一个实施例中,预定功能是异步上传文件。在另一个实施例中,预定功能是提交表单。则可以通过定义input元素的动作来定义相应的预定功能。
并且其中,预定功能元素集中的每个元素具有与该宿主元素相关联的标识符。在一种实施方式中,可以首先用随机算法生成与该宿主元素相关联的随机数。
随机算法计算规则诸如:
randomN=Math.random().toString("32").substr(2);
所生成的宿主元素的标识符例如以main_elementN来表示。基于该随机数生成的预定功能元素集中的元素的标识符可以分别是form_randomN、label_randomN和input_randomN。
在其他实施方式中,也可以采用诸如基于时间戳的算法等其他算法生成标识符。
在步骤S12中,将所述功能元素集封装进所述文档元素。在一种实施方式中,可以使用HTML语言的标签来实现封装。
在一个实施例中,宿主元素是不具有input的div元素。
<div id="searchui">
<p></p>
</div>
经由初始化模块将定义了“搜索文本并提交”的预定功能元素集封装进该div元素,相当于生成下面的HTML代码:
Figure GDA0001459543180000081
Figure GDA0001459543180000091
在该实施例中,宿主元素是div元素searchui_elementN。预定功能元素集中的元素分别是form元素searchform_randomN、label元素searched_content_randomN、和input元素searched_content_randomN。
在步骤S13中,将所述功能元素集中的第一类型的一个或多个元素与第二类型的一个或多个元素相关联,使得响应于经由所述第一类型的一个或多个元素接收到输入而执行与所述第二类型的一个或多个元素相对应的动作。在一种实施方式中,第一类型的元素是label元素,第二类型的元素是input元素。将label元素与input元素相关联,使label元素指向input元素,以便经由label元素接收到输入时,执行input元素定义的动作。例如,将label_randomN和input_randomN相关联,包括使label_randomN元素指向input_randomN元素,从而绑定label_randomN元素和input_randomN之间的关联关系。
在一个实施例中,宿主元素和预定功能元素集中的元素可以都是HTML元素。可以利用<label>标签的for属性将label元素与input元素关联。Label元素为input元素定义标注。label元素不会向用户呈现任何特殊效果,但是改进了用户输入。如果在label元素内点击文本,就会触发此控件。就是说,当用户选择<label>标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label>标签的for属性与相关元素的id属性相同,因此实现了将label元素与相关元素的关联,在该实施例中相关元素是input元素。在其他实施例中,也可以将label元素与各种不同的元素相关联。
此外,初始化过程还可以包括向事件模块注册预定功能元素集中定义的事件。例如,初始化过程还可以包括步骤S14。
在步骤S14中,向事件模块注册所述第二类型的一个或多个元素。其中事件模块用于执行为宿主元素构造的预定功能。在一种实施方式中,通过在初始化过程中将第二类型的一个或多个元素注册到事件模块来使得事件模块获知需要进行哪些处理。其中所述第二类型的元素可以是input元素。
在一个实施例中,在初始化过程中已经为宿主元素main_elementN生成了预定功能元素集,所述预定功能元素集中的元素依次为form_randomN、label_randomN、input_randomN以及其它用户自定义的能够执行动作的元素,例如示意性称之为fileshow_elementN、fileupload_elementN、others_elementN。在注册过程中,将input元素和其它用户自定义的能够执行动作的元素注册到事件模块。并且述每个被注册的元素与事件回调函数相关联,事件回调函数定义了与该元素相关联的事件。
在其它实施例中,事件模块也可以通过配置中心模块来读取要触发的事件以及要执行的动作。也可以采用除回调函数之外的其他方式,例如为每个事件构建代码的方式来执行与每个元素相关联的事件。
图2是根据本发明实施例的对经初始化的文档元素进行兼容性处理的流程图。由于用户使用的浏览器版本不同,在初始化过程中生成并封装了预定功能元素集之后,显示给用户的文档页面很可能有所变化。因此可以在兼容性调整步骤中将显示给用户的页面呈现恢复到初始化之前的样子,使得用户无从察觉。
在步骤S21中,修改所述预定功能元素集中的功能元素子集的样式,以使得所述功能元素子集对用户不可见。在一个实施例中,修改form元素和input元素的样式。例如通过“display:none”使得form元素和input元素对用户不可见。在其他实施例中,修改任何需要隐藏的元素样式,使得其对用户不可见。
在步骤S22中,根据所述文档元素在文档上的位置,计算出所述预定功能元素集中的所述第一类型的一个或多个元素的位置。在该步骤中,首先测量出宿主元素在文档页面上的位置、宿主元素的大小、宿主元素是否具有元素内容等。然后根据公式计算出例如label元素的位置和大小。在一个实施例中,可以利用以下公式来计算宿主元素的位置:
diffX=($item.width()-$item.get(0).offsetWidth)/2–2;
diffY=($item.height()-$item.get(0).offsetHeight)/2-(options.hasText?$item.height():0)-2。
在步骤S23中,用所述第一类型的一个或多个元素覆盖所述文档元素。该步骤的目的是为了将触发事件从宿主元素转移到诸如label元素的第一类型元素。其中所述出发事件可以是对宿主元素的点击、挥扫、屏幕倾斜度变化等各种触发事件。
在一个实施例中,用label元素覆盖宿主元素。在可以利用步骤S22中计算得到的宿主元素的位置,将label元素设置为在该位置绝对定位,显示层级为最高层。诸如通过以下代码来使得label元素完全覆盖宿主元素:
style=“position:absolute;z-index:999;”。
图3是根据本发明实施例的文件异步上传过程的流程图。在一个实施例中,input元素所定义的动作是文件异步上传,并且文档是基于HTML的文档。异步上传过程如步骤S31-S36所示。
在步骤S31中,响应于事件模块接收到与上传文件事件相对应的信号,调用异步上传模块。当事件模块监听到与文件异步上传相对应的信号时,调用相应的回调函数。异步上传回调函数进而调用异步上传模块。
在步骤S32中,异步上传模块判断当前浏览器类型和版本测试是否支持HTML5。
在步骤S33中,如果支持HTML5,则利用jQuery的表单异步提交特性执行文件的上传。
在步骤S34中,如果不支持,首先创建一个iframe把初始化模块所得的元素组填充进去。
在步骤S35中,使用该iframe开启另外一个隐藏页面。
在步骤S36中,在该隐藏页面中执行文件上传。对用户而言,文件是在另外一个页面中上传的,实现了异步上传的技术效果。
图4是根据本发明实施例的动态构造文档中的显示元素的功能的装置的示意图。
配置中心模块41,定义了诸如要对哪些文档元素进行初始化、要对这些文档元素构造什么功能等信息。读取到配置信息之后,按照配置信息的指示,确定要执行初始化的文档元素。对于每一个要执行初始化的文档元素,为宿主元素封装配置中心预定义的功能。
初始化模块42,用于响应于对文档元素初始化的请求,对所述文档元素进行初始化以使得所述文档元素具有预定功能。
兼容性模块43,用于对经初始化的所述文档元素进行兼容性处理。初始化模块42和兼容性模块43的工作原理参见图5。
事件模块44,用于注册能够执行预定动作的一个或多个元素,并且响应于事件触发调用相应的回调函数执行预定动作。事件模块44的工作原理请参见图6。
异步上传模块45,经由事件模块调用异步上传模块45,用于执行对文件的上传动作。异步上传模块45的工作原理请参见图7。
图5是根据本发明实施例的初始化模块和兼容性模块工作原理的示意图。在一个实施例中,宿主元素是main_elementN。首先,在经由初始化模块进行初始化之前,宿主元素main_elementN接受点击。经过初始化,为main_elementN生成了预定功能元素集form_randomN、label_randomN、和input_randomN,使得宿主元素具备了预定功能。而后经过兼容性调整,input元素和form元素被隐藏,对用户不可见。label元素覆盖了宿主元素。此后,对宿主元素main_elementN的点击将被转移到label元素上。也就是说,对用户而言,用户看到的宿主元素实际上被label元素覆盖。用户对宿主元素的点击,实际上是对label元素的点击。而由于在初始化过程中,已经label元素与input元素关联,因此,用户对宿主元素的点击,转移到label元素,进而转移到input元素,以出发与input元素相关联的事件,执行与input元素相关联的动作。
图6是根据本发明实施例的事件模块的工作原理的示意图。在图6中,已经完成了初始化过程和兼容性调整过程。宿主元素main_elementN已经具备了预定功能,并且已被label_randomN元素覆盖。此外,input元素和用户自定义的其它能够执行动作的元素已经被注册到事件模块。在该实施例中,input_randomN、fileshow_elementN、fileupload_elementN、others_elementN被注册到事件模块。其对应的事件分别是更改事件、文件显示事件、文件上传事件、以及其它事件。每个事件对应着相应的回调函数。当用户触发宿主元素,例如点击了宿主元素,点击动作被转移到label元素,从而触发了input元素或者其它能够执行动作的元素对应的事件。
在一个实施例中,事件模块经由fileupload_elementN接收到与文件上传事件相对应的信号2而触发文件上传事件,进而调用文件上传回调函数来执行文件上传。
图7是根据本发明实施例的异步上传模块的工作原理的示意图。在图7的实施例中,用户对宿主元素进行点击,该点击被转移至label元素,从而触发了input元素预定义的文件上传事件,进而调用了异步上传模块。异步上传模块首先判断浏览器类型是否支持HTML5。在一个实施例中,宿主元素是main_elementN。经判断浏览器支持HTML5,则利用jQuery的表单异步提交特性进行文件上传。在另一个实施例中,宿主元素是main_elementN+1。经判断,浏览器不支持HTML5,则创建iframe_randomN+1。在该iframe_randomN+1,包括初始化所得的所有组件,诸如form_randomN+1、label_randomN+1、和input_randomN+1。接下来利用iframe_randomN+1开启另外一个隐藏页面,在该隐藏页面中执行文件上传。
根据本发明的实施例,本发明还提供了一种电子设备和一种可读存储介质。
本发明的电子设备包括:至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器执行本发明所提供的动态构造文档中的显示元素的功能的方法。
本发明的非暂态计算机可读存储介质,所述非暂态计算机可读存储介质存储计算机指令,所述计算机指令用于使所述计算机执行本发明所提供的动态构造文档中的显示元素的功能的方法。
如图8所示,是根据本发明实施例的动态构造文档中的显示元素的功能的方法的电子设备的硬件结构示意图。如图8,该电子设备包括:一个或多个处理器81以及存储器82,图8中以一个处理器81为例。其中,存储器82即为本发明所提供的非暂态计算机可读存储介质。
动态构造文档中的显示元素的功能的方法的电子设备还可以包括:输入装置83和输出装置84。
处理器81、存储器82、输入装置83和输出装置84可以通过总线或者其他方式连接,图8中以通过总线连接为例。
存储器82作为一种非暂态计算机可读存储介质,可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块,如本发明实施例中的动态构造文档中的显示元素的功能的方法对应的程序指令/模块(例如,附图4所示的配置中心模块41、初始化模块42、兼容性模块43、事件模块44和异步上传模块45)。处理器81通过运行存储在存储器82中的非暂态软件程序、指令以及模块,从而执行服务器的各种功能应用以及数据处理,即实现上述方法实施例中的动态构造文档中的显示元素的功能的方法。
存储器82可以包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需要的应用程序;存储数据区可存储根据动态构造文档中的显示元素的功能的装置的使用所创建的数据等。此外,存储器82可以包括高速随机存取存储器,还可以包括非暂态存储器,例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中,存储器82可选包括相对于处理器81远程设置的存储器,这些远程存储器可以通过网络连接至动态构造文档中的显示元素的功能的装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置83可接收输入的数字或字符信息,以及产生与动态构造文档中的显示元素的功能的装置的用户设置以及功能控制有关的键信号输入。输出装置84可包括显示屏等显示设备。
所述一个或者多个模块存储在所述存储器82中,当被所述一个或者多个处理器81执行时,执行上述任意方法实施例中的动态构造文档中的显示元素的功能的方法。
上述产品可执行本发明实施例所提供的方法,具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节,可参见本发明实施例所提供的方法。
根据本发明实施例的技术方案,通过诸如label元素来实现触发事件转移,可使得宿主元素彻底解放,可自定义格式和样式,适用于各种场景。此外本发明通过预先配置、注册事件、绑定元素的方式,达到接口可扩展的目的,前端开发人员可自由的在本发明基础上做其他的拓展。例如,在实现文件异步上传的实施例中,本发明去除了对flash的强依赖而只需要jQuery库的支持,实现了超轻量的上传方法。
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。

Claims (18)

1.一种动态构造文档中的显示元素的功能的方法,其特征在于,包括:
响应于对文档元素初始化的请求,读取预定义的配置中心模块定义的配置信息,在所述配置信息中,定义需要进行初始化的文档元素、需要进行初始化的所述文档元素所需构造功能的信息;
按照配置信息的指示,确定要执行初始化的文档元素;对于每一个要执行初始化的所述文档元素,调用初始化模块执行对所述文档元素进行初始化以使得所述文档元素具有预定功能,所述初始化包括:
生成预定功能元素集,所述预定功能元素集定义了所述预定功能,其中所述预定功能元素集中的每个元素具有与所述文档元素相关联的标识符;
将所述功能元素集封装进所述文档元素;
将所述功能元素集中的第一类型的一个或多个元素与第二类型的一个或多个元素相关联,使得响应于经由所述第一类型的一个或多个元素接收到输入而执行与所述第二类型的一个或多个元素相对应的动作。
2.根据权利要求1所述的动态构造文档中的显示元素的功能的方法,其特征在于,所述方法还包括:
对经初始化的所述文档元素进行兼容性处理,所述兼容性处理包括:
修改所述预定功能元素集中的元素子集的样式,以使得所述元素子集对用户不可见;
根据所述文档元素在文档上的位置和大小,计算出所述预定功能元素集中的所述第一类型的一个或多个元素的位置和大小;
用所述第一类型的一个或多个元素覆盖所述文档元素。
3.根据权利要求1所述的动态构造文档中的显示元素的功能的方法,其特征在于,所述初始化还包括:
向事件模块注册所述第二类型的一个或多个元素,所述第二类型的一个或多个元素用于基于与所述第二类型的一个或多个元素相关联的事件执行用户定义的动作;
并且其中,所述第二类型的一个或多个元素中的每个元素与事件回调函数相关联,所述事件回调函数定义了与该元素相关联的事件。
4.根据权利要求3所述的动态构造文档中的显示元素的功能的方法,其特征在于,所述方法还包括:
响应于与所述第二类型的一个或多个元素相关联的事件被触发,调用与所述第二类型的一个或多个元素相关联的事件回调函数,以执行与所述事件相对应的动作。
5.根据权利要求1所述的动态构造文档中的显示元素的功能的方法,其特征在于,其中,所述文档元素是HTML元素,所述第一类型的功能元素是label元素,并且所述第二类型的功能元素是input元素。
6.根据权利要求4所述的动态构造文档中的显示元素的功能的方法,其特征在于,与所述第二类型的功能元素相关联的事件是上传文件事件。
7.根据权利要求6所述的动态构造文档中的显示元素的功能的方法,其特征在于,所述执行与上传文件相对应的动作包括:
确定所述文档元素是否特定文档元素;
响应于确定所述文档元素是特定文档元素,利用表单的异步提交特性执行上传文件;
响应于确定所述文档元素不是特定文档元素:
创建框架,所述框架包括所述功能元素集中的每一个功能元素;
利用所创建的框架开启特定页面,在所述特定页面中执行上传文件,其中所述特定页面对用户不可见。
8.根据权利要求7所述的动态 构造文档中的显示 元素的 功能的方法,其特征在于,其中所述特定文档元素是HTML5文档元素,所述表单是基于jQuery的表单,所述框架是iframe框架。
9.一种动态构造文档中的显示元素的功能的装置,其特征在于,所述装置包括:
初始化模块,所述初始化模块用于响应于对文档元素初始化的请求,读取预定义的配置中心模块定义的配置信息,在所述配置信息中,定义需要进行初始化的文档元素、需要进行初始化的所述文档元素所需构造功能的信息;按照配置信息的指示,确定要执行初始化的文档元素;对于每一个要执行初始化的所述文档元素进行初始化以使得所述文档元素具有预定功能,所述初始化包括:
生成预定功能元素集,所述预定功能元素集定义了所述预定功能,其中所述预定功能元素集中的每个元素具有与所述文档元素相关联的标识符;
将所述功能元素集封装进所述文档元素;
将所述功能元素集中的第一类型的一个或多个元素与第二类型的一个或多个元素相关联,使得响应于经由所述第一类型的一个或多个元素接收到输入而执行与所述第二类型的一个或多个元素相对应的动作。
10.根据权利要求9所述的动态构造文档中的显示元素的功能的装置,其特征在于,所述装置还包括:
兼容性模块,所述兼容性模块用于对经初始化的所述文档元素进行兼容性处理,所述兼容性处理包括:
修改所述预定功能元素集中的元素子集的样式,以使得所述元素子集对用户不可见;
根据所述文档元素在文档上的位置和大小,计算出所述预定功能元素集中的所述第一类型的一个或多个元素的位置和大小;
用所述第一类型的一个或多个元素覆盖所述文档元素。
11.根据权利要求9所述的动态构造文档中的显示元素的功能的装置,其特征在于,所述初始化模块还用于:
向事件模块注册所述第二类型的一个或多个元素,所述第二类型的一个或多个元素用于基于与所述第二类型的一个或多个元素相关联的事件执行用户定义的动作;
并且其中,所述第二类型的一个或多个元素中的每个元素与事件回调函数相关联,所述事件回调函数定义了与该元素相关联的事件。
12.根据权利要求11所述的动态构造文档中的显示元素的功能的装置,其特征在于,所述装置还包括:
事件模块,所述事件模块用于响应于与所述第二类型的一个或多个元素相关联的事件被触发,调用与所述第二类型的一个或多个元素相关联的事件回调函数,以执行与所述事件相对应的动作。
13.根据权利要求9所述的动态构造文档中的显示元素的功能的装置,其特征在于,其中,所述文档元素是HTML元素,所述第一类型的功能元素是label元素,并且所述第二类型的功能元素是input元素。
14.根据权利要求12所述的动态构造文档中的显示元素的功能的装置,其特征在于,与所述第二类型的功能元素相关联的事件是上传文件事件。
15.根据权利要求14所述的动态构造文档中的显示元素的功能的装置,其特征在于,所述装置还包括:
文件异步上传模块,所述文件异步上传模块用于:
确定所述文档元素是否特定文档元素;
响应于确定所述文档元素是特定文档元素,利用表单的异步提交特性执行上传文件;
响应于确定所述文档元素不是特定文档元素:
创建框架,所述框架包括所述功能元素集中的每一个功能元素;
利用所创建的框架开启特定页面,在所述特定页面中执行上传文件,其中所述特定页面对用户不可见。
16.根据权利要求15所述的动态构造文档中的显示元素的功能的装置,其特征在于,其中所述特定文档元素是HTML5文档元素,所述表单是基于jQuery的表单,所述框架是iframe框架。
17.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-8中任一所述的方法。
18.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1-8中任一所述的方法。
CN201710206523.5A 2017-03-31 2017-03-31 一种动态构造文档中的显示元素的功能的方法 Active CN108664456B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710206523.5A CN108664456B (zh) 2017-03-31 2017-03-31 一种动态构造文档中的显示元素的功能的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710206523.5A CN108664456B (zh) 2017-03-31 2017-03-31 一种动态构造文档中的显示元素的功能的方法

Publications (2)

Publication Number Publication Date
CN108664456A CN108664456A (zh) 2018-10-16
CN108664456B true CN108664456B (zh) 2021-12-03

Family

ID=63786806

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710206523.5A Active CN108664456B (zh) 2017-03-31 2017-03-31 一种动态构造文档中的显示元素的功能的方法

Country Status (1)

Country Link
CN (1) CN108664456B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109460253A (zh) * 2018-11-12 2019-03-12 郑州云海信息技术有限公司 基于iframe实现系统文件版本控制的方法及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103944937A (zh) * 2013-01-21 2014-07-23 百度在线网络技术(北京)有限公司 基于网页的文件上传方法和装置
CN104102485A (zh) * 2014-06-26 2014-10-15 湖北安标信息技术有限公司 一种基于Html的模块封装加载方法
CN104978207A (zh) * 2014-04-11 2015-10-14 博雅网络游戏开发(深圳)有限公司 上传文件的方法和浏览器及系统
CN105528132A (zh) * 2014-09-29 2016-04-27 腾讯科技(深圳)有限公司 应用于浏览器的文本输入框显示方法和装置
CN105577733A (zh) * 2014-11-05 2016-05-11 中国银联股份有限公司 基于异步传输方式的文件上传方法及系统
CN106469047A (zh) * 2015-08-18 2017-03-01 中兴通讯股份有限公司 一种表单实现方法及装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080114740A1 (en) * 2006-11-14 2008-05-15 Xcential Group Llc System and method for maintaining conformance of electronic document structure with multiple, variant document structure models

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103944937A (zh) * 2013-01-21 2014-07-23 百度在线网络技术(北京)有限公司 基于网页的文件上传方法和装置
CN104978207A (zh) * 2014-04-11 2015-10-14 博雅网络游戏开发(深圳)有限公司 上传文件的方法和浏览器及系统
CN104102485A (zh) * 2014-06-26 2014-10-15 湖北安标信息技术有限公司 一种基于Html的模块封装加载方法
CN105528132A (zh) * 2014-09-29 2016-04-27 腾讯科技(深圳)有限公司 应用于浏览器的文本输入框显示方法和装置
CN105577733A (zh) * 2014-11-05 2016-05-11 中国银联股份有限公司 基于异步传输方式的文件上传方法及系统
CN106469047A (zh) * 2015-08-18 2017-03-01 中兴通讯股份有限公司 一种表单实现方法及装置

Also Published As

Publication number Publication date
CN108664456A (zh) 2018-10-16

Similar Documents

Publication Publication Date Title
US9448776B1 (en) Method and apparatus for converting a website into a native mobile application
JP6921200B2 (ja) サービス処理方法およびデバイス
US10977054B2 (en) Method and system for providing and executing web applications with runtime interpreter
US11553035B2 (en) Cross-platform module for loading across a plurality of device types
AU2013213683B2 (en) A method and system of application development for multiple device client platforms
WO2022048141A1 (zh) 一种图像处理方法及装置、计算机可读存储介质
CN108664456B (zh) 一种动态构造文档中的显示元素的功能的方法
CN116719456A (zh) 图标样式切换方法、装置、电子设备及存储介质
CN112667482A (zh) 业务功能调用方法、移动终端和存储介质
CN116595284A (zh) 网页系统运行方法、装置、设备、存储介质和程序
CN115857932A (zh) 骨架屏文件生成方法及装置、骨架屏显示方法及装置
KR20150099136A (ko) 애플리케이션 개발 환경 제공 방법
KR20150097181A (ko) 애플리케이션 개발 환경 제공 시스템
Fernandez et al. Accessing and Sharing Photos
JP2012043058A (ja) ウェブページへの共通コンテンツ組込方法及び共通コンテンツ組込プログラム
KR20150098859A (ko) 애플리케이션 개발 환경 제공 장치
KR20150099048A (ko) 애플리케이션 개발 환경 제공 장치
KR20150098853A (ko) 애플리케이션 개발 환경 제공 장치
KR20150097179A (ko) 애플리케이션 개발 환경 제공 시스템
KR20150099047A (ko) 애플리케이션 개발 환경 제공 방법
KR20150098880A (ko) 애플리케이션 개발 환경 제공 장치
KR20150099155A (ko) 애플리케이션 개발 환경 제공 장치
KR20150099135A (ko) 애플리케이션 개발 환경 제공 장치
KR20150099042A (ko) 애플리케이션 개발 환경 제공 시스템
KR20150099242A (ko) 애플리케이션 개발 환경 제공 장치

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