Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json

简介: 本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。

数据序列化

数据序列化 (Serialization)是指将对象的状态信息转换为可以存储或传输的形式的过程。
在序列化期间,对象将其当前状态写入到临时或持久性存储区。以后,可以通过从存储区中读取或反序列化对象的状态,重新创建该对象。
TWaver支持数据序列化和反序列化,便于数据的传输以及重建。
但是TWaver并没有设计任何加密处理,我们可以对数据进行适当的加密处理,以确保数据传输的安全。

😉TWaver支持的序列化格式有xml和json,使用方法如下:

Xml序列化与反序列化

//将DataBox序列化成xml数据
var datas = new twaver.XmlSerializer(box).serialize();
//反序列化,并将数据与DataBox建立关系
new twaver.XmlSerializer(box).deserialize(datas);
AI 代码解读

代码:

 let node1 = returnNodeFun(box, {
    name: "第一个node", location: {
    x: 100, y: 100 } })
        let node2 = returnNodeFun(box, {
    name: "第二个node", location: {
    x: 200, y: 200 } })
        let link1 = returnLineFun(node1, node2)

        let node3 = returnNodeFun(box, {
    name: "第三个node", location: {
    x: 100, y: 100 } })
        let node4 = returnNodeFun(box, {
    name: "第四个node", location: {
    x: 300, y: 300 } })

        let link2 = returnLineFun(node3, node4)

        box.add(link2)
        // Xml序列化与反序列化
        let xmlObj = new twaver.XmlSerializer(box).serialize();
        console.log(xmlObj, 'xmlObj')

        // 缓存xml字符串
        localStorage.setItem('xmlObj', xmlObj)
        // 清除画布
        box.clear()
        // 重新获取 
        let xmldatas = localStorage.getItem('xmlObj')
        new twaver.XmlSerializer(box).deserialize(xmldatas);
        // return false
AI 代码解读

数据格式:

           <twaver version='5.9.9' platform='html5'>
                <dataBox class='twaver.ElementBox'>
                    <layerBox>
                        <layer name='Default' visible='true' editable='true' movable='true'/>
                    </layerBox>
                </dataBox>
                <data class='twaver.Node' ref='0'>
                    <p n='name'><![CDATA[第一个node]]></p>
                    <p n='location' x='100' y='100'/>
                </data>
                <data class='twaver.Node' ref='1'>
                    <p n='name'><![CDATA[第二个node]]></p>
                    <p n='location' x='200' y='200'/>
                </data>
                <data class='twaver.Node' ref='2'>
                    <p n='name'><![CDATA[第三个node]]></p>
                    <p n='location' x='100' y='100'/>
                </data>
                <data class='twaver.Node' ref='3'>
                    <p n='name'><![CDATA[第四个node]]></p>
                    <p n='location' x='300' y='300'/>
                </data>
                <data class='twaver.Link' ref='4'>
                    <p n='fromNode' ref='2'/>
                    <p n='toNode' ref='3'/>
                </data>
            </twaver>
AI 代码解读

Json序列化与反序列化

//将DataBox序列化成Json数据
 var datas = new twaver.JsonSerializer(box).serialize();
//反序列化,并将数据与DataBox建立关系
 new twaver.JsonSerializer(box).deserialize(datas);
AI 代码解读

代码:

let node1 = returnNodeFun(box, {
    name: "第一个node", location: {
    x: 100, y: 100 } })
        let node2 = returnNodeFun(box, {
    name: "第二个node", location: {
    x: 200, y: 200 } })
        let link1 = returnLineFun(node1, node2)

        let node3 = returnNodeFun(box, {
    name: "第三个node", location: {
    x: 100, y: 100 } })
        let node4 = returnNodeFun(box, {
    name: "第四个node", location: {
    x: 300, y: 300 } })

        let link2 = returnLineFun(node3, node4)

        box.add(link2)

        // Json序列化与反序列化
        // 将当前netWork转成json数据
        let jsonoBJ = new twaver.JsonSerializer(box).serialize()
        // 缓存json字符串
        localStorage.setItem('jsonoBJ', jsonoBJ)
        // 清除画布
        box.clear()
        // 打印json对象
        /**
         * {"version":"5.9.9","platform":"html5","images":{},"dataBox":{"class":"twaver.ElementBox","layers":[{"name":"Default","visible":true,"editable":true,"movable":true}]},"datas":[{"class":"twaver.Node","ref":0,"p":{"name":"第一个node","location":{"x":100,"y":100}}},{"class":"twaver.Node","ref":1,"p":{"name":"第二个node","location":{"x":200,"y":200}}},{"class":"twaver.Node","ref":2,"p":{"name":"第三个node","location":{"x":100,"y":100}}},{"class":"twaver.Node","ref":3,"p":{"name":"第四个node","location":{"x":300,"y":300}}},{"class":"twaver.Link","ref":4,"p":{"fromNode":2,"toNode":3}}]}
         */
        console.log(jsonoBJ, 'jsonoBJ')
        console.log(JSON.parse(jsonoBJ), 'jsonoBJ')
        // 重新获取 
        let datas = localStorage.getItem('jsonoBJ')
        // 将json串传入 即可直接绘画出图形
        new twaver.JsonSerializer(box).deserialize(datas);
AI 代码解读

数据格式:

{
   "version":"5.9.9","platform":"html5","images":{
   },"dataBox":{
   "class":"twaver.ElementBox","layers":[{
   "name":"Default","visible":true,"editable":true,"movable":true}]},"datas":[{
   "class":"twaver.Node","ref":0,"p":{
   "name":"第一个node","location":{
   "x":100,"y":100}}},{
   "class":"twaver.Node","ref":1,"p":{
   "name":"第二个node","location":{
   "x":200,"y":200}}},{
   "class":"twaver.Node","ref":2,"p":{
   "name":"第三个node","location":{
   "x":100,"y":100}}},{
   "class":"twaver.Node","ref":3,"p":{
   "name":"第四个node","location":{
   "x":300,"y":300}}},{
   "class":"twaver.Link","ref":4,"p":{
   "fromNode":2,"toNode":3}}]}
AI 代码解读

用户类型数据序列化

TWaver默认并不是任何数据类型都会序列化出去的,如当用户设置了用户属性,然后序列化却发现序列化的结果中没有值,或者序列化之后,再反序列化所得到的结果不一样,这是为什么呢?原来TWaver为了实现高效率、通用性、可插拔特性,需要先对用户属性的序列化类型进行注册。

其实就是我们自定义的一些属性。

注册方式如下:

twaver.SerializationSettings.setClientType('text','string');
AI 代码解读

这样注册之后,用户设置node.setClient(‘text’,’node’)就也可以序列化出去了。

学习参考:TWaver Documents

相关文章
如何在Python中高效实现CSV到JSON的数据转换
在实际项目中,数据格式转换是常见问题,尤其从CSV到JSON的转换。本文深入探讨了多种转换方法,涵盖Python基础实现、数据预处理、错误处理、性能优化及调试验证技巧。通过分块处理、并行处理等手段提升大文件转换效率,并介绍如何封装为命令行工具或Web API,实现自动化批量处理。关键点包括基础实现、数据清洗、异常捕获、性能优化和单元测试,确保转换流程稳定高效。
128 83
python语言采集淘宝商品详情数据,json数据示例返回
通过淘宝开放平台的API接口,开发者可以轻松获取商品详情数据,并利用这些数据进行商品分析、价格监控、库存管理等操作。本文提供的示例代码和JSON数据解析方法,可以帮助您快速上手淘宝商品数据的采集与处理。
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
处理从API返回的JSON数据时返回Unicode编码字符串怎么处理
在处理API返回的JSON数据时,遇到类似`\u7f51\u7edc\u8fde\u63a5\u9519\u8bef`的Unicode编码字符串,可使用JavaScript内置方法转换为可读文字。主要方法包括:1. 使用`JSON.parse`自动解析;2. 使用`decodeURIComponent`和`escape`组合解码;3. 在API调用中直接处理响应数据。这些方法能有效处理多语言内容,确保正确显示非ASCII字符。
淘宝商品评论数据API接口详解及JSON示例返回
淘宝商品评论数据API接口是淘宝开放平台提供的一项服务,旨在帮助开发者通过编程方式获取淘宝商品的评论数据。这些数据包括评论内容、评论时间、评论者信息、评分等,对于电商分析、用户行为研究、竞品分析等领域都具有极高的价值。
|
2月前
|
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
55 12
Go语言中json序列化的一个小坑,建议多留意一下
在Go语言开发中,JSON因其简洁和广泛的兼容性而常用于数据交换,但其在处理数字类型时存在精度问题。本文探讨了JSON序列化的一些局限性,并介绍了两种替代方案:Go特有的gob二进制协议,以及msgpack,两者都能有效解决类型保持和性能优化的问题。
93 7
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
85 4
对比JSON和Hessian2的序列化格式
通过以上对比分析,希望能够帮助开发者在不同场景下选择最适合的序列化格式,提高系统的整体性能和可维护性。
129 3
讲解SSM的xml文件
本文详细介绍了SSM框架中的xml配置文件,包括springMVC.xml和applicationContext.xml,涉及组件扫描、数据源配置、事务管理、MyBatis集成以及Spring MVC的视图解析器配置。
122 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等