王森的博客

preload.js 就像插件的 content script 与网页的原生的环境还是隔离的，两个环境的变量互不影响，比如在 preload.js给 window 追加一个函数A，在原生网页中window.A 是 undefined，所以 preload.js 是沙盒环境。实际代码，其中__static就是我们存放静态文件的地方，这个 static 是 electron 源代码根目录下的文件，最终打完包后会放在 dist/electron/ 根目录下。

try_files 的路径解析：在 try_files 指令中，文件路径可以是相对路径（相对于 root 或 alias 指定的路径）或绝对路径（相对于服务器根目录）。当路径以斜杠 / 开头时，被视为绝对路径。否则，会相对于 root 或 alias 的路径进行解析。

MessageChannelMain可以理解为一个独立的协程队列，提供的两个port之间互为对方的管道，port2发送消息的队列会提取出来发给我port2，同理port2的生产的消息也会发给我port1，因此你在创建了MessageChannelMain之后呢就可以开始生产消息了，但是你没port1.start()时，port1.on("message",()=>{})是不会被消费的。

官网有一句话非常重要，它提供一个相当于 Node.js 的API，但使用 Chromium 的代替来执行子进程。这句话的意思是两者还是有点区别的。更应该当成一个 worker.js 来看到。这个工具进程自从 electron:22.0.0 才开始有，老版本是没有的哦！Electron 22.0.0 - 知乎。

这个特别有意思，可以将其理解为通信桥的概念，桥有两个端（port1，port2）只要将port1，port2指定到任意两个进程，无论是iframe-iframe，iframe-worker，parent-child-iframe，worker-worker等，只要搭好，两者就可以实时通信了。这解决了让parent作为中转站这种头大的问题，以下是该技术调研的细节。

在多入口文件打包时，入口文件非常重要，webpack 提供了对 js 的打包，但是 js 最终要挂在一个 html 文件下面，而处理这个 index.html 就是HtmlWebpackPlugin 插件在做的事情。所以对HtmlWebpackPlugin 的深入了解有利于未来多入口打包。

我们从模块化开始，了解了模块化的概念和不同模块化方案（如 AMD、CMD 和 ES6 模块）。然后，我们探讨了前端构建工具 webpack 的基本原理、打包优化和配置技巧。我们还涉及了 babel 的作用和使用方法，以及在 Vue.js 和 Electron 中的配置。此外，我们还讨论了预编译和编译的概念，以及不同语言中的应用。最后，我们深入了解了 Electron-vue 的目录结构、配置文件和多窗口开发。通过适当的配置和调整，我们可以根据项目需求优化目录结构、打包方式和模块化开发，以实现更好的开发体验和

OpenAI 官方给我了一个超简单的文档，还直接用curl的方式搞得，真是能多省就多省，大家可以使用apifox 或者 postman 将curl 转成 fetch 或者 request 等自己能看懂的代码，当然也可以自己自学一下curl的命令，如果你能访问OpenAI,可以点下面的链接，自己看看大家如果对上面的双语翻译感兴趣，我推荐一个技术大佬的免费插件，

在需要接收服务器实时推送的数据时，我们可以使用 `fetch()` 方法和 `EventSource` API 进行处理。使用 `fetch()` 方法并在请求头中添加 `Accept: text/event-stream` 可以告诉服务器我们想要接收 Server-Sent Events (SSE) 格式的数据流。`fetch()` 对流处理有良好的支持，我们可以使用 `body` 属性来读取 SSE 消息，同时也可以利用 `fetch()` 的其他功能如超时控制、请求重试等。缺点是需要手动解析数据、

如果想避免未封闭，或者引号使用错误等等，可以使用强大的 webstorm，但是这个开发工具需要收费，需要破解的可以找我，我有破解安装方式，采用 command + - 进行折叠，不过 webstorm 比较卡，一般机器运行比较慢。如果不想继续覆盖，或者避免以后遗忘，一定要在定位到问题后及时关闭覆写，不然会造成你有朝一日忘记此事，发现无论怎么修改中台的静态页自己的电脑都不变，而又不找原因！这是我吃的亏，切记切记。通过以上删除法，可以很快的定位影响样式的位置所在，定位问题，加以修改，就搞定了。

有时不小心在master或者develop分支上开发了代码，正要提交时才发现自己选错分支了，以前的笨方法是把要提交的代码，一个个记录下来，都保存另外一个文件中去，然后再切换到特性分支中，一个个覆盖到具体的位置，这个非常坑，git stash针对这种没有commit的代码可以做到无污染的保存，非常方便。修改两次代码，分别git stash下，就得到了两个暂存的修改，注意这里的stash@{0} 好像是最新压进去的。执行git stash drop stash@{0} 则会删除暂存stash@{0}

用你已经掌握的语言做各种笔试题，然后用 ChatGPT 翻译成你新学的语言进行比照，重复这个过程，则会以最快的速度掌握新语言，相当于在原有模型的基础上，添加新模型，而不是单开新模型；看技术社区的杠精们在杠啥，他们杠的越厉害，给出的场景就越多，越偏激的人越喜欢杠，也越集中在自己的领域里，不看其他场景，多个杠精，就代表着多个场景。要从目录入手，确定几个课程，部署下他们的代码，正常使用之后，考虑他们结构是否是企业级，综合几套代码中的特色，汇集成一套全面的代码。函数：前后拦截——修饰器（可有可无）

因为涉及的是插件开发，在Background中调用Fetch，此时是没有域名的，而之前无论用Ajax发送请求的时候，也不能直接自己指定Cookie传到服务端，这里应该区分对待前端http.request和后端request请求，前端因为受到平台浏览器的约束，对某些功能是不放开的，尤其是调用浏览器本身自带的对象，是有底层约束的，所以不能自定义敏感Cookie这种事情，自然是解决不了的，这也是之前的知识判断失误

这是一个很小的技巧点，但是网上没有任何人提出来，我给大家一个思路借助webstorm强大的调试功能，再package.json右键debug运行一次就有一个脚本文件被建立 点击进去发现是一个npm脚本文件，以后再有类似的调试自己都可以配置了，还可以增加额外参数点击debug按钮就能自动定位node_modules中的打断点的地方，这简直对于源码分析太好不过了，通过调用栈，传参等各种方式，就能搞清楚代码的来龙去脉 还可以右键拉起，拉起计算框，输入自己想要的语句进行执行探索无止境，拿后端的思维来用在前端上事半功

谷歌开发者工具提供了一系列的功能来帮助开发者高效 Debug 网页应用，让他们可以更快地查找和修复 bug。在谷歌的开发者工具中，有非常多有用的小工具，但是很多开发者并不知道。通过这篇文章，我把我常用的那些高效 Debug 的 Chrome 开发者工具的功能分享给大家。简洁起见，接下来我会使用开发者工具来指代谷歌开发者工具。在我们开始之前，你需要做一些准备工作。如果你想使用谷歌最新的版本和开发者工具，你可以下载，甚至把它设置为开发默认打开的浏览器。金丝雀版本旨在为早期接受者提供最新的更新。

基础课：目前没有发现高级课，可能需要我们自己后续读文档看github源码来获取更多关于插件开发的高级用法北辰课源代码，按课时进行的feature分支，使用git flow管理更方便英语有字幕，看起来不费劲，讲的比上面两个更深一些，建议1-2天抽时间看完。

3，然后在这个组件中执行了mounted函数，但是dialog是懒加载模式，在showDialog默认为false的时候，在初始时dialog根本没有挂载到body下面，因此这时更不存在table被挂载上去，进而导致undefined问题；5，因此我第一想法是增加v-if，来延迟载入该组件，但带来的问题是，SelectGoods会被来回销毁重建，导致不能保持dialog隐藏时的状态。4，因为dialog被封装成了一个组件，而这个组件，在一开始就被执行了，所以该组件会调用mounted函数。

Cookie 有哪些局限性？1、 Cookie 跨站是不能共享的，这样的话如果你要实现多应用（多系统）的单点登录（SSO），使用 Cookie 来做需要的话就很困难了（要用比较复杂的 trick 来实现，有兴趣的话可以看文末参考链接）画外音: 所谓单点登录，是指在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。但如果用 token 来实现 SSO 会非常简单，如下只要在 header 中的 authorize 字段（或其他自定义）加上 token 即可完成所有跨域站点的认证。

其次在实例化代码的时候，sass 不要选择，测试都不要选择，不然会莫名其妙的要下载 Chromedriver1.0.8，且每次装库都要很久，即使用了淘宝镜像，也没太快。vue 的 webpack 热更新总是报 404 错误，在 github 有人说是这里注释掉了，放开就不报错，找不到时就全局搜下。M1 必须是 electron 11 版本才能用，所以 package 要改为 electron 11+，这里选择的是 13。装完之后，因为用了 electron 13，导致需要重新配置一些参数。

因为受到前端click，input这类事件的影响，认为事件是一种表现方式，却不清楚其产生的原因，在后端处理逻辑中，往往会用对象中的一个type字段，或者通过url来表示某件事，如删除事件：/leads/del。因为事件和消息类型是同一个概念。

3. Websocket 为了能在自报家门后，还能让服务端别忘了自己，则在http协议上增加了两个标签，有了这两个标签，第一次通信后，服务端不会立马把这个客户端信息删除，而是保留着，留着下次客户端进来后再沟通，因此一个Websocket通信会有onconnect这个环节，也即http的request/response概念，如果这里你就告诉客户端，你不接受，也即close（一般是鉴权不成功，鉴权和http鉴权一个样，一旦这里disconnected，那么就不存在后续的onmessage了）。

ESlint是一种用于识别和报告在Javascript代码中发现的格式错误的工具，其目标是使代码更加一致并避免错误。它类似于JSlint和JSHint，但还有点区别： ESlint使用Espree进行JavaScript解析； ESlint使用AST来评估代码中的模式； ESlint是完全可插拔的，每一条规则都是一个插件，你可以运行时添加更多； 我一开始认为ESlint和webpack有关系，实则两者是平行关系，ESlint是可执行的命令行，通we...

ES2015 import语句CommonJS require()语句AMD define 和 require 语句css/sass/less 文件中的 @import 语句样式 url() 或 html 文件 中的图片链接。

vue add electron-buildernpm run electron:build注意事项：vue-element-admin auth.js 文件中有getToken时使用的是Cookie，这个类在electron中无法使用，具体请百度，应该直接改为localstorage,或者借助node中的session.defaultSession.cookies来处理，不过这个处理比较恶心，放弃吧！骚男，用localStorage解决npm run electron:serve 时，报d

但凡来面试的，如果说没用过watch，那么这个前端就不用招了，理论上只有两种可能，第一种，从未写过复杂逻辑，第二种，从未封装过组件；而两种情况都不能要；watch 和 computedcomputed解决的是多个变量处理一个问题；watch解决的是单个变量处理多个变量或问题，刚好与computed形成互补形态，如果没有用过watch，那么computed用的也少，更可能的是用函数来取缔computed这种高效处理方式，使得代码写的比较臃肿；watch 最多应用场景就是组件！开发组件目