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 面板，然后敲回车执行。

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

http://bgrins.github.io/devtools-snippets/

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

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

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

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

匿名自执行函数在JavaScript中是一种常见的模式，也被称为立即执行函数表达式（Immediately Invoked Function Expression，IIFE）。它的基本形式如下：

`(`function`()` {  
`// code here`  
`})``(`);  

匿名自执行函数是一个包裹在圆括号内的函数表达式，后跟另一对圆括号，形成一个立即执行的函数。由于函数是匿名的，因此没有函数名。匿名自执行函数通常被用来创建一个独立的作用域，防止变量泄露到全局作用域中，并且执行其中的代码。

匿名自执行函数的用法多种多样，常见的情况包括：

• 创建私有作用域: 在函数内部声明的变量和函数只能在函数内部访问，不会污染全局命名空间。
• 防止变量污染: 防止函数内部的变量和函数与外部作用域的变量和函数发生冲突。
• 模块模式: 将一组相关的函数和变量组织在一个匿名自执行函数中，形成一个模块，从而实现信息隐藏和封装。
• 立即执行: 函数定义之后紧跟一对括号，立即执行函数内部的代码。

相信本文的这个实际例子，能让大家对 JavaScript 里的匿名自执行函数，有一个直观的理解。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！