2023新星导师活动【electron+vue3】方向，开营知识点提纲（1）

---

前言

本文作为提纲，主要协助有兴趣学习electron与nodejs的同学快速了解其中的基础概念。

读完本文，你可能不会写任何electron进程通讯、托盘、系统级操作的代码，你也可能不会调用任何nodejs提供的api，但是请不要沮丧，因为这并不重要。

慢慢地你会发现，调用api与学习语法这些杂事虽然会在工作中占据很大比重，但是能够有助于你解决问题的关键，往往是你对某项技术的理解，某个场景的解读，某个原理的深入了解。

本文如有不当的地方，请直接指出。如果害怕质疑，那就不适合搞技术，因为明年的我，一定也会觉得现在的自己是个渣渣。

---

一、electron能做什么？

开营提问环节，有同学突然问到一个问题，既然electron也在做后端的一些功能，后端服务器也在做相似的功能，那么electron存在的必要到底是什么？

很多小伙伴在初次接触electron的时候，可能是因为某个项目需求，可能是因为想尝鲜，但是深入之后，难免会有这种疑问，electron究竟有什么必要存在。

我们可以把electron看成一个带着服务器的前后端一体化项目。因为它里面既有node，提供了后端操作底层系统的所有能力，又有一个界面，能够很好地和用户交互。所以它相对于我们接触最频繁的后端服务器而言，最大的优势就是赋予每一个客户端操作底层系统的能力。

以创建文件为例

后端服务器：服务器接收到前端发送的指令后，创建文件，只能创建到远程的服务器上，我们的后端部署在哪个服务器，就拥有那个服务器电脑的底层系统操作能力。 只能操作这一台电脑。

electron：桌面端软件安装到哪个电脑，就拥有那个电脑的底层操作能力。也就是electron提供了操作每个客户端电脑的能力。 可以操控每台客户端电脑。

总而言之，只要是涉及为每个使用我们产品的用户，均提供操作系统的能力，就需要桌面端软件。

二、nodejs是什么？

1.概念理解

可能因为我本科不是科班毕业，所以我平时接触新技术时，虽然会第一时间去了解它是什么？能做什么？和同类产品有什么区别？但是我并不是学院派，不喜欢去死扣概念。

所以我们这里也不会贴官网或者百度的标准答案，标准的并不一定是最适合新人理解的。

以下是我对它的一些理解，如果实在和标准出入太大，请读到的大佬不吝指正：

nodejs严格来说，不能算是一门语言，总有人喜欢把nodejs和java对比，其实是不完全恰当的，它只是js语言的运行环境。

对后端有所了解的同学，如果要拿已知的知识和nodejs对比，那么它应该对标的是java的jdk，或者更细一点，是jre。

对前端有所了解的同学，如果要拿已知的知识和nodejs对比，那么它应该对标的是浏览器。

而javascript才是真正的语言。js运行在浏览器这个容器（环境、软件……怎么好理解怎么定义）里，和运行在nodejs这个容器（环境、软件……怎么好理解怎么定义）里，并没有本质的区别。

所以理论上，只要你曾经在前端项目写过js代码，并把它运行到浏览器里，那么和你在electron项目写js代码，并把它运行到nodejs里，并没有本质区别。

2.横向对比

js里的if和for、java里的if和for、python里的if和for，都是它们各自的语法，有什么本质区别吗？没有！都是做判断和循环。

为什么很多人会觉得js做不了系统级操作，因为是浏览器限制了它的功能，这是处于安全层面考虑的。如果浏览器不做任何限制，那么我们每次浏览网页，都有可能被各种后门js读取c盘数据，你还敢上网吗？

所以很清楚了吧，各个高级语言语法都是大差不差的，它们有什么能力，完全取决于运行它们的环境是node、jdk、python解释器还是浏览器。

看到这里，各位前端er还会觉得node入门有难度吗？语法一致，你要了解的只是node提供的一些api而已，这些api就像浏览器提供的document、windows对象。你当初是如何学习windows.addEventListener的，现在也将同样地去学习nodejs。

不同的是，nodejs提供的api更多，我们用到什么去查即可。但是调用方式，模块化（commonjs）引入方式是和浏览器端js一样的。

实际上，document、windows对象里封装的api也并不是es语法标准，而是浏览器这个容器给提供的特殊api，就像node提供的api一样。我们真正的语言并不应该叫js，而是叫es。只不过由于浏览器对es的实现——js实在是过于流行，所以我们就用js来代指我们前端的脚本语言了。

3.总结对比

语言	环境	脚本运行
js	浏览器	直接运行
js	nodejs	node test.js
java	jdk	先编译javac test.java，生成对应的class文件后java test
python	python解释器	python test.py

各语言的优劣我们不做过多讲解，做对比旨在帮助前端同学理解什么是nodejs，它和js的关系是什么？

三、electron是什么？

我们前面两个章节首先了解到了electron能做什么？大家固有观念是electron基于node，所以我们又了解了nodejs是什么？

那么我们现在就要正式去了解，electron又是什么？它和nodejs是什么关系？

首先说明，electron是什么？标准概念请移步官网。我们这里只谈理解，既然是理解，就有偏颇，不论有多少不够标准的地方，只希望这份理解，依然能帮你心无负担地上手这个框架。

框架！它是一个框架！它是比nodejs更简单的一套东西，它不提供什么运行环境，也不解决底层系统的问题，它仅仅是一个把前端、nodejs串联起来的框架。

当然这并不是说它不优秀，优秀的产品往往都是大道至简。你们单位那个每天忙忙碌碌改bug，工作最忙最繁重的那个人，大概率很难撑过35。

但是它使用起来确实简单，因为它主要就做了两件事：

1. 把和系统相关的桌面设计封装成api供调用，常见的例如系统托盘、工具栏、最大最小化、操作注册表等；
2. 做了一个叫preload.js的桥梁，把nodejs、前端页面串联起来，操作底层系统的事，交给node，和用户交互的事，交给前端，electron只负责两者之间的通信。

最后，electron提供了一系列配套工具，帮助我们把nodejs+前端打包成exe文件，提供给用户安装。electron的任务就算是完成了。（linux打包成rpm适配部分国产化芯片无问题，deb未尝试，image国产化不支持）

---

总结

electron做了一个桥梁，把nodejs和vue连接起来，为我们的客户端软件提供的操作系统的能力和交互的能力，

electron又暴露了一些api，把桌面端软件通用的一些能力暴露给nodejs端调用。

electron最后又内置了一些工具，让我们不用再去求助exe4j这类的第三方工具，就能把做好的代码打包成一个完整的安装文件。