【技术实现步骤摘要】
本专利技术涉及javascript领域，具体提供一种绑定html元素渲染的方法及装置。
技术介绍
1、在h5 web前端开发过程中，当我们获取到数据去渲染页面元素的时候，现有技术通过dom层的方法获取或者创建html元素的方式去将对应的数据放置在合理的渲染位置。整个过程的代码会存在一定的冗杂且繁琐，当存在多个数据需要渲染时，可能还会出现相同的代码处理。
2、虽然现存在vue框架去处理数据与页面绑定的问题，但增加了学习成本，在不熟练的情况下，可能会增加开发的时间成本。
技术实现思路
1、本专利技术是针对上述现有技术的不足，提供一种实用性强的绑定html元素渲染的方法。
2、本专利技术进一步的技术任务是提供一种设计合理，安全适用的绑定html元素渲染的装置。
3、本专利技术解决其技术问题所采用的技术方案是：
4、一种绑定html元素渲染的方法，具有如下步骤：
5、s1、首先创建一个js文件，所述js文件取名render；
6、s2、js文件中声明一个class，class取名render；
7、s3、render中编写构造函数constructor，所述函数constructor需要参数data，data为json对象；data的键为html元素的id属性值，data的值对应为要渲染的数据；
8、s4、构造函数中，声明指向render的that，赋值this；构造函数的参数data放到ren
9、s5、构造函数中对data做处理。
10、进一步的，在步骤s5中，进一步包括：
11、s5.1、遍历data的键值，每个键为对用html元素的id，键取名为id；每个值为对应元素渲染的数据，值后取名为value，调用数据变化时监控的方法，取名为datawatch；调用数据变化后根据数据类型处理html元素渲染的方法，取名为typedistribution；
12、s5.2、定义数据变换时监控的方法datawatch，需将data遍历的id传入此方法；
13、s5.3、定义数据变化后根据数据类型处理html元素渲染方法typedistribution，需要将data遍历的id与value传入；
14、s5.4、定义字符串类型数据的html元素渲染方法stringvaluehandle；
15、s5.5、定义对象类型数据的html元素渲染方法objvaluehandle；
16、s5.6、定义数组类型数据的html元素渲染方法arrayvaluehandle；
17、s5.7、定义将data中的真实数据放到html对应槽位的方法appendvalue；
18、s5.8、定义对条件判断槽位处理的方法appendifvalue；
19、s5.9、定义对循环槽位处理的方法appendforvalue，传入id，要处理的html，父级设置；
20、s5.10、定义对普通取值槽位处理的方法appendnormalvalue，传入id，要处理的html，父级设置；
21、s5.11、定义通过属性路径查找具体数据的方法findvalue，传入id，属性数据中的路径，父级设置；
22、s5.12、定义处理对应id页面元素html的方法inithtml，传入id。
23、进一步的，在步骤s5.2中，做如下处理：
24、s5.2.1、提前准备变量oldvalue，将that.data[id]赋值给oldvalue；
25、s5.2.2、通过object.defineproperty方法监控对应数据变化，依次将render属性中的data，以及需要监控的data中间的id传给object.defineproperty的前两参数，与第三个参数中配置get以及set方法为：
26、(1)get方法中返回此方法中提前准备的oldvalue；
27、(2)set方法中去处理变化后的；
28、在步骤s5.3中，做如下处理：
29、通过typeof和array.isarray判断value的类型，若为数组类型，则调用数组类型数据的html元素渲染方法，取名为arrayvaluehandle；
30、若为对象类型，则调用对象类型数据的html元素渲染方法，取名为objvaluehandle；若为其他的数据类型，则调用字符串类型数据的html元素渲染方法，取名为stringvaluehandle。
31、进一步的，在步骤s5.4中，做如下处理：
32、s5.4.1、声明变量elem，将通过document.getelementbyid并传入id得到的页面元素进行赋值；
33、s5.4.2、判断elem是不是null，不是空则继续；
34、s5.4.3、通过document.getelementbyid(id).innerhtml并将value传入实现页面渲染。
35、进一步的，在步骤s5.5中，需要将id与value传入，做如下处理：
36、s5.5.1、声明变量elem，将通过document.getelementbyid并传入id得到的页面元素进行赋值；
37、s5.5.2、判断elem是不是null，不是空则继续；
38、s5.5.3、声明json对象parent，将id的数值以及value，作为一个键值对存入；
39、s5.5.4、声明变量html，接收通过调用处理对应id页面元素html的方法，获取到的页面元素的html字符串，取名为inithtml；
40、s5.5.5、调用将data中的真实数据放到html对应槽位的方法，取名为appendvalue，传入id，htm和parent；
41、此处槽位即为html对应id的元素中通过{{以及}}所包含的地方，{{}}中的内容以及规则如下：
42、(1){{for(单个循环的数据项名,需要循环的数据)………………for}}被此符号包裹住的为循环渲染数据，括号单个循环的数据项名可自定义；
43、(2){{if(符合javascript语法的条件语句)………………if}}被此符号包裹住的通过条件语句的正确与否，进行是否渲染所包裹内容的处理；
44、(3){{………………}}此符号即为取值符号，如果绑定数据为data，想要获取其中的name属性，即通过{{name}}即可获取，若在循环符号内，若循环的单项名为item，则通过{{item.name}}进行获取；
45、(4)以上说明中的本文档来自技高网...
【技术保护点】
1.一种绑定HTML元素渲染的方法，其特征在于，具有如下步骤：
2.根据权利要求1所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5中，进一步包括：
3.根据权利要求2所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5.2中，做如下处理：
4.根据权利要求3所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5.4中，做如下处理：
5.根据权利要求4所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5.5中，需要将id与value传入，做如下处理：
6.根据权利要求5所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5.6中，需要将id与value传入，做处理如下：
7.根据权利要求6所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5.8中，为方便阐述依次取名为：id，str，parent，具体做如下处理：
8.根据权利要求7所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5.9中，为方便阐述依次取名为：id，str，parent，具体
9.根据权利要求8所述的一种绑定HTML元素渲染的方法，其特征在于，在步骤S5.10中，为方便阐述依次取名为：id，str，parent，具体做如下处理：
10.一种绑定HTML元素渲染的装置，其特征在于，包括：至少一个存储器和至少一个处理器；
...【技术特征摘要】
1.一种绑定html元素渲染的方法，其特征在于，具有如下步骤：
2.根据权利要求1所述的一种绑定html元素渲染的方法，其特征在于，在步骤s5中，进一步包括：
3.根据权利要求2所述的一种绑定html元素渲染的方法，其特征在于，在步骤s5.2中，做如下处理：
4.根据权利要求3所述的一种绑定html元素渲染的方法，其特征在于，在步骤s5.4中，做如下处理：
5.根据权利要求4所述的一种绑定html元素渲染的方法，其特征在于，在步骤s5.5中，需要将id与value传入，做如下处理：
6.根据权利要求5所述的一种绑定html元素渲染的方法，其特征在于，在步骤s5.6中，需要...
【专利技术属性】
技术研发人员：韩光普，路中振，李勇，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。