[发明专利]一种基于DOM的H5时间选择器的组件统一实现方法

说明书

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

技术领域

本发明涉及计算机处理技术领域，特别是涉及一种基于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元素；