王森的博客

本文介绍了在Express中集成Sequelize操作Sqlite3数据库的技术实现方案。主要内容包括：1) 通过SequelizeCollector类集中管理数据库连接，实现模型同步和WAL模式开启；2) 采用单例模式封装模型创建过程，优化数据库操作；3) 解决跨平台打包问题，包括CentOS环境配置和macOS路径处理。技术亮点在于通过WAL模式实现读写并发，以及主进程与Express服务的底层通信机制。文中提供了关键代码实现，涵盖模型定义、连接管理和服务层操作，并分享了跨平台打包的实践经验

​因为对 papermark （文档共享开源代码），这个代码所用的第三方库较多，构建起来也比较复杂，部署期间发现 tinybird 这个服务，类似于阿里云日志，这里讲讲它的特点和注意事项。

在多iframe通信过程中，如果iframe层层嵌套的情况下，就如vue的组件一样，出现了父传子的回传地狱问题，Vue引入了Vuex来进行处理，而Vue只是单页面应用，所有的组件共享同一个环境,Vuex实现就有了基础，但是对于不在同一个环境下框架来说，又怎么能实现多iframe的互联互通，就成了一个比较复杂的问题，因此HTML5那群人也是这么想的，又回到了那句话，一切的开发问题，都源自于个人知识的不足，若你从未见过MessageChannel，又如何想起来去用，只会吭哧吭哧地自己在那传来传去。

普通 web 开发时，不会遇到大数据传输问题，因为不牵涉到大文件在多页面之间的通信，但是在开发 electron 产品时，我们会增强 web 页面的能力，同时多页面之间或者多进程之间我们需要数据传递，在早期开发中，我们就遇到这样的坑，用 window.postMessage 来传输大文件，导致内存不断上涨，最终导致内存溢出。既然如此，postMessage 应该如何使用，才是最佳实践呢？因此，我们需要先对window.postMessage做深入的学习和了解

之前讲解 Chrome 一大强势技术 override 时，给的案例貌似没有给大家留下多深的印象其实这个超厉害的，任何一项小技术在 buffer 叠加的基础下才能发挥威力，若单单看到这一项技术，就局限了。

很多同学都不理解Promise的，Promise一度都是前端同学的摆设，基本都是封装一下Ajax请求就完了，其他的也就没用过了，这个面试题是一个启发式面试题，启发前端同学对知识有一种思考，真正理解知识，在理解的基础上，真正用起来。如果你仅仅知道这玩意解决了回调地狱的问题，那就优点太小瞧了Promise重要性，其实它比你想象的更重要，更强大，更不可或缺。

目标：实现一个类似 HTTP 请求的阻塞式调用接口（如 await wsRequest(...)），让开发者无需手动处理 WebSocket 的事件回调，而是通过 Promise 和 async/await 获得同步体验。onmessage：解析收到的消息，提取 requestId 和 data，通过 requestMap 找到对应的 Promise 并完成它。用 Promise 封装请求，监听 onmessage 时根据 requestId 完成对应的 Promise。

兼容性较 Flexbox 更差（IE11 需要前缀）。特点：类似 Flexbox，但更强大，适合复杂布局。7. 使用 line-height（单行文本居中）需要额外调整子元素为 inline-block。特点：手动计算偏移量，适合固定尺寸场景。只适用于单行内容，多行或复杂内容不适用。特点：简单、直观，现代浏览器支持良好。兼容性稍差（IE9 及以下不支持）。兼容性好（支持老浏览器）。特点：利用表格特性，较老式方法。兼容性极佳（支持老旧浏览器）。特点：适合单行文本或简单内容。简单，适合文本居中。

d8.exe 是 V8 引擎编译生成的一个可执行文件，作为调试壳（debug shell）存在，其作用总结如下：运行 JavaScript：提供一个独立的 JavaScript 执行环境，可直接运行代码或脚本文件。调试工具：用于分析 V8 的字节码、优化过程、内存布局等，帮助开发者调试和研究。研究 V8：适合探索 V8 的编译、执行和垃圾回收机制。轻量实验：无标准库和 DOM，专注于 V8 核心功能，适合教育和底层实验。

自从2022年底chatgpt上线后，sse就进入了大众的视野，之前是谁知道这玩意是什么？但是打字机的效果看起来是真的很不错，一度吸引了很多人的趋之若鹜，当然了这个东西的确挺好用，而且实现很简单，之前我用python的demo讲了一下SSE的概念，看起来有很多人看，但是并没有说明白这个原理，这次再彻底把这个原理给说明白，而且我发现通过node.js 的Express框架来说明这个概念更加简洁，所以今天就用Express框架来说明SSE概念，这样对前端同学更加友好。

在实际开发中发现，通过预测认为 Express 编写的异步框架是基于协程的调度，因为脑补中的协程调度的颗粒度精确到一次请求，也即一次性请求处理完毕后，协程才会切换到另外一个请求，这种想法是幼稚的，原因就是没有彻底理解基于协程编程的概念。转换思维之后，也即任何一个地方都可以创建一个 Promise，然后使用协程调度逻辑，那么就意味着在整个 web 开发过程中，无论是请求的处理，还是数据库的处理，还是其他各种逻辑的处理，都可以做成异步的，并用 Promise 进行封装，然后等待执行结果的返回。在上述这种

一直都想写关于Promise的东西，Promise解决的问题特别多，而普通前端就把这东西结合ajax来做一个,如果仅仅作为这样一种东西使用那就太可惜了。

这个东西可能是我十几年前最开始接触的东西，第一次web开始，就是要做登录注册的功能，当时就涉及到cookie和session，用的还是Java，Java 来做Web本身就够晦涩难懂的了，跟更古老的C做Web开发差不了多少（已C语言的方式做了一个Html的字符串输出的模板引擎），即使现在有了SB好了很多， 但也高度封装了底层代码，甚至好多现在Java开发连servlet是啥东西都不知道了。这篇文章是写给新人的，当然很多老开发者看似懂了，其实也只不过是唯手熟尔，对于底层到底发生了什么，自己能否手敲实现相关的

大前端的学习，结合自己多年开发学习的经验，发现前端都具有几个特征，而这几个特征，很多人只能用具体的表象来描述，比如用安卓方式来说明，用IOS的方式来说明，或者QT的方式来说明等等。我用比较简单的语言概括就是：前端应该就是学习配置，外加用指定的语言来实现具体的行为。实现具体的行为这个事情，在AI时代，已经不算一件难事，目前ChatGPT-4o已经能够通读代码上下文，给出合理的逻辑代码，只要你表达准确，一行代码都不需要写，目前我们的团队，正在改变着开发习惯，而所有程序员的改变，也估计就在这两年了。

我们有一个域名https://example.com，但是ssl证书很贵，搞子域名来承接新站点有点费钱，所以我们想用一个目录https://example.com/admin/ 来作为管理后台的站点，这个站点是单页面应用，我又想让其用history router的方式作为路由结构，不然看着一堆#怪怪的。访问 https://example.com/admin/ 就可以访问到你想要的静态站点了，非常nice，看似简单，实则一点也不容易，哈哈！

1，关键点一：/scrm/xxa/xxb 无论建立多少级，oss桶都是自动建立的，无需人手动先把这些目录建立了,例如上面的path对应oss的目录/scrm/xxa/xxb下面，./dist/static下的文件也会被上传到这个目录下，这个目录却不需要先行建立。webpack中引入一个oss上传插件，并且给予其初始参数，插件根据publicPath提供的域名后的path，将打包的文件一个个按照上传到path对应的目录中，并且根据from的路径指示，将./dist/static下的所有文件都按路径上传。

实际使用FJ生成指纹ID时发现在同一浏览器多开下，不知道谷歌浏览器多开的，就不要往下看了，没啥意义，就会生成不同的UUID，这和我们的预期不太一样，我们就是为了针对某一个设备而进行的限制，估计没有做多开的连这个问题都没有发现。FJ的组件颗粒度太细，比如谷歌插件的多少也算在里面，多开环境下，每个浏览器安装的插件也可能各不相同，FJ也意识到这个问题，所以允许用户排除一些组件，来降低uuid的唯一性变化。每个人都应该自行探索以下，所以这里并不给出完整版代码，只给出最核心的逻辑，其余大家自行尝试。

在探索Electron asar 解压过程过程中，接触到了obfuscator混淆压缩技术，这也是一项老技术了额，也是较为简单的混淆加密方式，在没有使用webpack打包的情况下，用这个更简单方便，总还是有些人望而生畏的。后来在github找到了不过跟作者沟通后，发现这个在线工具也是使用的同样的代码，所以这里还是回过头来解读下作者的源码是怎么运行的，以及还有哪些坑需要填，填坑我最爱！

ChatGPT-4o 开始向着实用方向上发展了，利用4o的记忆能力，可以记住大量的信息，不用重复输入，这样就可以将整个代码库都丢给4o分析，这样我们就具备了一个超牛逼的助手，我们只需要去思考问题点可能发生的地方，其他都交给4o去处理就行了，下一个4.5估计就不用我出手了，直接自己撸代码了

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了）。