数据序列化
数据序列化 (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
