本发明专利技术涉及一种JavaScript渲染方法和装置。所述方法包括步骤：获取传入的配置参数，根据所述配置参数获取JSON数据，所述JSON数据的名称包括数据类型和标识；从预设的各HTML模板中获取所述JSON数据的数据类型对应的HTML模板，各HTML模板包括数据类型和数据类型的各个标签所在的位置；从所述JSON数据中获取名称分别与获取的HTML模板的各个标签相同的JSON数据，根据获取的JSON数据的值进行数据渲染。本发明专利技术提高了前端开发效率，避免了在不同类型业务开发时需要调整数据渲染逻辑操作的代码，降低了开发的成本。
【技术实现步骤摘要】
本专利技术涉及计算机
，特别是涉及一种JavaScript清染方法、JavaScript渲染装置。
技术介绍
JavaScript属于网络的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。JavaScript已经被广泛用于Web (网页)应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML (Hyper Text Markup Language，超文本标记语言)中来实现自身的功能的。—直以来，数据的加载、渲染对于前端来说都是个麻烦的问题，它的操作繁琐、重复度高，非常浪费程序员的宝贵时间。虽然目前也出现了各种框架(如AngularJS)或是模板引擎(HandlerBars)，但是如果只是为了解决前端数据加载和渲染的问题而引入这么大的文件，并且需要程序员学习这些框架语法、使用各种新的标签，那么无论机器运行成本，还是从人力成本都比较高。
技术实现思路
基于此，有必要针对上述问题，提供一种JavaScript清染方法和装置，能够提高前端开发效率和降低开发的成本。为了达到上述目的，本专利技术采用以下技术方案:一种JavaScript清染方法，包括步骤:获取传入的配置参数，根据所述配置参数获取JS0N数据，所述JS0N数据的名称包括数据类型和标识；从预设的各HTML模板中获取所述JS0N数据的数据类型对应的HTML模板，各HTML模板包括数据类型和数据类型的各个标签所在的位置；从所述JS0N数据中获取名称分别与获取的HTML模板的各个标签相同的JS0N数据，根据获取的JS0N数据的值进行数据渲染。一种JavaScript清染装置，包括:JS0N数据获取模块，用于获取传入的配置参数，根据所述配置参数获取JS0N数据，所述JS0N数据的名称包括数据类型和标识；HTML模板获取模块，用于从预设的各HTML模板中获取所述JS0N数据的数据类型对应的HTML模板，各HTML模板包括数据类型和数据类型的各个标签所在的位置；数据渲染模块，用于从所述JS0N数据中获取名称分别与获取的HTML模板的各个标签相同的JS0N数据，根据获取的JS0N数据的值进行数据渲染。本专利技术JavaScript清染方法和装置，各HTML模板根据各个业务自身的需求定义，在各HTML模板中添加数据类型的属性来声明模板用于批量动态渲染数据。根据传入的配置参数获取JS0N数据，根据JS0N数据的数据类型获取对应的HTML模板，然后根据JS0N数据进行数据渲染。本专利技术涉及前端的数据渲染，前端开发人员只需要关注数据获取的逻辑和HTML结构样式，不用关注数据渲染的实现，界面与数据分离处理，修改界面样式、结构也不会影响数据的渲染，这样HTML代码、JavaScript代码都非常简洁清晰，便于修改、维护；可以通过JavaScript插件实现，传入配置参数即可调用，不需要学习，可以批量渲染动态数据，提高了前端开发效率，避免了在不同类型业务开发时需要调整数据渲染逻辑操作的代码，降低了开发的成本。【附图说明】图1为本专利技术JavaScript清染方法实施例的流程示意图；图2为本专利技术HTML模板具体实施例的示意图；图3为本专利技术步骤S130实施例的流程示意图；图4为本专利技术由图2的模板生成的HTML界面具体实施例的示意图；图5为本专利技术JavaScript清染装置实施例一的结构示意图；图6为本专利技术JavaScript渲染装置实施例二的结构示意图；图7为本专利技术数据渲染模块实施例的结构示意图。【具体实施方式】为更进一步阐述本专利技术所采取的技术手段及取得的效果，下面结合附图及较佳实施例，对本专利技术的技术方案，进行清楚和完整的描述。如图1所示，一种JavaScript清染方法，包括步骤:S110、获取传入的配置参数，根据所述配置参数获取JSON (JavaScript ObjectNotat1n，JavaScript对象表示法)数据，所述JS0N数据的名称包括数据类型和标识；S120、从预设的各HTML模板中获取所述JS0N数据的数据类型对应的HTML模板，各HTML模板包括数据类型和数据类型的各个标签所在的位置；S130、从所述JS0N数据中获取名称分别与获取的HTML模板的各个标签相同的JS0N数据，根据获取的JS0N数据的值进行数据渲染。对于不同的业务类型，需要的HTML模板是不同的。针对不同的业务类型，在HTML模板中添加不同的数据类型的属性，例如在HTML模板中加入datatype = “ i t em ”的属性等，就能自动识别该标签块作为模板，复制该模板来批量渲染相应数据类型的JS0N数据。HTML模板还包括数据类型的各个标签所在的位置，例如在HTML模板需要加载数据的位置添加datafield =“数据类型—X X X X ”作为标签。例如，如图2所示，为HTML具体实施例的示意图。图2中的“设置为item”表示该模板添加的数据类型是item，文本标签1、图片标签和文本标签2即为该数据类型的标签所在的位置。例如，文本标签1处定义为 datafield =“ item — mask”，图片标签处定义为 datafield =“ item — img”，文本标签2处定义为datafield =“item—capt1n”。需要说明的是，上述标签的形式仅用于具体实例，并不对本专利技术标签的具体表述形式做出限定，用户还可以根据实际需要采用其他方式定义标签。JS0N数据是存储和交换文本信息的语法，包括名称和值。由于需要根据JS0N数据寻找模板和进行数据渲染，所以JS0N数据的名称包括数据类型和标识，例如一个JS0N数据为 object {item—img: “../imges/1.jpg”，item — mask: “艾美莉.克拉克”，item —capt1n 丹妮莉丝.坦格利安”，item— link:“baidu.com，，}，item 即为数据类型，img等为标识，“../imges/1.jpg”等为值。AJAX (Asynchronous Javascript And XML，阿贾克斯)是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在一个实施例中，获取传入的配置参数，根据所述配置参数获取JS0N数据的步骤可以包括:根据所述配置参数发送AJAX请求，获取根据所述AJAX请求返回的JS0N数据；和/ 或根据所述配置参数获取输入的JS0N数据。接收传入的配置参数后，可以调用AJAX来请求JS0N数据，也可以直接输入JS0N数据，也可以调用AJAX来请求JS0N数据和直接输入JS0N数据同时进行。获取到JS0N数据后，根据JS0N数据的数据类型寻找HTML模板。为了 HTML模板的循环使用，在一个实施例中，从预设的各HTML模板中获取所述JS0N数据的数据类型对应的HTML模板之后，从所述JS0N数据中获取名称分别与获取的HTML模板的各个标签相同的JS0N数据之前，还可以包括步骤:对获取的HTML模板进行复制，得到复制的HTML模板。那么后续即是从所述JS0N数据中获取名称分别与复制的HTML模板的各个标签相同的JS0N数据，根据获取的JS0N数据的值进行数据渲染，在渲本文档来自技高网...
【技术保护点】
一种JavaScript渲染方法，其特征在于，包括步骤：获取传入的配置参数，根据所述配置参数获取JSON数据，所述JSON数据的名称包括数据类型和标识；从预设的各HTML模板中获取所述JSON数据的数据类型对应的HTML模板，各HTML模板包括数据类型和数据类型的各个标签所在的位置；从所述JSON数据中获取名称分别与获取的HTML模板的各个标签相同的JSON数据，根据获取的JSON数据的值进行数据渲染。
【技术特征摘要】
【专利技术属性】
技术研发人员：匡凌轩，
申请(专利权)人：广州华多网络科技有限公司，
类型：发明
国别省市：广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。