说到前端写Windows应用程序，首先想到的肯定是Electron，这次咱们换一个小众点的工具aardio。aardio是一个很轻量的工具，有着本人的语法，只面向windows利用开发，刚好其中也有反对前端利用打包性能。
选型
aardio中波及到HTML+CSS+JS的性能。有Chrome App、Electron，同时还有Sciter.js、HTMLayout两个UI引擎。
一下子就有四种选项，这里按本人摸索的简略总结一下，可能会不太精确：
Chrome App
默认打包进去的应用程序不携带浏览器，程序会启动调用本地的浏览器渲染(不限于官网的Chrome，Edge以及国产支流Chromium内核的浏览器都行)，如果都没有会主动装置微软的Edge(Chromium版)浏览器。
劣势是生成体积比拟小（但外部环境不稳固，产生的显示Bug可能性也更多），根底大小预计在800KB左右（经UPX压缩过），前端我的项目迁徙起来不必过多批改就能跑起来。如果要指定环境，也能够在启动代码内指定浏览器门路。
Electron
能够构建Electron的利用，Electron自身就是做桌面程序的为什么还须要应用aardio？
看了一下，除了能够利用aardio的一些内置的不便性能函数，同时生成的利用体积也是差别很大，软件自带的示例Electron我的项目生成文件大略在800KB左右（经UPX压缩过），作者可能应用了精简版的内核替换了本来的程序。如果只做Windows平台利用，这样的打包体积还是很吸引人的。
Sciter.js
这次要是面向桌面开发的一个UI渲染引擎，能够利用HTML+CSS写界面，将浏览器许多无用性能剔除，只留下UI引擎罕用的性能，使得体积尽量玲珑。
本来认为能将整个前端我的项目打包进去，但尝试了一下，如同不行。HTML与CSS是独自传入的，没方法像是前端那么自在的援用。应用逻辑更像是一个html界面就配置一个Sciter.js对象，而不是将html程序的所有逻辑放到外面去执行。
生成的利用体积也是比拟小的，大略在2.8MB左右（经UPX压缩过）。看介绍，大部分罕用的CSS反对，同时也有一些非凡的语法不便解决界面。
HTMLayout
HTMLayout是Sciter.js的前身，程序体积更小，但反对的CSS性能也更加无限。同样也不太实用前端我的项目的打包。
比照了一下HTMLayout和Sciter.js生成利用的体积，利用大略在1.5MB左右（经UPX压缩过），两者只差了1.3MB左右，但放弃的新语法可能要很多，所以这个大部分场景能够不用思考了。
尝试一下
官网有推过一个修改版的hostsSwitchHelper，应用的就是Chrome App模式，既然是尝试，那就先选这个模式来试试。
Chrome App模式其实很小白，如果没有与零碎交互的性能，那么简直就是间接将前端我的项目编译，而后导入到开发工具中就能生成一个利用。
先来看看界面：
比拟传统的IDE界面，左上角的Logo点开，而后点击新建工程，能看到新建窗口。
抉择Web界面栏目，而后抉择第一项Chrome App，设置好目录就能创立出一个Chrome App例子了，其中自带曾经能跑起来的代码。
代码量很少，不相熟的能够间接在这个我的项目上做简略批改，就是一个本人的我的项目了。
做一个本人的程序
这是已实现的界面：
前端局部
先从相熟的开始吧，把前端局部先实现。
因为程序不大，于是不应用Vue或者React了，找了个原生丑陋的UI框架LuLu UI，配合TypeScript，打包工具也不要太重的WebPack，咱们选用更加轻量的parcel。
其实一开始是间接用LuLu UI+原生JS，简略的写几个页面，起初对界面细节一直调整（这块重复批改花了不少工夫），以及操作逻辑的优化，总体逻辑绝对简单了起来，于是引入了打包工具，将CSS换成了LESS，JavaScript换成了TypeScript，并且分出了目录构造进去。
打包其实只须要编译实现的前端文件，所以前端工程能够随便放在哪儿都行，最初只须要把编译出的文件放到aardio设置的目录下就能够了。
至于前端就很一般，常见的建设我的项目，补充款式与逻辑，加上parcel自身也很轻量易用，太细节的就不多说了，挑一些次要的说。
敞开翻译提醒
如果不设置，网页默认是英文，关上后Chrome会弹出翻译提醒，这个性能对于本地应用程序无意义。设置的话就是标注网页语言为中文，或是简略粗犷在head标签里加上这句，禁止应用翻译性能。
<meta name="google" content="notranslate" />屏蔽影响应用的快捷键
网页的F12、Ctrl+Shift+i、Ctrl+u等，万一触碰到会影响应用程序体验，用JS代码将这些快捷键禁用。
因为KeyboardEvent.keyCode曾经被废除了，这里间接应用KeyboardEvent.key判断
window.onkeydown = window.onkeyup = window.onkeypress = function (event: KeyboardEvent) { //禁止ctrl+u if (event.ctrlKey && event.key.toLowerCase() == 'u') return false; //禁止ctrl+s if (event.ctrlKey && event.key.toLowerCase() == 's') return false; //禁止ctrl+shift+i if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() == 'i') return false; //禁止 F5 if (event.key == 'F5') return false; //禁止 F12 if (event.key == 'F12') return false; };屏蔽右键
右键的菜单也有无关动货色，影响应用体验，重点还很难看。如果没有右键性能能够间接屏蔽，这里为了不便加上了右键性能，所以重画了右键菜单键，替换了原生的右键。
window.oncontextmenu = function (event: MouseEvent) { event.preventDefault(); show(event); // 外面包含关上本人的菜单层 return false; }; document.addEventListener('click', close); // 敞开右键菜单 close函数里就是将相应的层暗藏show的逻辑很简略，获取以后鼠标地位，而后判断窗口是否会溢出，做相应的高度批改，最初将指定的菜单层显示。
/** * 显示右键菜单 * @param {MouseEvent} event */function show(event: MouseEvent) { if (!isNavItem(event)) return; // 获取以后鼠标地位 let mouseX = event.clientX; let mouseY = event.clientY; // 判断边界值，避免菜单栏溢出可视窗口 const winHeight = document.documentElement.clientHeight ?? document.body.clientHeight; // BUS.contextMenu是存储的前端菜单DOM if (mouseY > winHeight - BUS.contextMenu.offsetHeight) mouseY = winHeight - BUS.contextMenu.offsetHeight - 10; else mouseY = mouseY; BUS.contextMenu.style.left = `${mouseX}px`; BUS.contextMenu.style.top = `${mouseY}px`;}这里减少了一些细节判断，像是编辑器区域不弹出右键，在标签项右键与导航空白区右键显示不同菜单。
调试模式
因为禁用掉开发者工具在调试的时候很麻烦，通过正文代码屏蔽又容易遗记，parcel打包工具同样提供了环境变量。
process.env.NODE_ENV === 'production'网页元素重渲染
因为没有应用古代框架，这部分起始逻辑很重。像是鼠标右键不同中央显示不同菜单的性能实现起来就会很麻烦，要不然代码就很冗余。于是引入了玲珑快捷的前端模板引擎art-template，一部分操作交给引擎判断，通过增加不同的类名展现不同的状态。
比方鼠标右键点击在标签项上，如果以后的项没有增加url参数，则是本地的Hosts，渲染时会增加disabled类名，标识禁用此元素。disabled类的CSS外围是pointer-events: none;，这样即可让此元素不响应鼠标事件，无需再增加多余的js逻辑。
导航栏的以后选中的类名增加、增加新项等操作全副只是在对立的数据中做记录，而后依赖从新渲染一次性替换掉HTML，防止了写简单简短的DOM增删逻辑，也简化了代码耦合。
所以我的项目里独自做了一个数据管理的模块。从本来的简略nav渲染单文件逻辑开始，到起初因为UI逻辑越做越粗疏，这个里也从单文件变成了多文件，尽量把内部操作与纯数据操作隔离。
文本编辑器
如果应用textarea标签能够实现多行文本，但没方法提供正文文字的辨别显示，也没方法提供行号、快捷键、搜寻等扩大性能，所以咱们须要一个文本编辑器。
通过筛选比拟常见的代码编辑器有CodeMirror、aceEditor、monacoEditor（VS Code的前身），三者中CodeMirror体积最小，咱们须要的性能也不要太多，于是就选这个了。
应用办法网上很多，源码中正文也很分明，应用形式就不多提了。
语法色彩
因为咱们的Hosts理论只须要给 #号上色，编辑器有相似的语法，但也会将多余的关键字和构造显示出色彩，这时候咱们能够本人批改一个。
简略的翻阅语法源码能发现在tokenBase和return中的token有对很多信息做匹配，将没有的信息删除，缩小判断逻辑，连带的能够删除几个相干函数代码。之后在底部CodeMirror.defineMIME中有自定义许多关键字，对咱们也没用，都能够删除。而后记得改一个新名字，这样就实现了一个咱们专门的语法，导入插件中就能应用了。
主题款式咱们也能够自定义，同样是找一份看的不错的款式，而后把CSS代码复制过去，其中有许多状态的款式名称，依据相应名称修色彩即可。
这里我开启了高亮选中行，所以在以后行会有一个蓝色底色，因为我在编辑器文本框背景上又加了一个以后项的类型图标，会导致图标被笼罩，这时候只须要将div.CodeMirror-selected的色彩调成半透明模式即可，但因为我背景的透明度调的很低（背景透明度是0.06，而选中的透明度是0.8），所以不认真看的话实际上还是有点像是被覆盖住。
快捷键
自身是做切换标签才主动保留的逻辑，但如果用户批改了文本内容，误以为是实时保留而间接敞开软件，这样就会导致批改失落。所以须要加上一个以后文本批改过的标识，于是又在右上角加了一个保留按钮（一个不难看，顺便又加上了刷新与更新近程文件按钮）。
有了按钮，天然的会习惯用Ctrl+s去保留文件，好在CodeMirror是提供了自定义快捷键的。
extraKeys: { 'Ctrl-S': eventTextareaSave, // 这里是自定义的保留逻辑}网络申请及代理
常见的利用场景是从网络上复制他人整顿好的Hosts信息，所以为了不便减少了从网络获取Hosts性能。但这种个别须要借助代理性能能力获取到，搜寻网上并没见到js能间接设置代理的方法。
这时候就应该将前端不易操作的性能放到aardio中，通过inet.http库能够间接发动网络申请，同时默认也会走零碎代理设置，齐全满足了目前的性能所需。
aardio局部
到这里就进入了咱们不是相熟的局部了。aardio语法很像js，但细节上跟js又有差距，所以写起来的时候很容易弄混，要留神一下。
这里说几个看目前代码须要了解的点：import，是将对应的命名空间导入以后的命名空间，应用的时候能够间接应用。会按内核库、规范库、用户库（应用程序lib目录）查问引入。var，申明变量不肯定都要应用var关键字，如果没应用是默认挂在以后命名空间下的。如果应用了，则作用域是在以后代码块。同时申明变量也只有var关键字，不要棘手把ES6的关键字用上了。global，这是默认的全局空间名字，简写是..在代码中常常看到，比方要操作io库，能够写成..io调用。table，aardio里table是一种类型，相似js里的数组和对象，两种类型同时是table类型。写法上key和value连贯是用=，开端完结是用;，这个与js差别很大，不小心写错会导致报错，复查错觉无时往往容易因为惯性而疏忽。多返回值，程序是反对多返回值的，用,分隔，接管返回也是间接用,分隔写变量即可接管。目录环境，门路如果是~结尾的代表exe利用程序运行的当前目录，如果是在测试环境，则是aardio.exe主程序的目录。
其余不必写大段逻辑的话，根本也能看懂了。
创立chrome程序
main.aardio是程序主入口，在这个文件里写起始逻辑。
import chrome.app; // 导入所需的库var theApp = chrome.app(); // 创立一个实例theApp.start(url); // chrome关上指定的url这样就能启动一个chrome利用了。
js与aardio交互
theApp.external = { key = function(){ // 逻辑 };}在external外面传入相应的逻辑，前端通过aardio组件能够实现调用。
引入前端文件
在左侧新建“虚拟目录”，右侧会呈现设置项，“目录门路”批改成咱们前端的门路，“内嵌资源”要选true，不然无奈生成单文件的应用程序。
最初对着这个虚拟目录单击右键，抉择“同步本地目录”，如果目录内有文件的话会全副显示进去。如果有批改从新生成前端文件的话，也要记得手动同步一次，目录是不会主动刷新的。
编译利用
这样咱们的前端我的项目就能打包成win的应用程序了，按F7就能一键编译，略微等一儿编译好的利用就生成了，是不是很简略？
Electron版尝试
在aardio中Electron做了简化，目前的我的项目能够间接复制到Electron工程的渲染过程中应用，只有启动代码做相应批改即可。但尝试下来，发现UI渲染非常卡顿，不晓得是什么起因。目前性能临时够用，这块等之后有空再理解吧。
结尾
总体应用下来，对于相熟前端以及前端工具链的模式，aardio的界面和文本编辑器很不适应（VS Code上有人做了一个插件，说是能够间接在VS Code编译，配置了仍然报错，而且没有格式化，没有智能提醒，反不如原生IDE不便）。
文档也绝对比较简单，须要有肯定的急躁，很多中央须要本人从右侧的范例中查找例子学习，如果没有例子，则要从左下角的规范库里，看源代码和智能提醒理解具体有什么性能和如何编写代码。
我的项目源码
具体细节有趣味的话请查阅源码： HostsSwitch
https://github.com/Lnncoco/ho...