CN108509189B

CN108509189B - 一种基于dom的h5时间选择器的组件统一实现方法

Info

Publication number: CN108509189B
Application number: CN201810333259.6A
Authority: CN
Inventors: 管维松
Original assignee: Nanjing New Beijin Garment Technology Co Ltd
Current assignee: Nanjing New Beijin Garment Technology Co Ltd
Priority date: 2018-04-13
Filing date: 2018-04-13
Publication date: 2019-09-10
Anticipated expiration: 2038-04-13
Also published as: CN108509189A

Abstract

一种基于DOM的H5时间选择器的组件统一实现方法，步骤1：以事件代理的形式为整个HTML页面BODY绑定CLICK事件；步骤2：触发到与DOM元素绑定的CLICK事件后，读取该DOM元素的禁用属性值和只读属性值；步骤3：从触发CLICK事件的DOM元素中读取3个属性值；步骤4：获取触发click事件的DOM元素属性的时间配置格式，形成与时间格式相一致的时间范围；步骤5：渲染触发click事件的DOM元素；步骤6：为时间列表中每列时间备选区域绑定能实现内容滚动的插件至此时间选择器成型；步骤7：为时间选择器绑定“选择确定”和“选择取消”。本发明能够解决市面上多元化时间选择器组件接口不统一的问题。

Description

一种基于DOM的H5时间选择器的组件统一实现方法

技术领域

本发明涉及计算机处理技术领域，特别是涉及一种基于DOM的H5时间选择器的组件统一实现方法。

背景技术

Dom(全称为：Document Object Model，译为文档对象模型)是W3C国际组织指定的一套关于如何获取、修改、添加或删除HTML元素的标准，用于定义访问HTML文档对象的一套属性、方法和事件，其本质在于建立网页与脚本语言或程序语言沟通的桥梁。当需要分析一个Xml或者Html文件时，为对象文件创建一个Dom，然后通过这个Dom能依据自己的需求访问Xml或Html内包含的各个页面内容，以达到获取特定信息的目的。

有句古话“授人以鱼，不如授人以渔”，如果把组件比作“鱼”的话，对于前端开发者而言，W3C组织制定的HTML标准以及浏览器厂商的实现都是“鱼”而不是“渔”，开发者在需求无法满足的情况下通过现有技术创造了各种组件，虽然短期满足了需求但是由于严重缺乏标准，导致同一个组件有成千上万的相似实现但却无法相互重用，这很大程度上制约了组件的最大价值——重用。

组件化的确给前端开发带来了极大的效率提升，因此组件化的UI框架也层出不穷，从EXTJs、YUI到jQueryUI，再到Bootstrap、React、Ratchet、Ionic等等，几乎每年都有很多新的UI框架被研发出来，它们或者借鉴或者颠覆其他已存在的框架。简单对比一下就会发现这些框架的很大一部分模块在功能上是重合的，但也仅仅在内部实现层面重合，接口调用层面则是完全不兼容。

所述时间选择器是用于简化网页页面上日期及时间输入的功能组件；以常用的jQuery UI方法和Bootstrap方法为例，在jQueryUI中，时间选择器组件通常包含以下接口名称：destroy、dialog、getDate、hide、isDisabled、option、refresh、setDate、show、widget等。在Bootstrap中，时间选择器组件通常包含以下接口名称：remove、show、hide、update、setStartDate、setEndDate、setDaysOfWeekDisabled。从上述两个方法的组件命名方式看，按照字面意思解读或者使用者的组件使用经验不难识别各个组件的功能，但在实际应用过程中仍旧难以在脱离API和示例的情况下获知这些对外方法的使用语法与参数形式；更糟糕的是，jQuery UI与Bootstrap组件库的对外方法名不一致，各自可能还有完全不一样的初始化方法，难以无缝切换，并且这两个组件库只是前端庞大组件库群中的沧海一粟。

因此，需要一种能够解决市面上多元化时间选择器组件接口不统一问题的方法。

发明内容

本发明所要解决的技术问题是克服现有技术的不足，提供一种能够解决市面上多元化时间选择器组件接口不统一问题的方法。

为解决上述技术问题，本发明提供一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于，包括如下步骤：

步骤1：以事件代理的形式为整个HTML页面BODY绑定CLICK事件，使Html页面内包含指定事件对象的元素在遇到用户点击时，能都触发已绑定的CLICK事件；所述事件对象为包含[_type＝datatime]、[_type＝date]属性的DOM元素；

步骤2：当用户点击时，触发到与DOM元素绑定的CLICK事件后，读取该DOM元素的禁用属性值(disable)和只读属性值(readOnly)，仅当两个属性值都为“否”时，表现形式为false，则进行步骤3；

步骤3：从触发CLICK事件的DOM元素中读取3个属性值，分别为(1)当前显示的时间，属性名为value，格式为年-月-日-时-分-秒；(2)最大可选日期，格式为年-月-日-时-分-秒，属性名为maxDate；格式为年-月-日-时-分-秒，(3)最小可选日期，属性名为minDate，格式为年-月-日-时-分-秒；

步骤4：获取触发click事件的DOM元素属性[_type＝datatime]和[_type＝date]的时间配置格式，并按照两个不同的时间格式重新记录value属性值、maxDate属性值、minDate属性值，形成与时间格式相一致的时间范围；

步骤5：渲染触发click事件的DOM元素，按照步骤4中形成的时间范围，在HTML页面上自动呈现出静止状态的时间列表，时间列表中将基于步骤3中形成的时间范围，记录着从最大可选时间到最小可选时间这一区间内的所有时间；

时间列表根据步骤4中[_type＝date]和[_type＝datatime]的时间格式，以列为单位，有针对性地形成“年”、“月”、“日”、“时”、“分”的时间备选区域；

步骤6：为时间列表中每列时间备选区域绑定能实现内容滚动的插件、，使时间列表内各时间备选区域具备滚动选择功能，至此时间选择器成型；同时，根据步骤5中经过时间格式规范化的当前显示时间，将时间列表内各时间备选区域滚动至与当前显示时间保持一致；

步骤7：为时间选择器绑定“选择确定”和“选择取消”事件，如果是“选择确定”，当前时间选择器中各时间备选区域中时间选项被存储，并将时间传至DOM元素保存和显示；如果是“选择取消”，当前时间选择器中各时间备选区域中时间选项返回至初始状态的当前显示时间。

特别地，所述步骤1中的[_type＝datatime]属性和[_type＝date]属性代表两种时间记录格式，在DOM元素中仅包含其中一种即可。

特别地，当步骤3的禁用属性和只读属性的属性值任意一个为“是”时，表现形式为true，则不执行任何操作。

特别地，在所述步骤2中所指的禁用属性，即禁用DOM元素的属性；所指的只读属性，即不能修改DOM元素的属性，。

特别地，DOM元素的最大可选日期和最小可选日期与实际的业务场景绑定；在没有限定的业务场景中，最大可选日期与系统时间的最大可选时间保持一致，最小可选日期与系统时间的最小可选时间保持一致；在有限定的业务场景中，为匹配现实的业务场景需要，将基于当前时间对最大可选日期、最小可选日期做设置。

特别地，所述步骤4的时间范围的形成过程，具体为：如果DOM元素属性是[_type＝date]，则按照年-月-日的格式重新记录value属性值、maxDate属性值、minDate属性值，形成的时间范围也将年-月-日的形式呈现；如果DOM元素属性是[_type＝datatime]，则按照年-月-日-时-分格式记录value属性值、maxDate属性值、minDate属性值，形成的时间范围也将年-月-日-时-分的形式呈现。

本发明所达到的有益效果:

(1)本发明利用DOM获取HTML页面内容的特性，通过利用DOM功能属性，将所有不同类型组件库中的组件初始化形式和调用方法形成统一标准，减少技术人员以往需要牢记不同组件初始化方法和调用方法的烦恼，仅需通过操作DOM属性即可完成，提供工作效率；

(2)本发明通过DOM提供的访问HTML页面内容的标准化接口，使任一功能组件后端的脚本语言能直接通过DOM接口向HTML页面传递信息，而不用再关注每一个功能组件的接口使用方法，有效地组件使用的可用性和易用性，彻底解决现实组件应用中对组件接口的依赖。

附图说明

图1为本发明的示例性实施例的组件统一实现方法流程图；

图2为本发明的示例性实施例中HTML页面内的时间编辑框界面；

图3为本发明的示例性实施例中时间选择器的最终呈现效果示意图。

具体实施方式

下面结合附图和示例性实施例对本发明作进一步的说明：

图1为本发明实施例中一种基于DOM的H5时间选择器的实现流程方法，利用DOM访问页面元素的统一标准，将原始需要通过调用不同组件才能实现的时间设置、时间更改、时间获取、时间清除等功能，以规范化的方式将所有与时间相关的前端组件能借助于DOM的功能属性，包括获取、修改、添加和删除，实现组件初始化形式和访问方法的统一，具体流程包括:

在本发明实施例中，

步骤101：以事件代理的形式为图2的HTML页面BODY绑定CLICK事件，使Html页面内的“保单起保时间”和“保单终止时间”编辑框在遇到用户点击时触发已绑定的CLICK事件；在图2的本发明实施例中HTML页面内的时间编辑框界面，其中，“保单起保时间”和“保单终止时间”的编辑框在后台为包含[_type＝datatime]属性的DOM元素，均绑定了Click事件，当鼠标点击这两个编辑框时，将会触发Click事件，并根据这两个编辑框的，选择性自动跳出时间选择器界面；

步骤102：以本发明实施例中“保单起保时间编辑框”为例，当用户通过鼠标、触碰、手势等方式点击此编辑框时，触发到与“保单起保时间编辑框”绑定的CLICK事件后，读取“保单起保时间编辑框”的禁用属性值(disable)和只读属性值(readOnly)，仅当两个属性值都为“否”时，表现形式为false，则进行步骤3；如果两个属性值中任一个为“是”时，表现形式为true，则不执行任何操作，视觉表现为HTML页面上没有任何跳转且也不会自动跳出；

步骤103：从时间编辑框中获取时间：从触发CLICK事件的“保单起保时间编辑框”中读取3个属性值，分别为当前显示的时间“2018-02-12 00:00:00”，即value＝2018-02-0100:00:00，即格式为年-月-日-时-分-秒；最大可选日期与系统时间的最大可选时间保持一致，格式为年-月-日-时-分-秒，属性名为maxDate；格式为年-月-日-时-分-秒，最小可选日期与系统时间的最小可选时间保持一致，属性名为minDate；

针对有限定的业务场景，为匹配实际业务的需要，将基于当前时间对最大可选日期、最小可选日期做设置；例如，若本发明实施例中的时间选择器应用于预订酒店入住，按照现实场景的需求，最小可选日期应与当前时间的日期保持一致，而并不能选择当前时间以前的日期；若本发明实施例中的时间选择器应用于出生日期的设定，按照现实场景的需求，最大可选日期应与当前时间的日期保持一致，而并不能选择当前时间以后的日期；

步骤104：获取时间格式：获取触发click事件的DOM元素属性[_type＝datatime]和[_type＝date]的时间配置格式：如果是[_type＝date]，则按照年-月-日的格式重新记录value属性值、maxDate属性值、minDate属性值，形成的时间范围也将年-月-日的形式组织时间显示内容；如果是[_type＝datatime]，则按照年-月-日-时-分格式记录value属性值、maxDate属性值、minDate属性值，形成的时间范围也将年-月-日-时-分的形式组织时间显示内容；

在本发明实施例中，“保单起保时间编辑框”的属性为[_type＝datatime]，因此按照年-月-日-时-分的形式组织内容，即2018-02-12 00:00；

步骤105：渲染触发click事件的“保单起保时间编辑框”，自动跳出时间列表，具体为：按照步骤104中形成的时间范围，在HTML页面上自动呈现出静止状态的时间列表，时间列表中将基于步骤103中形成的时间范围，记录着从最大可选时间到最小可选时间这一区间内的所有时间；时间列表根据步骤104中[_type＝date]和[_type＝datatime]的时间格式，以列为单位，有针对性地形成“年”、“月”、“日”、“时”、“分”的时间备选区域；

步骤106：时间选择器自动设置与时间编辑框内容匹配：为时间列表中每列时间备选区域绑定能实现内容滚动的插件(比如iscroll插件)，使时间列表内各时间备选区域具备滚动选择功能，至此时间选择器成型；同时，根据步骤105中已经过时间格式规范化的当前显示时间，将时间列表内各时间备选区域滚动至与当前显示时间保持一致，即滚动条落在2018-02-12上，如图3所示；

步骤107：时间的确认和清除：为时间选择器绑定“选择确定”和“选择取消”事件，如果是“选择确定”，当前时间选择器中各时间备选区域中时间选项被存储，并将时间传至DOM元素保存和显示；,如果是“选择取消”，当前时间选择器中各时间备选区域中时间选项返回至初始状态的当前显示时间。

本发明主要用于提供一种基于DOM的H5时间选择器的组件统一实现方法，本发明利用DOM获取HTML页面内容的特性，通过利用DOM功能属性，将所有不同类型组件库中的组件初始化形式和调用方法形成统一标准，减少技术人员以往需要牢记不同组件初始化方法和调用方法的烦恼，仅需通过操作DOM属性即可完成，提供工作效率；本发明还通过DOM提供的访问HTML页面内容的标准化接口，使任一功能组件后端的脚本语言能直接通过DOM接口向HTML页面传递信息，而不用再关注每一个功能组件的接口使用方法，有效地组件使用的可用性和易用性，彻底解决现实组件应用中对组件接口的依赖。

以上实施例不以任何方式限定本发明，凡是对以上实施例以等效变换方式做出的其它改进与应用，都属于本发明的保护范围。

Claims

1.一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于，包括如下步骤：

步骤1：以事件代理的形式为整个HTML页面BODY绑定CLICK事件，使Html页面内包含指定事件对象的元素在遇到用户点击时，能都触发已绑定的CLICK事件；所述事件对象为包含[_type＝datatime]或[_type＝date]属性的DOM元素；

步骤3：从触发CLICK事件的DOM元素中读取3个属性值，分别为(1)当前显示的时间，属性名为value，从方便处理的角度考虑,采用的格式为年-月-日-时-分-秒；(2)最大可选日期，格式为年-月-日-时-分-秒，属性名为maxDate；(3)最小可选日期，属性名为minDate，格式为年-月-日-时-分-秒；

步骤4：获取触发click事件的DOM元素属性[_type＝datatime]或[_type＝date]的时间配置格式，并按照两个不同的时间格式重新记录value属性值、maxDate属性值、minDate属性值，形成与时间格式相一致的时间范围；

时间列表根据步骤4中[_type＝date]或[_type＝datatime]的时间格式，以列为单位，有针对性地形成“年”、“月”、“日”、“时”、“分”的时间备选区域；

步骤6：为时间列表中每列时间备选区域绑定能实现内容滚动的插件，使时间列表内各时间备选区域具备滚动选择功能，至此时间选择器成型；同时，根据步骤5中经过时间格式规范化的当前显示时间，将时间列表内各时间备选区域滚动至与当前显示时间保持一致；

2.如权利要求1所述的一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于：所述步骤1中的[_type＝datatime]属性和[_type＝date]属性代表两种时间记录格式，在DOM元素中仅包含其中一种即可。

3.如权利要求2所述的一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于：当步骤3的禁用属性和只读属性的属性值任意一个为“是”时，表现形式为true，则不执行任何操作。

4.如权利要求3所述的一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于：在所述步骤2中所指的禁用属性，即禁用DOM元素的属性；所指的只读属性，即不能修改DOM元素的属性。

5.如权利要求4所述的一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于：DOM元素的最大可选日期和最小可选日期与实际的业务场景绑定；在没有限定的业务场景中，最大可选日期与系统时间的最大可选时间保持一致，最小可选日期与系统时间的最小可选时间保持一致；在有限定的业务场景中，为匹配现实的业务场景需要，将基于当前时间对最大可选日期、最小可选日期做设置。

6.如权利要求5所述的一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于，所述步骤4的时间范围的形成过程，具体为：如果DOM元素属性是[_type＝date]，则按照年-月-日的格式重新记录value属性值、maxDate属性值、minDate属性值，形成的时间范围也将年-月-日的形式呈现；如果DOM元素属性是[_type＝datatime]，则按照年-月-日-时-分格式记录value属性值、maxDate属性值、minDate属性值，形成的时间范围也将年-月-日-时-分的形式呈现。