Electron显示磁盘可用空间（5）

在上一集中使用了一个巨大的dataURL，这种方法的可伸缩性不是很好。

Electron提供了许多替代方案。

查找磁盘可用空间

如果你运行df命令，你会得到磁盘的已用空间和总空间。但是格式很疯狂，许多系统都以512字节的块显示数据。

给df传递一个选项，比如-k（千字节）或-m（兆字节）或-h（人类可读），这样可以恢复一点理智。使用其中任何一个，df仍然很难解析，并且依赖于操作系统。

因此，首先我们需要将命令调整为df -kP。然后，我们需要使用正则表达式应用于其输出，以将其拆分为列。

node-df包提供了正则表达式，它对于我们在这里所做的事情来说已经足够好了。不幸的是，该软件包是不安全的，并有一些其他的问题，所以我不想依赖它。

js 复制代码

let child_process = require("child_process")

let runCommand = (command) => {
  return child_process.execSync(command).toString().trim()
}

function df() {
  let output = runCommand("df -kP")
  let rows = output
    .split(/[\r\n]+/)
    .slice(1)
  return rows.map(row => (
    row
      .replace(/\s+(\d+)/g, '\t$1')
      .replace(/\s+//g, '\t/')
      .split(/\t/)
  ))
}

将数据发送到前端

将数据发送到前端的一种相当安全的方法是后端获取任何数据，将其序列化为JSON。然后，在前端进程中执行回调函数。

js 复制代码

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let payload = JSON.stringify(df())
  let win = new BrowserWindow({})
  win.maximize()
  win.loadFile("index.html")

  win.webContents.on('did-finish-load', function () {
    win.webContents.executeJavaScript(`displayFreeDiskSpace(${payload})`);
  });
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

index.html

html 复制代码

<!DOCTYPE html>
<html>
  <body>
    <h1>Free disk space</h1>
    <div id="info"></div>
    <script src="app.js"></script>
  </body>
</html>

显示接收数据

最后是app.js，它以回调的形式获取数据，并将其格式化。

js 复制代码

function displayFreeDiskSpace(data) {
  let info = document.querySelector("#info")
  for (let row of data) {
    let total = parseInt(row[1])
    let used = parseInt(row[2])
    let path = row[5]
    let percent
    if (total !== 0) {
      percent = Math.round(100 * used / total)
    } else {
      percent = 0
    }
    let div = document.createElement("div")
    div.append(`${path}: ${percent}% used (${used}/${total})`)
    info.append(div)
  }
}

结果

这里有两个问题：

第一个问题是，特别是在OSX上，数值虚拟化比较严重，我们得到的数字没有意义了。

第二个问题是，非常无聊的方式来可视化磁盘空间。

忽略第一个，我们将在下一集修复第二个。

代码

index.js

js 复制代码

let child_process = require("child_process")
let { app, BrowserWindow } = require("electron")

let runCommand = (command) => {
  return child_process.execSync(command).toString().trim()
}

function df() {
  let output = runCommand("df -kP")
  let rows = output
    .split(/[\r\n]+/)
    .slice(1)
  return rows.map(row => (
    row
      .replace(/\s+(\d+)/g, '\t$1')
      .replace(/\s+//g, '\t/')
      .split(/\t/)
  ))
}

function createWindow() {
  let payload = JSON.stringify(df())
  let win = new BrowserWindow({})
  win.maximize()
  win.loadFile("index.html")

  win.webContents.on('did-finish-load', function () {
    win.webContents.executeJavaScript(`displayFreeDiskSpace(${payload})`);
  });
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

app.js

js 复制代码

function displayFreeDiskSpace(data) {
  let info = document.querySelector("#info")

  for (let row of data) {
    let total = parseInt(row[1])
    let used = parseInt(row[2])
    let path = row[5]
    let percent
    if (total !== 0) {
      percent = Math.round(100 * used / total)
    } else {
      percent = 0
    }
    let div = document.createElement("div")
    div.append(`${path}: ${percent}% used (${used}/${total})`)
    info.append(div)
  }
}

index.html

html 复制代码

<!DOCTYPE html>
<html>
  <body>
    <h1>Free disk space</h1>
    <div id="info"></div>
    <script src="app.js"></script>
  </body>
</html>

原文：dev.to/taw/electro...