【技术实现步骤摘要】
前端原生组件的语法扩展方法、装置、设备和存储介质
[0001]本申请涉及语法扩展
,特别涉及一种前端原生组件的语法扩展方法、装置、设备和存储介质。
技术介绍
[0002]目前的前端开发项目中,对于一些中大型的项目,通常会采用先搭建以框架为基础的脚手架,而对于一些小型项目(通常不会超过10个页面),如果要保证最好页面加载速度,同时省去搭建脚手架的时间,一般会直接采用原生JavaScript语言进行开发。因为框架的引入会增加引入框架本身的库文件以外,还会附带一些关联性的使用工具,如路由、状态管理等等,会增加整个项目整体资源包的大小,从而增加用户加载页面的耗时。而框架的搭建也需要开发者学习并按照框架制定的api进行项目脚手架的搭建,才可以进行项目的开发,而不像原生语言可以直接上手写功能。
[0003]虽然直接使用原生语言进行项目开发可以避免以上几个问题,但不可能否认的是,框架从语法上带来的开发效率的提升,也是原生组件无法做到的。如动态渲染可以简化对页面元素展示和隐藏的操作、插值表达式可以做到直接在页面模板上编写动态变量,且在动态变量变化时候可以实时反馈在页面上、输入框输入数据与展示的实时关联等等。
技术实现思路
[0004]本申请的主要目的为提供一种前端原生组件的语法扩展方法、装置、设备和存储介质,旨在解决现有直接使用原生组件进行项目开发的效率较低的弊端。
[0005]为实现上述目的,本申请提供了一种前端原生组件的语法扩展方法,包括:
[0006]获取前端项目的初始脚本文件;< ...
【技术保护点】
【技术特征摘要】
1.一种前端原生组件的语法扩展方法,其特征在于,所述方法包括:获取前端项目的初始脚本文件;执行预先构建的语法扩展工具,通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展;在完成所述语法扩展后,得到最终脚本文件。2.根据权利要求1所述的前端原生组件的语法扩展方法,其特征在于,所述执行预先构建的语法扩展工具,通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中,所述动态渲染的实现步骤,包括:根据预设关键字,从所述初始脚本文件中查找得到页面模板;识别所述页面模板是否存在成对出现的第一属性和第二属性;若所述页面模板存在成对出现的所述第一属性和第二属性,则在所述第一属性和所述第二属性的第一元素标签内增加class类;根据所述class类的类名和原生组件定义类的constructor函数的相同层级,定义控制函数方法,所述控制函数方法包含两个控制入参,所述控制入参表征控制所述第一属性和所述第二属性的第一元素标签进行展示或隐藏的变量值;获取所述第一属性的第一属性值变量和所述第二属性的第二属性值变量,并调用所述控制函数方法将对应的第一控制入参对所述第一属性值变量进行赋值,并根据第二控制入参对所述第二属性值变量进行赋值,其中,所述第一控制入参和所述第二控制入参为相反值,所述第一属性值变量用于表征所述第一属性的元素第一属性展示或隐藏,所述第二属性值变量用于表征所述第二属性的元素第一属性展示或隐藏。3.根据权利要求2所述的前端原生组件的语法扩展方法,其特征在于,所述根据预设关键字,从所述初始脚本文件中查找得到页面模板的步骤,包括:在所述前端原生组件进行初始化时,调用所述前端原生组件的定义类中的constructor函数;在所述constructor函数内部通过查找template关键字,得到页面元素展示模板的编码语句;通过所述编码语句获取得到html页面上编写的所述页面模板。4.根据权利要求2所述的前端原生组件的语法扩展方法,其特征在于,所述执行预先构建的语法扩展工具,通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中,所述插值表达式的实现步骤,包括:识别所述页面模板的语法中是否使用了所述插值表达式;若所述页面模板的语法中使用了所述插值表达式,则为第二元素标签增加第一id属性,所述第二元素标签为所述页面模板中使用了所述插值表达式的元素标签,所述第一id属性用于定位所述第二元素标签;在与所述原生组件定义类的constructor函数的相同层级下,定义替换函数方法,所述替换函数方法包括替换入参,所述替换入参表征需要展示的内容;调用所述替换函数方法,根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容,并根据所述第一id属性查找得到所述第二元素标签,使用所述替换内容替换所述第二元素标签包含的变量。
5.根据权利要求4所述的前端原生组件的语法扩展方法,其特征在于,所述调用所述替换函数方法,根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容,并根据所述第一id属性查找得到所述第二...
【专利技术属性】
技术研发人员:黄康,
申请(专利权)人:平安科技深圳有限公司,
类型:发明
国别省市:
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。