前端原生组件的语法扩展方法、装置、设备和存储介质与流程

1.本技术涉及语法扩展技术领域，特别涉及一种前端原生组件的语法扩展方法、装置、设备和存储介质。


背景技术：

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


技术实现要素：

4.本技术的主要目的为提供一种前端原生组件的语法扩展方法、装置、设备和存储介质，旨在解决现有直接使用原生组件进行项目开发的效率较低的弊端。
5.为实现上述目的，本技术提供了一种前端原生组件的语法扩展方法，包括：
6.获取前端项目的初始脚本文件；
7.执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
8.在完成所述语法扩展后，得到最终脚本文件。
9.本技术还提供了一种前端原生组件的语法扩展装置，包括：
10.获取模块，用于获取前端项目的初始脚本文件；
11.扩展模块，用于执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
12.展示模块，用于在完成所述语法扩展后，得到最终脚本文件。
13.本技术还提供一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。
14.本技术还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。
15.本技术中提供的一种前端原生组件的语法扩展方法、装置、设备和存储介质，首先获取前端项目的初始脚本文件，然后执行预先构建的语法扩展工具，通过语法扩展工具对
初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展。在通过语法扩展工具完成对初始脚本文件的语法扩展后，得到最终脚本文件。本技术通过使用语法扩展工具，使得原生组件的语法具有更加强大的扩展性，开发者在编写前端原生组件时，可以像使用其他框架一样，采用动态渲染来简化页面元素展示和隐藏的控制编码；可以通过插值表达式，做到通过直接在模板上编写动态变量去控制页面动态内容的展示，而不需要自己去独立编写操作改变页面元素的代码；可以通过使用输入框的双向绑定，达到输入框内容与展示内容的双向实时更新，不在需要编写繁琐的操作元素以及监听输入框事件编码。开发者既能够享受到扩展语法带来的编码上的便利，又不会需要亲自搭建框架基础的脚手架，以及因为引入框架而导致整体项目资源包大小的增加，有效提高了项目的开发效率以及用户的使用体验。
附图说明
16.图1是本技术一实施例中前端原生组件的语法扩展方法的步骤示意图；
17.图2是本技术一实施例中前端原生组件的语法扩展装置的整体结构框图；
18.图3是本技术一实施例的计算机设备的结构示意框图。
19.本技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
20.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
21.参照图1，本技术一实施例中提供了一种前端原生组件的语法扩展方法，包括以下步骤s1—s3：
22.s1:获取前端项目的初始脚本文件；
23.s2:执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
24.s3:在完成所述语法扩展后，得到最终脚本文件。
25.本实施例中，前端原生组件的语法扩展方法是应用于项目开发完成、本地构建的阶段，在本地构建完成后项目才可以发布上线。具体地，语法扩展系统首先获取当前开发的前端项目中所有以“.js”结尾的文件，即初始脚本文件；然后执行预先构建的语法扩展工具，通过该语法扩展工具按照预设顺序从初始脚本文件中查找符合要求的文件，并依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展。在完成上述三个语法的语法扩展后，得到可以发布上线的最终脚本文件。
26.具体地，语法扩展的步骤，包括：在前端原生组件初始化执行时，首先会根据预设关键字从初始脚本文件中查找得到html页面上编写的页面模板。然后识别该页面模板上是否存在预定义的第一属性和第二属性；如果页面模板上存在第一属性和第二属性，则进一步判断第一属性所在的第一元素标签和第二属性所在的第一元素标签是否属于成对出现。如果页面模板上不存在预定义的第一属性和第二属性，或者第一属性所在的第一元素标签和第二属性所在的第一元素标签不是成对出现，则进行下一个语法(即插值表达式)的扩展
处理。如果页面模板上存在成对出现的第一属性和第二属性，则在第一属性对应的第一元素标签内、第二属性对应的第一元素标签内增加class类，用于后续对这两个第一元素标签内所有元素的隐藏和展示进行控制。语法扩展工具根据class类的类名和原生组件定义类的constructor函数的相同层级下，定义一个控制函数方法；该控制函数方法包含两个控制入参，控制函数方法在被调用时用于控制展示或隐藏上述成对出现的第一元素标签，而控制入参表征控制第一属性和第二属性的了第一元素标签进行展示或隐藏的变量值。语法扩展工具获取第一属性的第一属性值变量和第二属性的第二属性值变量，并调用控制函数方法将对应的第一控制入参对第一属性值变量进行赋值，并根据第二控制入参对第二属性值变量进行赋值，以实现连梁的变化实时反映在页面展示中，完成动态渲染的语法扩展；其中，第一控制入参和第二控制入参为相反值，第一属性值变量用于表征第一属性的元素第一属性展示或隐藏，第二属性值变量用于表征第二属性的元素第一属性展示或隐藏。
27.在完成动态渲染的语法扩展后，语法扩展系统依序进行插值表达式的语法扩展。具体地，语法扩展系统识别页面模板的语法中是否使用了插值表达式，如果页面模板中没有使用插值表达式，则对下一语法(即表单的双向绑定)进行语法扩展。如果页面模板的语法中使用了插值表达式，则为第二元素标签增加第一id属性，该第二元素标签为页面模板中使用了插值表达式的元素标签，第一id属性用于定位第二元素标签。然后，语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个替换函数方法，该替换函数方法包括替换入参，替换入参表征需要展示的内容。语法扩展工具调用替换函数方法，并根据替换入参和第二元素标签的静态值拼接得到替换内容。再根据第一id属性查找得到所有的第二元素标签，并使用替换内容替换第二元素标签包含的变量，完成插值表达式的语法扩展。
28.语法扩展系统在完成插值表达式的语法扩展后，依序进行表单的双向绑定的语法扩展。具体地，语法扩展系统识别页面模板是否使用了表单的双向绑定，如果页面模板使用了表单的双向绑定，则为第三元素标签添加第二id属性，并为第四元素标签添加第三id属性；其中，第三元素标签为页面模板中包含component-binding属性的元素标签，第四元素标签为页面模板中包含component-binding-text属性的元素标签，第二id属性用于定位第三元素标签，第三id属性用于定位第四元素标签。语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个展示函数方法，该展示函数方法包括展示入参，展示入参表征需要展示的内容。在监听到用户通过输入框键入文字时，调用展示函数方法，并将输入框的文字作为展示函数方法中的展示入参。然后根据第二id属性查找到第三元素标签，以及根据第三id属性查找到第四元素标签，并使用展示入参修改所有第三元素标签和第四元素标签包含的变量，完成表单的双向绑定的语法扩展。
29.本实施例中，语法扩展系统通过使用语法扩展工具，使得原生组件的语法具有更加强大的扩展性，开发者在编写前端原生组件时，可以像使用其他框架一样，采用动态渲染来简化页面元素展示和隐藏的控制编码；可以通过插值表达式，做到通过直接在模板上编写动态变量去控制页面动态内容的展示，而不需要自己去独立编写操作改变页面元素的代码；可以通过使用输入框的双向绑定，达到输入框内容与展示内容的双向实时更新，不在需要编写繁琐的操作元素以及监听输入框事件编码。开发者既能够享受到扩展语法带来的编码上的便利，又不会需要亲自搭建框架基础的脚手架，以及因为引入框架而导致整体项目
资源包大小的增加，有效提高了项目的开发效率以及用户的使用体验。
30.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述动态渲染的实现步骤，包括以下步骤s201—s205：
31.s201:根据预设关键字，从所述初始脚本文件中查找得到页面模板；
32.s202:识别所述页面模板是否存在成对出现的第一属性和第二属性；
33.s203:若所述页面模板存在成对出现的所述第一属性和第二属性，则在所述第一属性和所述第二属性的第一元素标签内增加class类；
34.s204:根据所述class类的类名和原生组件定义类的constructor函数的相同层级，定义控制函数方法，所述控制函数方法包含两个控制入参，所述控制入参表征控制所述第一属性和所述第二属性的第一元素标签进行展示或隐藏的变量值；
35.s205:获取所述第一属性的第一属性值变量和所述第二属性的第二属性值变量，并调用所述控制函数方法将对应的第一控制入参对所述第一属性值变量进行赋值，并根据第二控制入参对所述第二属性值变量进行赋值，其中，所述第一控制入参和所述第二控制入参为相反值，所述第一属性值变量用于表征所述第一属性的元素第一属性展示或隐藏，所述第二属性值变量用于表征所述第二属性的元素第一属性展示或隐藏。
36.本实施例中，在前端原生组件初始化执行时，语法扩展系统调用前端原生组件的定义类中的constructor函数，通过在constructor函数内部通过查找template关键字(即预设关键字)的方式，从初始脚本文件中查找得到html页面上编写的页面模板。然后查找页面模板上是否存在component-display属性(即第一属性)、component-none属性(即第二属性)，如果页面模板上同时存在component-display属性和component-none属性，则从component-display属性的元素标签a的当前标签层级一直往最顶层html元素标签进行计算，得到元素标签a的当前标签层级相对于最顶层元素标签的层级数目，记为层级a。同时，获取与元素标签a最邻近的一个component-none属性的元素标签b，并从元素标签b的当前标签层级往最顶层html元素标签进行计算，得到元素标签b的当前层级相对于最顶层元素标签的层级数目，记为层级b。语法扩展工具判断层级a和层级b的值是否相同，如果层级a和层级b的值相同，则判定component-display属性和component-none属性在页面模板中成对出现。如果页面模板中存在成对出现的component-display属性和component-none属性，则说明该页面模板中使用了动态渲染，可以进行下一步处理。具体地，语法扩展工具在component-display属性和component-none属性各自所在的元素标签内增加一个class类，该class类用于后续对这两个属性的元素标签的隐藏或展示就那些控制。其中，class类的命名规则为：当前的元素标签名称 下划线 相对于顶层标签的层级数，比如当前的元素标签为div，相对顶层标签名称的层级数为10，则class类的命名为div_10。语法扩展工具在与前端原生组件定义类的constructor函数的相同层级下，定义一个控制函数方法，该控制函数方法用于控制component-display属性和component-none属性各自对应的元素标签的展示和隐藏；控制函数方法的函数名按照上述的class类名 下划线 diplayfn，如上述例子中的div_10_displayfn。控制函数方法中包括两个控制入参，控制入参为控制元素标签展示或隐藏的变量值。优先的，在实际应用中，元素标签的展示或隐藏只针对component-display属性的元素标签，因为对于成对出现的component-none属性所在的元素标签，直接
按照反向设置即可，即设置component-display属性对应的控制入参的反向值。语法扩展工具获取第一属性的第一属性值变量和第二属性的第二属性值变量，并调用控制函数方法将对应的第一控制入参对第一属性值变量进行赋值，并根据第二控制入参对第二属性值变量进行赋值，其中，第一控制入参和第二控制入参为相反值，第一属性值变量用于表征第一属性的元素第一属性展示或隐藏，第二属性值变量用于表征第二属性的元素第一属性展示或隐藏。优选的，由于component-display属性对应的属性值变量，还可以在其他函数方法中修改，并同时需要改变展示。因此，需要在constructor函数的相同层级下的所有方法内，查找属性值变量，并在对属性值变量的修改值的编码中，通过调用控制函数方法，将修改属性值变量的赋值作为控制函数方法的控制入参，以实现变量的的变化实时反应在页面展示中。
37.进一步的，所述根据预设关键字，从所述初始脚本文件中查找得到页面模板的步骤，包括以下步骤s20101—s20103：
38.s20101:在所述前端原生组件进行初始化时，调用所述前端原生组件的定义类中的constructor函数；
39.s20102:在所述constructor函数内部通过查找template关键字，得到页面元素展示模板的编码语句；
40.s20103:通过所述编码语句获取得到html页面上编写的所述页面模板。
41.本实施例中，在前端原生组件进行初始化时，语法扩展工具调用前端原生组件的定义类中的constructor函数。然后在constructor函数内部通过查找template关键字，识别出当前的前端原生组件获取页面元素展示模板的编码语句。语法扩展工具通过在该编码语句可以获取到页面元素展示模板对应的元素选择器，进而获取得到html页面上编写的页面模板。
42.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述插值表达式的实现步骤，包括以下步骤s206—s209：
43.s206:识别所述页面模板的语法中是否使用了所述插值表达式；
44.s207:若所述页面模板的语法中使用了所述插值表达式，则为第二元素标签增加第一id属性，所述第二元素标签为所述页面模板中使用了所述插值表达式的元素标签，所述第一id属性用于定位所述第二元素标签；
45.s208:在与所述原生组件定义类的constructor函数的相同层级下，定义替换函数方法，所述替换函数方法包括替换入参，所述替换入参表征需要展示的内容；
46.s209:调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量。
47.本实施例中，语法扩展工具查找页面模板上的所有闭合标签包裹的标签内容中，是否包含有前后花括号。如果标签内容中包含有前后华阔华，则说明页面模板的语法中使用了插值表达式。比如，p标签所编写的一行文字：《p》示例文字{动态文案展示部分}《/p》，例子中的示例文字{动态文案展示部分}，即是所述的闭合标签包裹的内容。在识别到页面模板的语法中使用了插值表达式后，语法扩展工具在使用插值表达式的第二元素标签上增
加一个第一id属性，该第一id属性用于定位第二元素标签。第一id属性的命名规则为当前组件名称 下划线 出现插值表达式的序号；比如当前组件名为组件a，当前页面模板中，该插值表达式是第一个被找到的，那么id命名为组件a_1。语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个替换函数方法，该替换函数方法用于设置动态替换插值表达式的内容，即当插值表达式的内容发送变化时，通过调用该替换函数方法，能够随时进行页面元素展示的变化；替换函数方法的函数名按照上一步中的id属性 下划线 insertfn，如上面例子中的a_1_insertfn。替换函数方法包括一个替换入参，替换入参的内容为插值表达式需要展示的动态部分的内容。在采集到用户输入的展示指令时，语法扩展工具调用替换函数方法，根据替换入参(替换入参的内容作为动态值)和第二元素标签的静态值拼接得到替换内容，并根据第一id属性查找得到第二元素标签，使用替换内容替换第二元素标签包含的变量后，实时反馈在页面展示内容中。优选的，由于插值表达式内对应的变量，还可以在其他函数方法中修改，并同时需要在其变量的值改变时，对页面调整展示。因此，需要在constructor函数的相同层级下的所有方法内，查找该变量，并在对变量修改值的编码中，进行调用替换函数方法，将修改变量的赋值，作为函数的替换入参，以实现变量的变化动态修改插值表达式内的动态内容，实时反馈在页面展示内容中。
48.进一步的，所述调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量的步骤，包括以下步骤s20901—s20904：
49.s20901:监控是否采集到展示指令；
50.s20902:若采集到所述展示指令，则从所述第二元素标签中提取所述静态值，并调用所述替换函数方法，使用变量赋值作为所述替换入参；
51.s20903:将所述替换入参作为动态值与所述静态值按照预设格式进行拼接，得到所述替换内容；
52.s20904:在所述constructor函数的相同层级下根据所述第一id属性查找得到所述第二元素标签，并使用所述替换内容修改所述第二元素标签包含的变量。
53.本实施例中，语法扩展系统实时监控是否采集到用户输入的展示指令(比如用户是否点击页面展示第二元素标签的内容，该点击动作即为展示指令)，如果采集到用户输入的展示指令，则从第二元素标签中提取静态值，并调用替换函数方法，通过替换函数方法将变量赋值作为替换入参(比如第二元素标签的静态值为示例文字，动态值为时间戳，在初始时第二元素标签中的动态值具有一个默认时刻的时间戳；在需要进行展示时，则使用当前时刻作为变量赋值，从而使用当前时刻作为动态值取代初始的默认时刻)。语法扩展工具将替换入参作为动态值与第二元素标签的静态值按照预设格式(比如静态值 动态值)进行拼接，从而得到全新的替换内容。语法扩展工具在constructor函数的相同层级下，根据第一id属性查找得到第二元素标签，并使用替换内容修改、替换第二元素标签原先包含的变量，实现对第二元素标签包含的内容的更新。
54.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述表单的双向绑定的实现步骤，包括以下步骤s2010—s2014：
55.s2010:识别所述页面模板是否使用了所述表单的双向绑定；
56.s2011:若所述页面模板使用了所述表单的双向绑定，则为第三元素标签添加第二id属性，并为第四元素标签添加第三id属性，所述第三元素标签为所述页面模板中包含component-binding属性的元素标签，所述第四元素标签为所述页面模板中包含component-binding-text属性的元素标签，所述第二id属性用于定位所述第三元素标签，所述第三id属性用于定位所述第四元素标签；
57.s2012:在与所述原生组件定义类的constructor函数的相同层级下，定义展示函数方法，所述展示函数方法包括展示入参，所述展示入参表征需要展示的内容；
58.s2013:在监听到用户通过输入框键入文字时，调用所述展示函数方法，并将所述输入框的文字作为所述展示入参；
59.s2014:根据所述第二id属性查找到所述第三元素标签，以及根据所述第三id属性查找到所述第四元素标签，并使用所述展示入参修改所述第三元素标签和所述第四元素标签包含的变量。
60.本实施例中，语法扩展工具识别页面模板是否使用了表单的双向绑定，如果页面模板使用了表单的双向绑定，则为页面模板中包含component-binding属性的元素标签，即第三元素标签添加第二id属性；并为页面模板中包含component-binding-text属性的元素标签，即第四元素标签添加第三id属性。第二id属性用于定位第三元素标签，第三id属性用于定位第四元素标签，两个id属性均能对输入框里面的内容做替换。具体地，第三id属性和第四id属性的命名规则相同，为当前元素标签名称 下划线 binding 出现该属性的序号。如当前元素名称为input，当前模板中，该component-binding属性是第一个被找到的，那么id命名为input_binding_1。component-binding属性对应的属性值是一个变量的形式，该变量会随着输入框输入值的变化而变化。且可以被其他标签中的component-binding-text属性所引用，当标签中出现该属性时，标签内的文案展示内容，会随着component-binding-text属性值的变化而做出相应的修改，类似于插值表达式的作用，但是该属性只能用于表单中绑定的动态变量，即component-binding-text属性值对应的变量，只能是某个表单元素中component-binding属性的变量。语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个展示函数方法，该展示函数方法在输入框内容因为手动输入发生变化，或者通过其他函数方法改变输入框内容展示时，通过调用展示函数方法能够随时进行页面元素展示的变化。展示函数方法的函数名按照上述定义的id属性 下划线 bindingfn，如上述例子中的input_binding1_bingfn。展示函数方法包含一个展示入参，展示入参的内容为需要设置为展示状态的内容。语法扩展系统通过浏览器自带的文档对象中的添加事件的方法，为出现component-binding属性所在的元素标签上，添加一个input事件，用于监听输入框键入文字时，触发的相应的回调函数事件。该回调函数会接受输入框输入的内容作为入参(称为输入框入参)，回调函数的内容为调用上述展示函数方法，并将输入框入参作为调用展示函数方法的展示入参，进行对应元素标签的展示内容的更新设置。具体地，语法扩展系统在监听到用户通过输入框键入文字时，调用展示函数方法，并将输入框的文字作为展示入参。然后根据第二id属性查找到第三元素标签，以及根据第三id属性查找到第四元素标签，并使用展示入参修改(或者说直接替换)第三元素标签和第四元素标签包含的变量，完成展示内容的更新设置。优选的，由于表单和component-binding属性所在元素标签绑定的对应变量，还可以在其他函数方法中修改，并同时需要改变展示。所以需
要在constructor函数的相同层级下的所有方法内，查找该变量，并在对变量修改值的编码中，进行调用展示函数方法，将修改变量的赋值，作为函数的展示入参，以实现变量的变化实时反馈在页面展示内容中。
61.进一步的，所述识别所述页面模板是否使用了所述表单的双向绑定的步骤中，包括以下步骤s201001—s201003：
62.s201001:从所述页面模板中查找得到input标签和textarea标签；
63.s201002:判断所述input标签和所述textarea标签是否均包含所述component-binding属性；
64.s201003:若所述input标签和所述textarea标签均包含所述component-binding属性，则判定所述页面模板使用了所述表单的双向绑定。
65.本实施例中，语法扩展工具查找页面模板上所有input标签和textarea标签，然后判断input标签和textarea标签中是否包含有component-binding属性。如果input标签和textarea标签均包含有component-binding属性，则判定页面模板使用了表单的双向绑定的语法，需要进行相应的转换。
66.参照图2，本技术一实施例中还提供了一种前端原生组件的语法扩展装置，所述装置包括：
67.获取模块1，用于获取前端项目的初始脚本文件；
68.扩展模块2，用于执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
69.展示模块3，用于在完成所述语法扩展后，得到最终脚本文件。
70.本实施例中，前端原生组件的语法扩展方法是应用于项目开发完成、本地构建的阶段，在本地构建完成后项目才可以发布上线。具体地，语法扩展系统首先获取当前开发的前端项目中所有以“.js”结尾的文件，即初始脚本文件；然后执行预先构建的语法扩展工具，通过该语法扩展工具按照预设顺序从初始脚本文件中查找符合要求的文件，并依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展。在完成上述三个语法的语法扩展后，得到可以发布上线的最终脚本文件。
71.具体地，语法扩展的步骤，包括：在前端原生组件初始化执行时，首先会根据预设关键字从初始脚本文件中查找得到html页面上编写的页面模板。然后识别该页面模板上是否存在预定义的第一属性和第二属性；如果页面模板上存在第一属性和第二属性，则进一步判断第一属性所在的第一元素标签和第二属性所在的第一元素标签是否属于成对出现。如果页面模板上不存在预定义的第一属性和第二属性，或者第一属性所在的第一元素标签和第二属性所在的第一元素标签不是成对出现，则进行下一个语法(即插值表达式)的扩展处理。如果页面模板上存在成对出现的第一属性和第二属性，则在第一属性对应的第一元素标签内、第二属性对应的第一元素标签内增加class类，用于后续对这两个第一元素标签内所有元素的隐藏和展示进行控制。语法扩展工具根据class类的类名和原生组件定义类的constructor函数的相同层级下，定义一个控制函数方法；该控制函数方法包含两个控制入参，控制函数方法在被调用时用于控制展示或隐藏上述成对出现的第一元素标签，而控制入参表征控制第一属性和第二属性的了第一元素标签进行展示或隐藏的变量值。语法扩展工具获取第一属性的第一属性值变量和第二属性的第二属性值变量，并调用控制函数方
法将对应的第一控制入参对第一属性值变量进行赋值，并根据第二控制入参对第二属性值变量进行赋值，以实现连梁的变化实时反映在页面展示中，完成动态渲染的语法扩展；其中，第一控制入参和第二控制入参为相反值，第一属性值变量用于表征第一属性的元素第一属性展示或隐藏，第二属性值变量用于表征第二属性的元素第一属性展示或隐藏。
72.在完成动态渲染的语法扩展后，语法扩展系统依序进行插值表达式的语法扩展。具体地，语法扩展系统识别页面模板的语法中是否使用了插值表达式，如果页面模板中没有使用插值表达式，则对下一语法(即表单的双向绑定)进行语法扩展。如果页面模板的语法中使用了插值表达式，则为第二元素标签增加第一id属性，该第二元素标签为页面模板中使用了插值表达式的元素标签，第一id属性用于定位第二元素标签。然后，语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个替换函数方法，该替换函数方法包括替换入参，替换入参表征需要展示的内容。语法扩展工具调用替换函数方法，并根据替换入参和第二元素标签的静态值拼接得到替换内容。再根据第一id属性查找得到所有的第二元素标签，并使用替换内容替换第二元素标签包含的变量，完成插值表达式的语法扩展。
73.语法扩展系统在完成插值表达式的语法扩展后，依序进行表单的双向绑定的语法扩展。具体地，语法扩展系统识别页面模板是否使用了表单的双向绑定，如果页面模板使用了表单的双向绑定，则为第三元素标签添加第二id属性，并为第四元素标签添加第三id属性；其中，第三元素标签为页面模板中包含component-binding属性的元素标签，第四元素标签为页面模板中包含component-binding-text属性的元素标签，第二id属性用于定位第三元素标签，第三id属性用于定位第四元素标签。语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个展示函数方法，该展示函数方法包括展示入参，展示入参表征需要展示的内容。在监听到用户通过输入框键入文字时，调用展示函数方法，并将输入框的文字作为展示函数方法中的展示入参。然后根据第二id属性查找到第三元素标签，以及根据第三id属性查找到第四元素标签，并使用展示入参修改所有第三元素标签和第四元素标签包含的变量，完成表单的双向绑定的语法扩展。
74.本实施例中，语法扩展系统通过使用语法扩展工具，使得原生组件的语法具有更加强大的扩展性，开发者在编写前端原生组件时，可以像使用其他框架一样，采用动态渲染来简化页面元素展示和隐藏的控制编码；可以通过插值表达式，做到通过直接在模板上编写动态变量去控制页面动态内容的展示，而不需要自己去独立编写操作改变页面元素的代码；可以通过使用输入框的双向绑定，达到输入框内容与展示内容的双向实时更新，不在需要编写繁琐的操作元素以及监听输入框事件编码。开发者既能够享受到扩展语法带来的编码上的便利，又不会需要亲自搭建框架基础的脚手架，以及因为引入框架而导致整体项目资源包大小的增加，有效提高了项目的开发效率以及用户的使用体验。
75.进一步的，所述扩展模块2，包括：
76.查找单元，用于根据预设关键字，从所述初始脚本文件中查找得到页面模板；
77.第一识别单元，用于识别所述页面模板是否存在成对出现的第一属性和第二属性；
78.第一添加单元，用于若所述页面模板存在成对出现的所述第一属性和第二属性，则在所述第一属性和所述第二属性的第一元素标签内增加class类；
79.第一定义单元，用于根据所述class类的类名和原生组件定义类的constructor函数的相同层级，定义控制函数方法，所述控制函数方法包含两个控制入参，所述控制入参表征控制所述第一属性和所述第二属性的第一元素标签进行展示或隐藏的变量值；
80.赋值单元，用于获取所述第一属性的第一属性值变量和所述第二属性的第二属性值变量，并调用所述控制函数方法将对应的第一控制入参对所述第一属性值变量进行赋值，并根据第二控制入参对所述第二属性值变量进行赋值，其中，所述第一控制入参和所述第二控制入参为相反值，所述第一属性值变量用于表征所述第一属性的元素第一属性展示或隐藏，所述第二属性值变量用于表征所述第二属性的元素第一属性展示或隐藏。
81.本实施例中，在前端原生组件初始化执行时，语法扩展系统调用前端原生组件的定义类中的constructor函数，通过在constructor函数内部通过查找template关键字(即预设关键字)的方式，从初始脚本文件中查找得到html页面上编写的页面模板。然后查找页面模板上是否存在component-display属性(即第一属性)、component-none属性(即第二属性)，如果页面模板上同时存在component-display属性和component-none属性，则从component-display属性的元素标签a的当前标签层级一直往最顶层html元素标签进行计算，得到元素标签a的当前标签层级相对于最顶层元素标签的层级数目，记为层级a。同时，获取与元素标签a最邻近的一个component-none属性的元素标签b，并从元素标签b的当前标签层级往最顶层html元素标签进行计算，得到元素标签b的当前层级相对于最顶层元素标签的层级数目，记为层级b。语法扩展工具判断层级a和层级b的值是否相同，如果层级a和层级b的值相同，则判定component-display属性和component-none属性在页面模板中成对出现。如果页面模板中存在成对出现的component-display属性和component-none属性，则说明该页面模板中使用了动态渲染，可以进行下一步处理。具体地，语法扩展工具在component-display属性和component-none属性各自所在的元素标签内增加一个class类，该class类用于后续对这两个属性的元素标签的隐藏或展示就那些控制。其中，class类的命名规则为：当前的元素标签名称 下划线 相对于顶层标签的层级数，比如当前的元素标签为div，相对顶层标签名称的层级数为10，则class类的命名为div_10。语法扩展工具在与前端原生组件定义类的constructor函数的相同层级下，定义一个控制函数方法，该控制函数方法用于控制component-display属性和component-none属性各自对应的元素标签的展示和隐藏；控制函数方法的函数名按照上述的class类名 下划线 diplayfn，如上述例子中的div_10_displayfn。控制函数方法中包括两个控制入参，控制入参为控制元素标签展示或隐藏的变量值。优先的，在实际应用中，元素标签的展示或隐藏只针对component-display属性的元素标签，因为对于成对出现的component-none属性所在的元素标签，直接按照反向设置即可，即设置component-display属性对应的控制入参的反向值。语法扩展工具获取第一属性的第一属性值变量和第二属性的第二属性值变量，并调用控制函数方法将对应的第一控制入参对第一属性值变量进行赋值，并根据第二控制入参对第二属性值变量进行赋值，其中，第一控制入参和第二控制入参为相反值，第一属性值变量用于表征第一属性的元素第一属性展示或隐藏，第二属性值变量用于表征第二属性的元素第一属性展示或隐藏。优选的，由于component-display属性对应的属性值变量，还可以在其他函数方法中修改，并同时需要改变展示。因此，需要在constructor函数的相同层级下的所有方法内，查找属性值变量，并在对属性值变量的修改值的编码中，通过调用控制函数方法，将修改属性
值变量的赋值作为控制函数方法的控制入参，以实现变量的的变化实时反应在页面展示中。
82.进一步的，所述查找单元，包括：
83.调用子单元，用于在所述前端原生组件进行初始化时，调用所述前端原生组件的定义类中的constructor函数；
84.查找子单元，用于在所述constructor函数内部通过查找template关键字，得到页面元素展示模板的编码语句；
85.获取子单元，用于通过所述编码语句获取得到html页面上编写的所述页面模板。
86.本实施例中，在前端原生组件进行初始化时，语法扩展工具调用前端原生组件的定义类中的constructor函数。然后在constructor函数内部通过查找template关键字，识别出当前的前端原生组件获取页面元素展示模板的编码语句。语法扩展工具通过在该编码语句可以获取到页面元素展示模板对应的元素选择器，进而获取得到html页面上编写的页面模板。
87.进一步的，所述扩展模块2，还包括：
88.第二识别单元，用于识别所述页面模板的语法中是否使用了所述插值表达式；
89.第二添加单元，用于若所述页面模板的语法中使用了所述插值表达式，则为第二元素标签增加第一id属性，所述第二元素标签为所述页面模板中使用了所述插值表达式的元素标签，所述第一id属性用于定位所述第二元素标签；
90.第二定义单元，用于在与所述原生组件定义类的constructor函数的相同层级下，定义替换函数方法，所述替换函数方法包括替换入参，所述替换入参表征需要展示的内容；
91.替换单元，用于调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量。
92.本实施例中，语法扩展工具查找页面模板上的所有闭合标签包裹的标签内容中，是否包含有前后花括号。如果标签内容中包含有前后华阔华，则说明页面模板的语法中使用了插值表达式。比如，p标签所编写的一行文字：《p》示例文字{动态文案展示部分}《/p》，例子中的示例文字{动态文案展示部分}，即是所述的闭合标签包裹的内容。在识别到页面模板的语法中使用了插值表达式后，语法扩展工具在使用插值表达式的第二元素标签上增加一个第一id属性，该第一id属性用于定位第二元素标签。第一id属性的命名规则为当前组件名称 下划线 出现插值表达式的序号；比如当前组件名为组件a，当前页面模板中，该插值表达式是第一个被找到的，那么id命名为组件a_1。语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个替换函数方法，该替换函数方法用于设置动态替换插值表达式的内容，即当插值表达式的内容发送变化时，通过调用该替换函数方法，能够随时进行页面元素展示的变化；替换函数方法的函数名按照上一步中的id属性 下划线 insertfn，如上面例子中的a_1_insertfn。替换函数方法包括一个替换入参，替换入参的内容为插值表达式需要展示的动态部分的内容。在采集到用户输入的展示指令时，语法扩展工具调用替换函数方法，根据替换入参(替换入参的内容作为动态值)和第二元素标签的静态值拼接得到替换内容，并根据第一id属性查找得到第二元素标签，使用替换内容替换第二元素标签包含的变量后，实时反馈在页面展示内容中。优选的，由于插值表达式内对应的
变量，还可以在其他函数方法中修改，并同时需要在其变量的值改变时，对页面调整展示。因此，需要在constructor函数的相同层级下的所有方法内，查找该变量，并在对变量修改值的编码中，进行调用替换函数方法，将修改变量的赋值，作为函数的替换入参，以实现变量的变化动态修改插值表达式内的动态内容，实时反馈在页面展示内容中。
93.进一步的，所述替换单元，包括：
94.监控子单元，用于监控是否采集到展示指令；
95.提取子单元，用于若采集到所述展示指令，则从所述第二元素标签中提取所述静态值，并调用所述替换函数方法，使用变量赋值作为所述替换入参；
96.拼接子单元，用途将所述替换入参作为动态值与所述静态值按照预设格式进行拼接，得到所述替换内容；
97.修改子单元，用于在所述constructor函数的相同层级下根据所述第一id属性查找得到所述第二元素标签，并使用所述替换内容修改所述第二元素标签包含的变量。
98.本实施例中，语法扩展系统实时监控是否采集到用户输入的展示指令(比如用户是否点击页面展示第二元素标签的内容，该点击动作即为展示指令)，如果采集到用户输入的展示指令，则从第二元素标签中提取静态值，并调用替换函数方法，通过替换函数方法将变量赋值作为替换入参(比如第二元素标签的静态值为示例文字，动态值为时间戳，在初始时第二元素标签中的动态值具有一个默认时刻的时间戳；在需要进行展示时，则使用当前时刻作为变量赋值，从而使用当前时刻作为动态值取代初始的默认时刻)。语法扩展工具将替换入参作为动态值与第二元素标签的静态值按照预设格式(比如静态值 动态值)进行拼接，从而得到全新的替换内容。语法扩展工具在constructor函数的相同层级下，根据第一id属性查找得到第二元素标签，并使用替换内容修改、替换第二元素标签原先包含的变量，实现对第二元素标签包含的内容的更新。
99.进一步的，所述扩展模块2，还包括：
100.第三识别单元，用于识别所述页面模板是否使用了所述表单的双向绑定；
101.第三添加单元，用于若所述页面模板使用了所述表单的双向绑定，则为第三元素标签添加第二id属性，并为第四元素标签添加第三id属性，所述第三元素标签为所述页面模板中包含component-binding属性的元素标签，所述第四元素标签为所述页面模板中包含component-binding-text属性的元素标签，所述第二id属性用于定位所述第三元素标签，所述第三id属性用于定位所述第四元素标签；
102.第三定义单元，用于在与所述原生组件定义类的constructor函数的相同层级下，定义展示函数方法，所述展示函数方法包括展示入参，所述展示入参表征需要展示的内容；
103.调用单元，用于在监听到用户通过输入框键入文字时，调用所述展示函数方法，并将所述输入框的文字作为所述展示入参；
104.修改单元，用于根据所述第二id属性查找到所述第三元素标签，以及根据所述第三id属性查找到所述第四元素标签，并使用所述展示入参修改所述第三元素标签和所述第四元素标签包含的变量。
105.本实施例中，语法扩展工具识别页面模板是否使用了表单的双向绑定，如果页面模板使用了表单的双向绑定，则为页面模板中包含component-binding属性的元素标签，即第三元素标签添加第二id属性；并为页面模板中包含component-binding-text属性的元素
标签，即第四元素标签添加第三id属性。第二id属性用于定位第三元素标签，第三id属性用于定位第四元素标签，两个id属性均能对输入框里面的内容做替换。具体地，第三id属性和第四id属性的命名规则相同，为当前元素标签名称 下划线 binding 出现该属性的序号。如当前元素名称为input，当前模板中，该component-binding属性是第一个被找到的，那么id命名为input_binding_1。component-binding属性对应的属性值是一个变量的形式，该变量会随着输入框输入值的变化而变化。且可以被其他标签中的component-binding-text属性所引用，当标签中出现该属性时，标签内的文案展示内容，会随着component-binding-text属性值的变化而做出相应的修改，类似于插值表达式的作用，但是该属性只能用于表单中绑定的动态变量，即component-binding-text属性值对应的变量，只能是某个表单元素中component-binding属性的变量。语法扩展工具在与原生组件定义类的constructor函数的相同层级下，定义一个展示函数方法，该展示函数方法在输入框内容因为手动输入发生变化，或者通过其他函数方法改变输入框内容展示时，通过调用展示函数方法能够随时进行页面元素展示的变化。展示函数方法的函数名按照上述定义的id属性 下划线 bindingfn，如上述例子中的input_binding1_bingfn。展示函数方法包含一个展示入参，展示入参的内容为需要设置为展示状态的内容。语法扩展系统通过浏览器自带的文档对象中的添加事件的方法，为出现component-binding属性所在的元素标签上，添加一个input事件，用于监听输入框键入文字时，触发的相应的回调函数事件。该回调函数会接受输入框输入的内容作为入参(称为输入框入参)，回调函数的内容为调用上述展示函数方法，并将输入框入参作为调用展示函数方法的展示入参，进行对应元素标签的展示内容的更新设置。具体地，语法扩展系统在监听到用户通过输入框键入文字时，调用展示函数方法，并将输入框的文字作为展示入参。然后根据第二id属性查找到第三元素标签，以及根据第三id属性查找到第四元素标签，并使用展示入参修改(或者说直接替换)第三元素标签和第四元素标签包含的变量，完成展示内容的更新设置。优选的，由于表单和component-binding属性所在元素标签绑定的对应变量，还可以在其他函数方法中修改，并同时需要改变展示。所以需要在constructor函数的相同层级下的所有方法内，查找该变量，并在对变量修改值的编码中，进行调用展示函数方法，将修改变量的赋值，作为函数的展示入参，以实现变量的变化实时反馈在页面展示内容中。
106.进一步的，所述第三识别单元，包括：
107.查找子单元，用于从所述页面模板中查找得到input标签和textarea标签；
108.判断子单元，用于判断所述input标签和所述textarea标签是否均包含所述component-binding属性；
109.判定子单元，用于若所述input标签和所述textarea标签均包含所述component-binding属性，则判定所述页面模板使用了所述表单的双向绑定。
110.本实施例中，语法扩展工具查找页面模板上所有input标签和textarea标签，然后判断input标签和textarea标签中是否包含有component-binding属性。如果input标签和textarea标签均包含有component-binding属性，则判定页面模板使用了表单的双向绑定的语法，需要进行相应的转换。
111.参照图3，本技术实施例中还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络
接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储初始脚本文件等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种前端原生组件的语法扩展方法。
112.上述处理器执行上述前端原生组件的语法扩展方法的步骤：
113.s1:获取前端项目的初始脚本文件；
114.s2:执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
115.s3:在完成所述语法扩展后，得到最终脚本文件。
116.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述动态渲染的实现步骤包括：
117.s201:根据预设关键字，从所述初始脚本文件中查找得到页面模板；
118.s202:识别所述页面模板是否存在成对出现的第一属性和第二属性；
119.s203:若所述页面模板存在成对出现的所述第一属性和第二属性，则在所述第一属性和所述第二属性的第一元素标签内增加class类；
120.s204:根据所述class类的类名和原生组件定义类的constructor函数的相同层级，定义控制函数方法，所述控制函数方法包含两个控制入参，所述控制入参表征控制所述第一属性和所述第二属性的第一元素标签进行展示或隐藏的变量值；
121.s205:获取所述第一属性的第一属性值变量和所述第二属性的第二属性值变量，并调用所述控制函数方法将对应的第一控制入参对所述第一属性值变量进行赋值，并根据第二控制入参对所述第二属性值变量进行赋值，其中，所述第一控制入参和所述第二控制入参为相反值，所述第一属性值变量用于表征所述第一属性的元素第一属性展示或隐藏，所述第二属性值变量用于表征所述第二属性的元素第一属性展示或隐藏。
122.进一步的，所述根据预设关键字，从所述初始脚本文件中查找得到页面模板的步骤，包括：
123.s20101:在所述前端原生组件进行初始化时，调用所述前端原生组件的定义类中的constructor函数；
124.s20102:在所述constructor函数内部通过查找template关键字，得到页面元素展示模板的编码语句；
125.s20103:通过所述编码语句获取得到html页面上编写的所述页面模板。
126.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述插值表达式的实现步骤包括：
127.s206:识别所述页面模板的语法中是否使用了所述插值表达式；
128.s207:若所述页面模板的语法中使用了所述插值表达式，则为第二元素标签增加第一id属性，所述第二元素标签为所述页面模板中使用了所述插值表达式的元素标签，所
述第一id属性用于定位所述第二元素标签；
129.s208:在与所述原生组件定义类的constructor函数的相同层级下，定义替换函数方法，所述替换函数方法包括替换入参，所述替换入参表征需要展示的内容；
130.s209:调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量。
131.进一步的，所述调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量的步骤，包括：
132.s20901:监控是否采集到展示指令；
133.s20902:若采集到所述展示指令，则从所述第二元素标签中提取所述静态值，并调用所述替换函数方法，使用变量赋值作为所述替换入参；
134.s20903:将所述替换入参作为动态值与所述静态值按照预设格式进行拼接，得到所述替换内容；
135.s20904:在所述constructor函数的相同层级下根据所述第一id属性查找得到所述第二元素标签，并使用所述替换内容修改所述第二元素标签包含的变量。
136.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述表单的双向绑定的实现步骤包括：
137.s2010:识别所述页面模板是否使用了所述表单的双向绑定；
138.s2011:若所述页面模板使用了所述表单的双向绑定，则为第三元素标签添加第二id属性，并为第四元素标签添加第三id属性，所述第三元素标签为所述页面模板中包含component-binding属性的元素标签，所述第四元素标签为所述页面模板中包含component-binding-text属性的元素标签，所述第二id属性用于定位所述第三元素标签，所述第三id属性用于定位所述第四元素标签；
139.s2012:在与所述原生组件定义类的constructor函数的相同层级下，定义展示函数方法，所述展示函数方法包括展示入参，所述展示入参表征需要展示的内容；
140.s2013:在监听到用户通过输入框键入文字时，调用所述展示函数方法，并将所述输入框的文字作为所述展示入参；
141.s2014:根据所述第二id属性查找到所述第三元素标签，以及根据所述第三id属性查找到所述第四元素标签，并使用所述展示入参修改所述第三元素标签和所述第四元素标签包含的变量。
142.进一步的，所述识别所述页面模板是否使用了所述表单的双向绑定的步骤中，包括：
143.s201001:从所述页面模板中查找得到input标签和textarea标签；
144.s201002:判断所述input标签和所述textarea标签是否均包含所述component-binding属性；
145.s201003:若所述input标签和所述textarea标签均包含所述component-binding属性，则判定所述页面模板使用了所述表单的双向绑定。
146.本技术一实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种前端原生组件的语法扩展方法，所述前端原生组件的语法扩展方法具体为：
147.s1:获取前端项目的初始脚本文件；
148.s2:执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展；
149.s3:在完成所述语法扩展后，得到最终脚本文件。
150.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述动态渲染的实现步骤包括：
151.s201:根据预设关键字，从所述初始脚本文件中查找得到页面模板；
152.s202:识别所述页面模板是否存在成对出现的第一属性和第二属性；
153.s203:若所述页面模板存在成对出现的所述第一属性和第二属性，则在所述第一属性和所述第二属性的第一元素标签内增加class类；
154.s204:根据所述class类的类名和原生组件定义类的constructor函数的相同层级，定义控制函数方法，所述控制函数方法包含两个控制入参，所述控制入参表征控制所述第一属性和所述第二属性的第一元素标签进行展示或隐藏的变量值；
155.s205:获取所述第一属性的第一属性值变量和所述第二属性的第二属性值变量，并调用所述控制函数方法将对应的第一控制入参对所述第一属性值变量进行赋值，并根据第二控制入参对所述第二属性值变量进行赋值，其中，所述第一控制入参和所述第二控制入参为相反值，所述第一属性值变量用于表征所述第一属性的元素第一属性展示或隐藏，所述第二属性值变量用于表征所述第二属性的元素第一属性展示或隐藏。
156.进一步的，所述根据预设关键字，从所述初始脚本文件中查找得到页面模板的步骤，包括：
157.s20101:在所述前端原生组件进行初始化时，调用所述前端原生组件的定义类中的constructor函数；
158.s20102:在所述constructor函数内部通过查找template关键字，得到页面元素展示模板的编码语句；
159.s20103:通过所述编码语句获取得到html页面上编写的所述页面模板。
160.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述插值表达式的实现步骤包括：
161.s206:识别所述页面模板的语法中是否使用了所述插值表达式；
162.s207:若所述页面模板的语法中使用了所述插值表达式，则为第二元素标签增加第一id属性，所述第二元素标签为所述页面模板中使用了所述插值表达式的元素标签，所述第一id属性用于定位所述第二元素标签；
163.s208:在与所述原生组件定义类的constructor函数的相同层级下，定义替换函数方法，所述替换函数方法包括替换入参，所述替换入参表征需要展示的内容；
164.s209:调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值
拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量。
165.进一步的，所述调用所述替换函数方法，根据所述替换入参和所述第二元素标签的静态值拼接得到替换内容，并根据所述第一id属性查找得到所述第二元素标签，使用所述替换内容替换所述第二元素标签包含的变量的步骤，包括：
166.s20901:监控是否采集到展示指令；
167.s20902:若采集到所述展示指令，则从所述第二元素标签中提取所述静态值，并调用所述替换函数方法，使用变量赋值作为所述替换入参；
168.s20903:将所述替换入参作为动态值与所述静态值按照预设格式进行拼接，得到所述替换内容；
169.s20904:在所述constructor函数的相同层级下根据所述第一id属性查找得到所述第二元素标签，并使用所述替换内容修改所述第二元素标签包含的变量。
170.进一步的，所述执行预先构建的语法扩展工具，通过所述语法扩展工具对所述初始脚本文件依次进行动态渲染、插值表达式和表单的双向绑定的语法扩展的步骤中，所述表单的双向绑定的实现步骤包括：
171.s2010:识别所述页面模板是否使用了所述表单的双向绑定；
172.s2011:若所述页面模板使用了所述表单的双向绑定，则为第三元素标签添加第二id属性，并为第四元素标签添加第三id属性，所述第三元素标签为所述页面模板中包含component-binding属性的元素标签，所述第四元素标签为所述页面模板中包含component-binding-text属性的元素标签，所述第二id属性用于定位所述第三元素标签，所述第三id属性用于定位所述第四元素标签；
173.s2012:在与所述原生组件定义类的constructor函数的相同层级下，定义展示函数方法，所述展示函数方法包括展示入参，所述展示入参表征需要展示的内容；
174.s2013:在监听到用户通过输入框键入文字时，调用所述展示函数方法，并将所述输入框的文字作为所述展示入参；
175.s2014:根据所述第二id属性查找到所述第三元素标签，以及根据所述第三id属性查找到所述第四元素标签，并使用所述展示入参修改所述第三元素标签和所述第四元素标签包含的变量。
176.进一步的，所述识别所述页面模板是否使用了所述表单的双向绑定的步骤中，包括：
177.s201001:从所述页面模板中查找得到input标签和textarea标签；
178.s201002:判断所述input标签和所述textarea标签是否均包含所述component-binding属性；
179.s201003:若所述input标签和所述textarea标签均包含所述component-binding属性，则判定所述页面模板使用了所述表单的双向绑定。
180.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储与一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可
包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram通过多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双速据率sdram(ssrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。
181.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其它变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、第一物体或者方法不仅包括那些要素，而且还包括没有明确列出的其它要素，或者是还包括为这种过程、装置、第一物体或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、装置、第一物体或者方法中还存在另外的相同要素。
182.以上所述仅为本技术的优选实施例，并非因此限制本技术的专利范围，凡是利用本技术说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其它相关的技术领域，均同理包括在本技术的专利保护范围内。