MV源码解析之存档序列化与反序列化

沉滞的剑

今天来聊一聊存档的话题,
众所周知在RM中存档和读档是由StorageManager完成的
但其实StorageManager底层使用的是RM拓展的JsonEx完成的
这次我们就主要研究其中JsonEx.parse和JsonEx.stringify两个方法
依照惯例, 只粘贴有意义代码并且做可读性上的修改

0.当我们在讨论存档的时候我们在讨论什么
存档的主要目的是让玩家可以回到游戏的某一时刻的状态继续游戏
虽然可以把内存中的所有状态直接用快照的方式保存下来
但是更可靠的方式是将有用的信息以一定格式存储起来
不是所有信息都是必要的, 也不是所有信息都是有用的
对于RM来说只要保存几个游戏对象就足够了

1. 
   
2. DataManager.makeSaveContents = function() {
   
3.     // A save data does not contain $gameTemp, $gameMessage, and $gameTroop.
   
4.     var contents = {};
   
5.     contents.system       = $gameSystem;
   
6.     contents.screen       = $gameScreen;
   
7.     contents.timer        = $gameTimer;
   
8.     contents.switches     = $gameSwitches;
   
9.     contents.variables    = $gameVariables;
   
10.     contents.selfSwitches = $gameSelfSwitches;
    
11.     contents.actors       = $gameActors;
    
12.     contents.party        = $gameParty;
    
13.     contents.map          = $gameMap;
    
14.     contents.player       = $gamePlayer;
    
15.     return contents;
    
16. };
    

复制代码

1.序列化
这些都是Game_XXX的实例, 我们知道这些都是对象, 对象的结构是树状的
而contents其实就是这颗巨大的树的根
对于存储来说, 我们把这棵树转换成JSON格式的字符串就可以了
然而这样就遇到了两个问题:
  1.如何处理原型链
  2.如何处理循环引用
对于1的解决方法是将原型的constructor的记录下来
不过有一些特殊的类比如Date, Function这些类很难处理,
所以不做修改是无法复原原来的对象的
对于2的解决方法是将每个引用对象记录下来
如果遇到重复的对象, 则指向第一次遇到时候的引用
因为我们遍历这颗树的时候采取的遍历方式都是一致的
所以这个引用其实就是一个索引就可以了
下面首先来看一下我们的编码入口方法(和RM原版略有区别)

1. 
   
2. const stringify = value => {
   
3.   // 初始化循环引用数组
   
4.   const circular = [];
   
5.   // 编码, 详情请阅下文
   
6.   encode(value, circular);
   
7.   // 将编码后的对象序列化
   
8.   const string = JSON.stringify(value);
   
9.   // 还原编码对象
   
10.   restoreObject(value, circular);
    
11.   // 返回字符串
    
12.   return string;
    
13. };
    

复制代码

注意编码的操作是在原对象上进行的, 得到序列化后的字符串后需要还原
不过还是先来看看编码的部分,
这是一个深度优先遍历, 我们必须能保证能访问到所有子节点
但又不需要访问原型链里的东西(__proto__)

1. 
   
2. for (const key in value) {
   
3.   encode(value[key], circular);
   
4. }
   

复制代码

首先对于JS来说数据类型总共分为两种, 基础类型和引用类型
在内存中基础类型存储的是它的值, 而引用类型存储的是指向值的指针
对于我们来说分别就是布尔值, 数字, 字符串, null, undefined等等和对象,数组
我们写一个简单的方法来判断一个变量的类型是什么
RM中判断得更细, 比如是不是数组, 是不是纯对象等等, 其实只需要分为两大类即可

1. 
   
2. const isPrimitive = o => o !== Object(o);
   

复制代码

当我们序列化基础类型的时候只需要将它的值记录下来就可以成为可识别的JSON的值
而对于引用类型我们如果是第一次遇到, 我们要把他记录到数组里, 并且记录它的类型名
否则就只保留一个它在数组里的索引, 我们不需要再对它的属性进行重复遍历了
我的circular比RM的简洁了一些, 只用了数组索引, 不过原理是一致的

1. 
   
2. const encode = (value, circular) => {
   
3.   if (!isPrimitive(value)) {
   
4.     circular.push(value);
   
5.     value["@constructor"] = value.constructor.name;
   
6.     value["@circularID"] = circular.length - 1;
   
7.     for (const key in value) {
   
8.       if (circular.includes(value[key])) {
   
9.         value[key] = { "@reference": value[key]["@circularID"] };
   
10.       } else {
    
11.         encode(value[key], circular);
    
12.       }
    
13.     }
    
14.   }
    
15. };
    

复制代码

然后我们还需要还原被修改过的对象,
我把RM中的两步合并成一步: 1.去掉标签, 2.还原引用

1. 
   
2. const restoreObject = (value, circular) => {
   
3.   if (!isPrimitive(value)) {
   
4.     delete value["@constructor"];
   
5.     delete value["@circularID"];
   
6.     for (const key in value) {
   
7.       const circularID = value[key]["@reference"];
   
8.       if (circularID !== undefined) {
   
9.         value[key] = circular[circularID];
   
10.       } else {
    
11.         restoreObject(value[key], circular);
    
12.       }
    
13.     }
    
14.   }
    
15. };
    

复制代码

这个时候circular里的引用对象还是精确的, 所以直接替换掉索引即可

2.反序列化
反序列化的步骤其实是类似的

1. 
   
2. const parse = string => {
   
3.   const value = JSON.parse(string);
   
4.   const circular = [];
   
5.   decode(value, circular);
   
6.   return value;
   
7. };
   

复制代码

在解码的时候我们需要还原原型链的信息
首先根据名称我们可以从顶级对象中获取继承的类名
这就有几个需要考虑的问题
1. 通过匿名定义的类没有名字
2. 忘记设置 Class.prototype.constructor = Class 的类没有名字
3. 自定义的类往往因为不想污染全局变量而有自己的命名空间
这几个情况就是导致存档读取后数据错误, 丢失和报错的原因
解决方法有:
1. 使用具名类,或者设置Class.prototype.constructor
2. 修改decode方法, 让decode可以在一个命名空间数组内寻找类
替代原型链的方法可以使用Object.setPrototypeOf
RM还对不支持这个方法的浏览器做了polyfill

1. 
   
2. const decode = (value, circular) => {
   
3.   if (!isPrimitive(value)) {
   
4.     circular[value["@circularID"]] = value;
   
5.     // 下面这一句可以改写来支持独立命名空间的类的访问
   
6.     const constructor = window[value["@constructor"]] || Object;
   
7.     Object.setPrototypeOf(value, constructor.prototype);
   
8.     delete value["@constructor"];
   
9.     delete value["@circularID"];
   
10.     for (const key in value) {
    
11.       const circularID = value[key]["@reference"];
    
12.       if (circularID !== undefined) {
    
13.         value[key] = circular[circularID];
    
14.       } else {
    
15.         decode(value[key], circular);
    
16.       }
    
17.     }
    
18.   }
    
19. };
    

复制代码

注意对于meta数据的清理我也合并为一步完成了

最后附上一段最后的序列化和反序列化的代码,
支持可以通过registerNamespace来添加反序列化时侯对应的命名空间

1. 
   
2. const namespaces = [window];
   
3. 
   
4. const registerNamespace = namespaces.push.bind(namespaces);
   
5. 
   
6. const isPrimitive = o => o !== Object(o);
   
7. 
   
8. const encode = (value, circular) => {
   
9.   if (!isPrimitive(value)) {
   
10.     circular.push(value);
    
11.     value["@constructor"] = value.constructor.name;
    
12.     value["@circularID"] = circular.length - 1;
    
13.     for (const key in value) {
    
14.       if (circular.includes(value[key])) {
    
15.         value[key] = { "@reference": value[key]["@circularID"] };
    
16.       } else {
    
17.         encode(value[key], circular);
    
18.       }
    
19.     }
    
20.   }
    
21. };
    
22. 
    
23. const stringify = value => {
    
24.   const circular = [];
    
25.   encode(value, circular);
    
26.   const string = JSON.stringify(value);
    
27.   restoreObject(value, circular);
    
28.   return string;
    
29. };
    
30. 
    
31. const restoreObject = (value, circular) => {
    
32.   if (!isPrimitive(value)) {
    
33.     delete value["@constructor"];
    
34.     delete value["@circularID"];
    
35.     for (const key in value) {
    
36.       const circularID = value[key]["@reference"];
    
37.       if (circularID !== undefined) {
    
38.         value[key] = circular[circularID];
    
39.       } else {
    
40.         restoreObject(value[key], circular);
    
41.       }
    
42.     }
    
43.   }
    
44. };
    
45. 
    
46. const parse = string => {
    
47.   const value = JSON.parse(string);
    
48.   const circular = [];
    
49.   decode(value, circular);
    
50.   return value;
    
51. };
    
52. 
    
53. const getConstructor = name => {
    
54.   const constructor = namespaces.find(namespace =>
    
55.     namespace.hasOwnProperty(name)
    
56.   )[name];
    
57.   if (constructor) {
    
58.     return constructor;
    
59.   }
    
60.   return Object;
    
61. };
    
62. 
    
63. const decode = (value, circular) => {
    
64.   if (!isPrimitive(value)) {
    
65.     circular[value["@circularID"]] = value;
    
66.     const constructor = getConstructor(value["@constructor"]);
    
67.     Object.setPrototypeOf(value, constructor.prototype);
    
68.     delete value["@constructor"];
    
69.     delete value["@circularID"];
    
70.     for (const key in value) {
    
71.       const circularID = value[key]["@reference"];
    
72.       if (circularID !== undefined) {
    
73.         value[key] = circular[circularID];
    
74.       } else {
    
75.         decode(value[key], circular);
    
76.       }
    
77.     }
    
78.   }
    
79. };
    
80. // 以下是测试
    
81. {
    
82.   const obj = {};
    
83.   obj.self = obj;
    
84.   obj.array = ["a", "b", obj.self];
    
85.   const string = stringify(obj);
    
86.   console.debug(parse(string));
    
87. }
    

复制代码

walf_man

这就有几个需要考虑的问题
1. 通过匿名定义的类没有名字
2. 忘记设置 Class.prototype.constructor = Class 的类没有名字
3. 自定义的类往往因为不想污染全局变量而有自己的命名空间
这几个情况就是导致存档读取后数据错误, 丢失和报错的原因

这可能就是为什么在新增加了插件或者删除了某个插件之后导致之前的存档无法读取或读取之后报错的原因吧。
大佬，这意思是不是说如果写插件能够考虑到这几个方面的话，那么对于新旧版本游戏的存档的继承将不会再出现无法读取或读取错误的问题？