使用Electron进行win桌面端的开发以及使用Electron进行桌面端开发时的热加载方案| 五种I/O模型形象比喻

林戈的IT生涯

于 2024-10-08 13:00:00 发布

阅读量632

点赞数 25

分类专栏：前端及VUE开发文章标签：前端框架 Electron win桌面端开发 Electron热加载方案

本文链接：https://blog.csdn.net/weixin_47792780/article/details/142688609

版权

前端及VUE开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、使用Electron进行win桌面端的开发

想试试桌面端的开发，但又不想去接触C#、WPF之类的语言，了解了一下，Electron是一个可以开发桌面端软件又和web开发有点关系的方案，Electron是由Github开发，基于Chromium和Node.js，使用JavaScript、HTML和CSS等Web技术创建跨平台原生桌面应用的框架。兼容Mac、Window和Linux，它构建的应用可在这三个操作系统上面运行，借助Electron，我们可以使用纯JavaScript来调用丰富的原生APIs。

Electron的开发环境搭建，我这里是Windows10，需要安装的环境包括Python、node、npm、cnpm、Electron。因为之前有python和VUE的开发环境，所以Python、node、npm、cnpm这些都有了，就差安装一个Electron。在windows的命令行下使用cnpm安装Electron即可。electron -v命令执行成功，则electron已正确安装。

#直接使用cnpm安装Electron：
$ cnpm install -g electron
[electron@11.0.3] link C:\Users\l....\Roaming\npm\node_modules\electron\cli.js
$ electron -v
v11.0.3

接下来我们就开始创建一个electron应用。新建一个文件夹first,并在其中创建三个空文件package.json，main.js，index.html。这就是最基本的Electron应用的目录结构。使用vscode打开该文件夹，
然后在终端运行代码： npm init 初始化后，会生成一个package.json文件。我们手动对这个package.json文件进行一下修改，在scripts下添加一行start启动配置，使用electron来启动它。

{
  "name": "electrontest",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

将下面的代码复制到main.js中：

{
  const {app, BrowserWindow} = require('electron')
  let win
  function createWindow () {
    win = new BrowserWindow({width: 800, height: 60})
    win.loadFile('index.html')
    win.webContents.openDevTools()
    win.on('closed', () => {
      win = null
    })
  }
  app.on('ready', createWindow)
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  app.on('activate', () => {
    if (win === null) {
      createWindow()
    }
  })
}

将下面的内容复制到index.html中：

<!DOCTYPE html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <title>Hello World!</title>
	</head>
	<body>
	  <h1>Hello World!</h1>
	  <h2>app from electron</h2>
	</body>
</html>

最后在终端输入： electron . 执行命令即可启动一个windows桌面程序。

二、使用Electron进行桌面端开发时的热加载方案

执行下面的npm命令安装electron-reloader。慢的话使用cnpm吧，安装成功后，package.json内容会自动修改。

#安装electron-reloader
npm install --save-dev electron-reloader

#package.json内容自动修改如下
{
  #package.json会自动增加devDependencies这项
  "devDependencies": {
    "electron": "^9.1.0",
    "electron-reloader": "^1.0.1"
  }
}

需要我们操作的一步就是在main.js（Electron项目入口文件）文件中增加如下代码：

#main.js文件修改
const {app, BrowserWindow } = require('electron')

//热加载 以下为增加部分
try {
	#引入electron-reloader。
  require('electron-reloader')(module,{});
} catch (_) {}
//以上为增加部分

function createWindow () {   
...

修改完成后，使用electron的启动命令npm start重新启动项目。然后当我们修改项目文件，就可以直接在项目窗口看到变化，而不用每次重新启动窗口。

三、搬运一下五种I/O模型的形象比喻的介绍

下文应该是复制的哪里的内容，https://www.cnblogs.com/budongshu/p/5117584.html，如作者有要求，请联系我删除。

IO多路复用是5种I/O模型中的第3种，对各种模型讲个故事，故事情节为：老李去买火车票，三天后买到一张退票。参演人员（老李，黄牛，售票员，快递员），往返车站耗费1小时。描述下区别：

1.阻塞I/O模型
老李去火车站买票，排队三天买到一张退票。
耗费：在车站吃喝拉撒睡 3天，其他事一件没干。

2.非阻塞I/O模型
老李去火车站买票，隔12小时去火车站问有没有退票，三天后买到一张票。
耗费：往返车站6次，路上6小时，其他时间做了好多事。

3.I/O复用模型
select：就是一种实现,进程需要调用的时候,把请求发送给select ,可以发起多个,但是最多只能支持1024个,先天性的限制
poll：没有限制,但是多余1024个性能会下降。

A.select/poll poll的中文意思就是轮询
老李去火车站买票，委托黄牛，然后每隔6小时电话黄牛询问，黄牛三天内买到票，然后老李去火车站交钱领票。
耗费：往返车站2次，路上2小时，黄牛手续费100元，打电话17次

B.epoll
老李去火车站买票，委托黄牛，黄牛买到后即通知老李去领，然后老李去火车站交钱领票。
耗费：往返车站2次，路上2小时，黄牛手续费100元，无需打电话

4.信号驱动I/O模型
老李去火车站买票，给售票员留下电话，有票后，售票员电话通知老李，然后老李去火车站交钱领票。
耗费：往返车站2次，路上2小时，免黄牛费100元，无需打电话

5.异步I/O模型
老李去火车站买票，给售票员留下电话，有票后，售票员电话通知老李并快递送票上门。
耗费：往返车站1次，路上1小时，免黄牛费100元，无需打电话

1同2的区别是：自己轮询
2同3的区别是：委托黄牛
3同4的区别是：电话代替黄牛
4同5的区别是：电话通知是自取还是送票上门

有一篇比较详细的图解I/O的五种模型文章，记一下：https://www.cnblogs.com/budongshu/p/5117584.html

同步阻塞：俩段都是阻塞的,所有数据准备完成后,才响应
同步非阻塞：磁盘从磁盘复制到内核内存中的时候, 不停询问内核数据是否准备完成. 盲等,性能有可能更差 ,看上去他可以做别的事情了, 但是其实他在不停的循环. 但还是有一定的灵活性的
缺点: 无法处理多个I/O,比如用户打开文件,ctrl+C想终止这个操作,是无法停掉的

同步IO:如果第二段是阻塞的 ,代表是同步的
第一种,第二种,io复用,事件驱动,都是同步的.

异步IO:内核后台自己处理 ,把大量时间拿来处理用户请求