前端原生组件的语法扩展方法、装置、设备和存储介质制造方法及图纸

本申请提供了一种前端原生组件的语法扩展方法、装置、设备和存储介质，通过使用语法扩展工具，使得原生组件的语法具有更加强大的扩展性，开发者在编写前端原生组件时，可以像使用其他框架一样，采用动态渲染来简化页面元素展示和隐藏的控制编码；可以通过插值表达式，做到通过直接在模板上编写动态变量去控制页面动态内容的展示；可以通过使用输入框的双向绑定，达到输入框内容与展示内容的双向实时更新。开发者既能够享受到扩展语法带来的编码上的便利，又不会需要亲自搭建框架基础的脚手架，以及因为引入框架而导致整体项目资源包大小的增加，有效提高了项目的开发效率以及用户的使用体验。的使用体验。的使用体验。

【技术实现步骤摘要】
前端原生组件的语法扩展方法、装置、设备和存储介质


[0001]本申请涉及语法扩展
，特别涉及一种前端原生组件的语法扩展方法、装置、设备和存储介质。

技术介绍

[0002]目前的前端开发项目中，对于一些中大型的项目，通常会采用先搭建以框架为基础的脚手架，而对于一些小型项目(通常不会超过10个页面)，如果要保证最好页面加载速度，同时省去搭建脚手架的时间，一般会直接采用原生JavaScript语言进行开发。因为框架的引入会增加引入框架本身的库文件以外，还会附带一些关联性的使用工具，如路由、状态管理等等，会增加整个项目整体资源包的大小，从而增加用户加载页面的耗时。而框架的搭建也需要开发者学习并按照框架制定的api进行项目脚手架的搭建，才可以进行项目的开发，而不像原生语言可以直接上手写功能。
[0003]虽然直接使用原生语言进行项目开发可以避免以上几个问题，但不可能否认的是，框架从语法上带来的开发效率的提升，也是原生组件无法做到的。如动态渲染可以简化对页面元素展示和隐藏的操作、插值表达式可以做到直接在页面模板上编写动态变量，且在动态变量变化时候可以实时反馈在页面上、输入框输入数据与展示的实时关联等等。

技术实现思路

[0004]本申请的主要目的为提供一种前端原生组件的语法扩展方法、装置、设备和存储介质，旨在解决现有直接使用原生组件进行项目开发的效率较低的弊端。
[0005]为实现上述目的，本申请提供了一种前端原生组件的语法扩展方法，包括：
[0006]获取前端项目的初始脚本文件；<br/>[0007]执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
[0008]在完成所述语法扩展后，得到最终脚本文件。
[0009]本申请还提供了一种前端原生组件的语法扩展装置，包括：
[0010]获取模块，用于获取前端项目的初始脚本文件；
[0011]扩展模块，用于执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
[0012]展示模块，用于在完成所述语法扩展后，得到最终脚本文件。
[0013]本申请还提供一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。
[0014]本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。
[0015]本申请中提供的一种前端原生组件的语法扩展方法、装置、设备和存储介质，首先获取前端项目的初始脚本文件，然后执行预先构建的语法扩展工具，通过语法扩展工具对
初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展。在通过语法扩展工具完成对初始脚本文件的语法扩展后，得到最终脚本文件。本申请通过使用语法扩展工具，使得原生组件的语法具有更加强大的扩展性，开发者在编写前端原生组件时，可以像使用其他框架一样，采用动态渲染来简化页面元素展示和隐藏的控制编码；可以通过插值表达式，做到通过直接在模板上编写动态变量去控制页面动态内容的展示，而不需要自己去独立编写操作改变页面元素的代码；可以通过使用输入框的双向绑定，达到输入框内容与展示内容的双向实时更新，不在需要编写繁琐的操作元素以及监听输入框事件编码。开发者既能够享受到扩展语法带来的编码上的便利，又不会需要亲自搭建框架基础的脚手架，以及因为引入框架而导致整体项目资源包大小的增加，有效提高了项目的开发效率以及用户的使用体验。
附图说明
[0016]图1是本申请一实施例中前端原生组件的语法扩展方法的步骤示意图；
[0017]图2是本申请一实施例中前端原生组件的语法扩展装置的整体结构框图；
[0018]图3是本申请一实施例的计算机设备的结构示意框图。
[0019]本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
[0020]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0021]参照图1，本申请一实施例中提供了一种前端原生组件的语法扩展方法，包括以下步骤S1—S3：
[0022]S1:获取前端项目的初始脚本文件；
[0023]S2:执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
[0024]S3:在完成所述语法扩展后，得到最终脚本文件。
[0025]本实施例中，前端原生组件的语法扩展方法是应用于项目开发完成、本地构建的阶段，在本地构建完成后项目才可以发布上线。具体地，语法扩展系统首先获取当前开发的前端项目中所有以“.js”结尾的文件，即初始脚本文件；然后执行预先构建的语法扩展工具，通过该语法扩展工具按照预设顺序从初始脚本文件中查找符合要求的文件，并依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展。在完成上述三个语法的语法扩展后，得到可以发布上线的最终脚本文件。
[0026]具体地，语法扩展的步骤，包括：在前端原生组件初始化执行时，首先会根据预设关键字从初始脚本文件中查找得到html页面上编写的页面模板。然后识别该页面模板上是否存在预定义的第一属性和第二属性；如果页面模板上存在第一属性和第二属性，则进一步判断第一属性所在的第一元素标签和第二属性所在的第一元素标签是否属于成对出现。如果页面模板上不存在预定义的第一属性和第二属性，或者第一属性所在的第一元素标签和第二属性所在的第一元素标签不是成对出现，则进行下一个语法(即插值表达式)的扩展
处理。如果页面模板上存在成对出现的第一属性和第二属性，则在第一属性对应的第一元素标签内、第二属性对应的第一元素标签内增加class类，用于后续对这两个第一元素标签内所有元素的隐藏和展示进行控制。语法扩展工具根据class类的类名和原生组件定义类的constructor函数的相同层级下，定义一个控制函数方法；该控制函数方法包含两个控制入参，控制函数方法在被调用时用于控制展示或隐藏上述成对出现的第一元素标签，而控制入参表征控制第一属性和第二属性的了第一元素标签进行展示或隐藏的变量值。语法扩展工具获取第一属性的第一属性值变量和第二属性的第二属性值变量，并调用控制函数方法将对应的第一控制入参对第一属性值变量进行赋值，并根据第二控制入参对第二属性值变量进行赋值，以实现连梁的变化实时反映在页面展示中，完成动态渲染的语法扩展；其中，第一控制入参和第二控制入参为相反值，第一属性值变量用于表征第一属性的元素第一属性展示或隐藏，第二属性值变量用于表征第二属性的元素第一属性展示或隐藏。
[0027]在完成动态渲染的语法扩展后，语法扩展系统依序进行插值表本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端原生组件的语法扩展方法，其特征在于，所述方法包括：获取前端项目的初始脚本文件；执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；在完成所述语法扩展后，得到最终脚本文件。2.根据权利要求1所述的前端原生组件的语法扩展方法，其特征在于，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述动态渲染的实现步骤，包括：根据预设关键字，从所述初始脚本文件中查找得到页面模板；识别所述页面模板是否存在成对出现的第一属性和第二属性；若所述页面模板存在成对出现的所述第一属性和第二属性，则在所述第一属性和所述第二属性的第一元素标签内增加class类；根据所述class类的类名和原生组件定义类的constructor函数的相同层级，定义控制函数方法，所述控制函数方法包含两个控制入参，所述控制入参表征控制所述第一属性和所述第二属性的第一元素标签进行展示或隐藏的变量值；获取所述第一属性的第一属性值变量和所述第二属性的第二属性值变量，并调用所述控制函数方法将对应的第一控制入参对所述第一属性值变量进行赋值，并根据第二控制入参对所述第二属性值变量进行赋值，其中，所述第一控制入参和所述第二控制入参为相反值，所述第一属性值变量用于表征所述第一属性的元素第一属性展示或隐藏，所述第二属性值变量用于表征所述第二属性的元素第一属性展示或隐藏。3.根据权利要求2所述的前端原生组件的语法扩展方法，其特征在于，所述根据预设关键字，从所述初始脚本文件中查找得到页面模板的步骤，包括：在所述前端原生组件进行初始化时，调用所述前端原生组件的定义类中的constructor函数；在所述constructor函数内部通过查找template关键字，得到页面元素展示模板的编码语句；通过所述编码语句获取得到html页面上编写的所述页面模板。4.根据权利要求2所述的前端原生组件的语法扩展方法，其特征在于，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述插值表达式的实现步骤，包括：识别所述页面模板的语法中是否使用了所述插值表达式；若所述页面模板的语法中使用了所述插值表达式，则为第二元素标签增加第一id属性，所述第二元素标签为所述页面模板中使用了所述插值表达式的元素标签，所述第一id属性用于定位所述第二元素标签；在与所述原生组件定义类的constructor函数的相同层级下，定义替换函数方法，所述替换函数方法包括替换入参，所述替换入参表征需要展示的内容；调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量。
5.根据权利要求4所述的前端原生组件的语法扩展方法，其特征在于，所述调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二...

【专利技术属性】
技术研发人员：黄康，
申请(专利权)人：平安科技深圳有限公司，
类型：发明
国别省市：