SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件

我们在调试 SAP UI5 应用时，有时会遇到想将 Chrome 开发者工具调试器里的某些 JSON 对象，保存到本地的场景。

这样做可能出于多种原因，一种原因是 JSON 对象比较复杂，因此想导出到本地，用更专业的 JSON 查看器进行研究。

还有一种原因是浏览器关闭之后，调试器里看到的数据也就消失了，导出到本地，可以方便自己之后研究，或者把文件发送给其他开发人员。

那么例如本文图 2 和图 3 所示的这个名叫 data 的 JSON 对象，如何导出成本地文件呢？

一种可行但繁琐的办法是，在 Chrome 开发者工具 console 面板里，首先执行 JSON.stringfy(data), 将 data 变量转换成 JSON 字符串，然后本地新建一个 json 文件，手动把 JSON 字符串的内容拷贝进去，然后保存。

本文介绍一种高效的技巧：将图四所示的代码，拷贝到 Chrome 开发者工具 Console 面板，然后敲回车执行。

这段代码的可复制粘贴版本，可以从下面这个网址获得。

这段代码的作用，是给浏览器环境里的原生 console 对象，植入了一个新的 save 方法，该 save 方法接收两个输入参数，分别是待导出的 JSON 对象名和待导出的本地 JSON 文件名。

于是我们在 Console 面板里，输入 console.save(data, "1.json"), 就可以将 data 变量导出成本地 JSON 文件了。

然后就可以用专业的 JSON 查看器，比如 JSON Viewer 来深入研究这个 JSON 对象的组成结构了。

这段代码是一段匿名自执行函数(Immediately Invoked Function Expression，简称 IIFE), 因其具备私有作用域，能够防止变量污染，实现作用域隔离和信息隐藏，因此这种编程在 SAP UI5 框架源代码中使用广泛。