JavaScript 的强语言之路—另类的 JSON 序列化与反序列化

2020 年 01 月 17 日 更新 此篇文章代码 Demo：https://github.com/stelalae/node_demo ，yarn start:debug看控制台输出效果。

序列化与反序列化

互联网的产生带来了机器间通讯的需求，而互联通讯的双方需要采用约定的协议，序列化和反序列化属于通讯协议的一部分。通讯协议往往采用分层模型，不同模型每层的功能定义以及颗粒度不同，例如：TCP/IP 协议是一个四层协议，而 OSI 模型却是七层协议模型。在 OSI 七层协议模型中展现层（Presentation Layer）的主要功能是把应用层的对象转换成一段连续的二进制串，或者反过来，把二进制串转换成应用层的对象 – 这两个功能就是序列化和反序列化。一般而言，TCP/IP 协议的应用层对应与 OSI 七层协议模型的应用层，展示层和会话层，所以序列化协议属于 TCP/IP 协议应用层的一部分。本文对序列化协议的讲解主要基于 OSI 七层协议模型。

• 序列化： 将数据结构或对象转换成二进制串的过程。

• 反序列化：将在序列化过程中所生成的二进制串转换成数据结构或者对象的过程。

• 早期协议：COM、CORBA。

• XML&SOAP：XML（可扩展标记语言，Extensible Markup Language）本质上是一种描述语言，具有自我描述的属性。SOAP（Simple Object Access protocol） 是基于 XML 为序列化和反序列化协议的结构化消息传递协议，在前期互联网阶段被广泛应用，对应的解决方案叫做 Web Service。

• JSON：源于 JavaScript，赶上移动浪潮发展，现正在广泛使用在各种业务场景中。

• Thrift：是 Facebook 开源的轻量级 RPC 服务框架，在大数据量、分布式、跨语言、跨平台的服务端使用较多。

• Protobuf：来自 Google，因改善了 XML、JSON 的诟病，空间开销小、高解析性能、语言支持度高等亮点，许多公司将其作为后端之间通信、对象持久化等方面的首选方案。在终端上，IM 业务上也使用较多。

• Avro：属于 Apache Hadoop 的子项目，提供两种序列化格式：JSON、Binary，即调试时用 JSON，上线后用 Binary。（个人觉得就是对 JSON 在传输时的改良版）

JSON 的 parse 与 stringify

• JSON.stringify(value[, replacer [, space]])：用来将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串，如果指定了 replacer 是一个函数，则可以选择性地替换值，或者如果指定了 replacer 是一个数组，则可选择性地仅包含数组指定的属性。

• JSON.parse(text[, reviver])：用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

转换值如果有 toJSON()方法，该方法定义什么值将被序列化。非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如 JSON.stringify(function(){}) or JSON.stringify(undefined).对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。Date 日期调用了 toJSON()将其转换为了 string 字符串（同 Date.toISOString()），因此会被当做字符串处理。NaN 和 Infinity 格式的数值及 null 都会被当做 null。其他类型的对象，包括 Map/Set/weakMap/weakSet，仅会序列化可枚举的属性。

const body = JSON.stringify(params, (k, v) => {
    if (v !== null && v !== undefined) {
      return v;
    }
});

import axios from 'axios';
import { ResponseData } from '../defines';

// axios.defaults.timeout = 10000;

const parseJSON = (response: any) => {
  // 先对Object进行序列化，再有条件的反序列化
  const dataString = JSON.stringify(response);
  const dataObj = JSON.parse(dataString, (k: any, v: any) => {
    if (v === null) {
      return undefined;
    }
    return v;
  });
  return dataObj;
};

const parseResponse = (response: any) => {
  if (response.status >= 200 && response.status < 300) {
    return response.data;
  }
  return {};
};

export const request = async (options: any): Promise<ResponseData> => {
  try {
    const resp = await axios(options);
    const data = await parseResponse(resp);
    return parseJSON(data);
  } catch (err) {
    return Promise.resolve({
      code: 999,
      msg: '网络超时',
    });
  }
};

完善解构赋值

// types.ts
export class OrderBase {
  creatTime: string;
  payTime: string;
  // 其他省略
}

export class OrderDetail {
  orderNo: string;
  userNo: string;
  businessCode: string;
  imgList: string[];
  base: OrderBase;
}

// order.ts
function test() {
  const orderinfo: OrderDetail = JSON.parse('{}');
  const { imgList, base } = orderinfo;

  let imgurl = [];
  if (imgList && imgList.length > 0) {
    imgurl = imgList.map(item => (item += '?xxx'));
  }
  const { payTime } = base || {};

  let showpay = false;
  if (payTime && payTime.length > 0) {
    showpay = true;
  }
}
test();

function test() {
  const orderinfo: OrderDetail = JSON.parse('{}');
  const { imgList = [], base: { payTime = '' } = {} } = orderinfo;
  const imgurl = imgList.map(item => (item += '?xxx'));
  const showpay = payTime !== '';
}
test();

重构解构赋值

export class OrderBase {
  creatTime: string = '';
  payTime: string = '';
}

export class OrderDetail {
  orderNo: string = '';
  userNo = '';  // 根据默认值推导出userNo的类型为string
  imgList: string[] = [];
  base: OrderBase;
}

function test() {
  const orderinfo: OrderDetail = JSON.parse('{}');
  const { base: { payTime = '123' } = {}, userNo } = orderinfo;
  console.log(payTime, userNo); // 打印：123 undefined
}
test();

// tsconfig.json中"target": "es2017"时的效果
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function test() {
    const orderinfo = JSON.parse('{}');
    const { base: { payTime = '123' } = {}, userNo } = orderinfo;
    console.log(payTime, userNo);
}
test();


// tsconfig.json中"target": "es5"时的效果
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function test() {
    var orderinfo = JSON.parse('{}');
    var _a = orderinfo.base, _b = (_a === void 0 ? {} : _a).payTime, payTime = _b === void 0 ? '123' : _b, userNo = orderinfo.userNo;
    console.log(payTime, userNo);
}
test();

1. class 当做类型去声明变量时，用法和 interface 一样效果，编译后对应代码会被注解。

2. 添加了类型声明的变量，数据类型并未发生变化，而不是变成类的一个实例。

属性回填

const a = new OrderDetail();
console.log(a.userNo); // 打印：''
a.userNo = 'abc';
console.log(a.userNo); // 打印：'abc'

太阔怕了！

Object.assign

const obj = {
  userNo: 'a1',
  base: { creatTime: '2020-01-13 18:32:58' },
};
const a = Object.assign(new OrderDetail(), obj);
console.log(a.userNo); // 打印：'a1'
a.userNo = 'abc';
console.log(a.userNo); // 打印：'abc'
console.log(a.base.creatTime); // 打印：'2020-01-13 18:32:58'
console.log(a.base.payTime); // 打印：undefined

immutable record

A record is similar to a JS object, but enforces a specific set of allowed string keys, and has default values.

const { Record } = require('immutable')
const ABRecord = Record({ a: 1, b: 2 })
const myRecord = ABRecord({ b: 3,  x: 10 })     // ts中此处会提示错误

myRecord.size // 2
myRecord.get('a') // 1
myRecord.get('b') // 3
const myRecordWithoutB = myRecord.remove('b')   // remove后，b会被重置为2，而不是undefined
myRecordWithoutB.get('b') // 2
myRecordWithoutB.size // 2
myRecord.get('x') // undefined

// 方式一：有类型声明
type PersonProps = {name: string, age: number};
const defaultValues: PersonProps = {name: 'Aristotle', age: 2400};
const PersonRecord = Record(defaultValues);
class Person extends PersonRecord<PersonProps> {
  getName(): string {
    return this.get('name')
  }

  setName(name: string): this {
    return this.set('name', name);
  }
}

// 方式二：无类型声明
class ABRecord extends Record({ a: 1, b: 2 }) {
  getAB() {
    return this.a + this.b;
  }
}

var myRecord = new ABRecord({b: 3})
myRecord.getAB() // 4

• Runtime immutability：运行时不可变性，这符合 immutable 的一贯原则，数据的只读性。

• Value equality：值相等，即 Record 提供 equals 来判断两个对象是否严格相等。

• API methods：额外的 API 方法，如 getIn、equals、hashCode、toJS-深层、toObject-浅层、toJSON-浅层等。

• Default values：默认值。为每个键提供默认值，即时被 remove 之后。

• Serialization：序列化。即提供 toJS-深层、toObject-浅层、toJSON-浅层，和 JSON 对象之间的序列化和反序列化。

数据对象的类实例化

export enum SexType {
  none = 0,
  man = 1,
  woman = 2,
}

export class UserProfile {
  userNo: string = '';
  userName: string = '';
  sex: SexType = 0;

  static sexMap = {
    [SexType.none]: '保密',
    [SexType.man]: '男',
    [SexType.woman]: '女',
  };

  public get sexT(): string {
    return UserProfile.sexMap[this.sex] || '保密';
  }

  // 其他自定义函数
}

const myinfo = Object.assign(new UserProfile(), {
  userNo: '1',
  userName: 'test',
  sex: 1,
});

console.log(myinfo.sex, myinfo.sexT); // 打印：1   '男'
myinfo.userName = '1'; // ok - userName是可修改的

// index.ts - 声明文件
import { Record } from 'immutable';

export enum SexType {
  none = 0,
  man = 1,
  woman = 2,
}

interface IRecordInfo {
  createTime: string;
  updateTime?: string;
}

const IRecordInfoDefault: IRecordInfo = {
  createTime: '',
  updateTime: '',
};

export class RecordInfo extends Record(IRecordInfoDefault) {} // 建议使用class，即时没有扩展属性
// export const RecordInfo = Record(IRecordInfoDefault); // 不建议变量方式，否则不能把 RecordInfo 当做类型去声明变量

interface IUserProfile extends IRecordInfo {
  userNo: string;
  userName: string;
  sex: SexType;
}

const UserProfileDefault: IUserProfile = {
  userNo: '',
  userName: '',
  sex: SexType.none,
  ...IRecordInfoDefault,
};

export class UserProfile extends Record(UserProfileDefault) {
  sexMap = {
    [SexType.none]: '保密',
    [SexType.man]: '男',
    [SexType.woman]: '女',
  };

  public get sexT(): string {
    return this.sexMap[this.sex] || '保密';
  }

  // 其他自定义函数
}

export interface ITsTest {
  id: string;
}

const ITsTestDefault: ITsTest = {
  id: '',
};

export const TsTest = Record(ITsTestDefault);

const myinfo = new UserProfile({ userNo: '1', userName: 'test', sex: 1 });
console.log(myinfo.sex, myinfo.sexT); // 打印：1   '男'

myinfo.userName = '1'; // error - userName是只读的，不可修改
const myinfonew = myinfo.set('userName', '1'); // ok - 返回新的 immutable 对象

• 不影响声明类型，可读性强。

• 从源头严格控制数据模型，防止无关数据。

• 从 JSON 对象到 Class 对象，降低设计上的耦合度。

// index.ts - 业务文件
import React from 'react';

import { RecordInfo, UserProfile, TsTest } from '../types';

interface DivBaseProps {
  data: RecordInfo;
}

const DivBase = (props: DivBaseProps) => {
  const { data } = props;
  console.log(data, data.hashCode()); // 如前面声明类型时，建议用class方式
  return (
    <div>
      <p>{data.createTime}</p>
      <p>{data.updateTime}</p>
    </div>
  );
};

interface HomeState {
  detail: UserProfile;
  extra: RecordInfo;
}

export default class Home extends React.PureComponent<any, HomeState> {
  constructor(props: any) {
    super(props);
    this.state = {
      detail: new UserProfile(), // ok
      extra: new RecordInfo(), // ok
      // detail: new RecordInfo(), // error - 缺失数据
      // extra: new UserProfile(), // ok - 因 UserProfile 从 RecordInfo继承而来
      // extra: new TsTest(), // error - 缺失数据
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ detail: new UserProfile({ sex: 1 }) });
    }, 1000);
  }

  render() {
    const { detail } = this.state;
    return <DivBase data={new RecordInfo(detail)}></DivBase>; // ok
    // return <DivBase data={{ ...detail }}></DivBase>; // error
  }
}

总结