您现在的位置是:首页 >技术交流 >2023新星导师活动【electron+vue3】方向,开营知识点提纲(1)网站首页技术交流
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。
但是它使用起来确实简单,因为它主要就做了两件事:
- 把和系统相关的桌面设计封装成api供调用,常见的例如系统托盘、工具栏、最大最小化、操作注册表等;
- 做了一个叫preload.js的桥梁,把nodejs、前端页面串联起来,操作底层系统的事,交给node,和用户交互的事,交给前端,electron只负责两者之间的通信。
最后,electron提供了一系列配套工具,帮助我们把nodejs+前端打包成exe文件,提供给用户安装。electron的任务就算是完成了。(linux打包成rpm适配部分国产化芯片无问题,deb未尝试,image国产化不支持)
总结
electron做了一个桥梁,把nodejs和vue连接起来,为我们的客户端软件提供的操作系统的能力和交互的能力,
electron又暴露了一些api,把桌面端软件通用的一些能力暴露给nodejs端调用。
electron最后又内置了一些工具,让我们不用再去求助exe4j这类的第三方工具,就能把做好的代码打包成一个完整的安装文件。