html如何与es6兼容性,ES6特性兼容性检测系统及方法与流程

本发明涉及es6特性兼容性检测领域，特别涉及一种es6特性兼容性检测系统及方法。

背景技术：

es6是javascript语言的下一代标准，这使得javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，因此越来越多的程序员在实际项目当中已经开始使用es6了。

es6带来了更新更强大的特性，使用起来较为方便，但目前并不是所有浏览器都能兼容es6全部特性，因此很多时候在开发时要首先检测开发环境对要使用的新特性支持程度。现流行的方式是可以使用第三方网站进行兼容性查询，但该类网站很少且存在着界面数据繁杂，无特定统计分析图表等缺点，使用起来不方便，而且结果不够直观。

现有的es6新特性兼容性检测系统很少，而且大都基于整体特性进行分析，没有较为详细直观的特性兼容统计、分析结果，无法给用户一个特别清晰、完整、直观的兼容性检测结果。

技术实现要素：

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种操作简单，可针对特定特性进行检测，结果可视化程度较高，直观清晰的es6特性兼容性检测系统及方法。

本发明解决其技术问题所采用的技术方案是：构造一种es6特性兼容性检测系统，包括核心系统模块和统计分析模块，所述核心系统模块包括浏览器和检测处理模块，所述检测处理模块对输入的待检测es6特性进行检测，输出各浏览器对所述待检测es6特性的支持度，所述浏览器与所述检测处理模块连接、用于根据所述检测处理模块输出的各浏览器对所述待检测es6特性的支持度，直接在页面上以图标的形式进行显示；所述统计分析模块与所述检测处理模块连接、用于针对检测结果进行二次加工，将所述检测处理模块输出的每个浏览器对所述待检测es6特性的支持度进行加权平均，即为对所述待检测es6特性的整体支持度，以可视化图表的形式在所述浏览器进行展现，分别展示各浏览器对所述待检测es6特性的支持度及加权平均支持度作为整体支持度。

在本发明所述的es6特性兼容性检测系统中，所述各浏览器对所述待检测es6特性的支持度的输出数据格式为百分比数。

在本发明所述的es6特性兼容性检测系统中，所述待检测es6特性分为变量、数据类型、数据操作方法、生成器及promise、类以及模块。

在本发明所述的es6特性兼容性检测系统中，所述变量对应的es6特性至少包括let命令、const命令、解构赋值和扩展运算符。

在本发明所述的es6特性兼容性检测系统中，所述数据类型对应的es6特性至少包括map、set、weakmap、weakset和symbol类型。

在本发明所述的es6特性兼容性检测系统中，所述数据操作方法对应的es6特性至少包括对number数字类型数据的操作方法、字符串类型数据操作方法、函数操作方法、数组操作方法和对象操作方法。

在本发明所述的es6特性兼容性检测系统中，所述生成器及promise对应的es6特性至少包括生成器函数和promise对象。

在本发明所述的es6特性兼容性检测系统中，所述类对应的es6特性至少包括类及其操作方法。

在本发明所述的es6特性兼容性检测系统中，所述模块对应的es6特性至少包括模块化及导入和导出。

本发明还涉及一种es6特性兼容性检测方法，应用于上述es6特性兼容性检测系统，包括如下步骤：

a)es6特性兼容性检测系统初始化；

b)打开系统网页，判断是否已输入待检测es6特性的名称，如是，执行步骤d)；否则，执行步骤c)；

c)对全部es6特性的兼容性进行检测，执行步骤e)；

d)对所输入的待检测es6特性的兼容性进行检测，执行步骤e)；

e)通过浏览器显示检测结果。

实施本发明的es6特性兼容性检测系统及方法，具有以下有益效果：由于设有核心系统模块和统计分析模块，核心系统模块包括浏览器和检测处理模块，检测处理模块对输入的待检测es6特性进行检测，输出各浏览器对待检测es6特性的支持度，浏览器用于根据检测处理模块输出的各浏览器对待检测es6特性的支持度，直接在页面上以图标的形式进行显示；统计分析模块用于针对检测结果进行二次加工，将检测处理模块输出的每个浏览器对待检测es6特性的支持度进行加权平均，即为对待检测es6特性的整体支持度，以可视化图表的形式在浏览器进行展现，分别展示各浏览器对待检测es6特性的支持度及加权平均支持度作为整体支持度；本发明操作简单，可针对特定特性进行检测，结果可视化程度较高，直观清晰。

附图说明

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

图1为本发明es6特性兼容性检测系统及方法一个实施例中系统的结构示意图；

图2为所述实施例中方法的流程图；

图3为所述实施例中检测输入页面的示意图；

图4为所述实施例中检测结果页面的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明es6特性兼容性检测系统及方法实施例中，其es6特性兼容性检测系统的结构示意图如图1所示。图1中，该es6特性兼容性检测系统包括核心系统模块1和统计分析模块2，核心系统模块1主要是针对用户输入的待检测特性来查询当前各大主流浏览器和开发运行环境对该特性的支持程度，并返回检测结果在系统中显示。

核心系统模块1包括浏览器11和检测处理模块12，检测处理模块12对输入的待检测es6特性进行检测，输出各浏览器对待检测es6特性的支持度，输出数据格式为百分比数。

浏览器11与检测处理模块12连接、用于根据检测处理模块12输出的各浏览器对待检测es6特性的支持度，直接在页面上以图标的形式进行显示，方便用户查看。

统计分析模块2与检测处理模块12连接、用于针对检测结果进行二次加工，将检测处理模块12输出的每个浏览器11对待检测es6特性的支持度进行加权平均，即为对待检测es6特性的整体支持度(百分比数)，以可视化图表的形式在浏览器11进行展现，分别展示各浏览器11对待检测es6特性的支持度及加权平均支持度(百分比数)作为整体支持度，如图4所示，这样方便用户查看和分析。

本发明对es6特性兼容性检测和分析，可以从单一特性到整体特性提供检测结果，以现代的可视化界面进行展示，解决传统检测方式笼统、不够直观的缺点。本发明操作简单，可针对特定特性进行检测，结果可视化程度较高，直观清晰。

用户作为系统使用者，输入所要检测的es6新特性，主要包含了ecmascript2015及以后版本中新增加及更新的命令、函数、对象等，如let命令，class对象，完整特性如表1所示。在检测时直接输入待检测es6特性即可，如输入let，点击检测按钮即可对该待检测es6特性的兼容性进行检测。

表1

从表1中可以看出，待检测es6特性分为变量、数据类型、数据操作方法、生成器及promise、类以及模块。其中，变量对应的es6特性至少包括let命令、const命令、解构赋值和扩展运算符。数据类型对应的es6特性至少包括map、set、weakmap、weakset和symbol类型。数据操作方法对应的es6特性至少包括对number数字类型数据的操作方法、字符串类型数据操作方法、函数操作方法、数组操作方法和对象操作方法。生成器及promise对应的es6特性至少包括生成器函数和promise对象。类对应的es6特性至少包括类及其操作方法。模块对应的es6特性至少包括模块化及导入和导出。

本实施例还涉及一种es6特性兼容性检测方法，应用于上述es6特性兼容性检测系统，该es6特性兼容性检测方法的流程图如图2所示。图2中，该es6特性兼容性检测方法包括如下步骤：

步骤s01es6特性兼容性检测系统初始化：本步骤中，es6特性兼容性检测系统初始化。

步骤s02打开系统网页，判断是否已输入待检测es6特性的名称：打开系统网页，如图3所示，可以输入待检测es6特性的名称，本步骤中，判断是否已输入待检测es6特性的名称，如果判断的结果为是，则执行步骤s04；否则，执行步骤s03。

步骤s03对全部es6特性的兼容性进行检测：如果上述步骤s02的判断结果为否，则执行本步骤。本步骤中，对全部es6特性的兼容性进行检测。执行完本步骤，执行步骤s05。

步骤s04对所输入的待检测es6特性的兼容性进行检测：本步骤中，对所输入的待检测es6特性的兼容性进行检测。执行完本步骤，执行步骤s05。

步骤s05通过浏览器显示检测结果：本步骤中，通过浏览器显示检测结果。检测结果如图4所示。

值得一提的是，本实施例中，可检测特性主要包含ecmascript2015及以后版本中新增加及更新的命令、函数、对象等，如表1所示。例如要检测let命令的兼容性，直接输入let，点击检测按钮会出现针对此特性的浏览器检测结果；当不输入任何特性直接点击检测时会出现所有es6新特性的检测结果。

总之，本发明对es6特性兼容性检测和分析，可以从单一特性到整体特性提供检测结果，以现代的可视化界面进行展示，解决传统检测方式笼统、不够直观的缺点。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。