<div class="markdown-text"><p>CNode TG Channel 开启 !</p>
<p>Channel 将定期推送最新技术文章、资讯以及活动，欢迎订阅！</p>
<p><a href="https://t.me/cnode_js">https://t.me/cnode_js</a></p>
<p><img src="//static.cnodejs.org/FkwbDvoUIeRAccpPd6f53rgXwrDz" alt="qrcode_tg_channel_cnode.png"></p>
<blockquote>
<p>Tips: 订阅后点击 “设置- View Discussion” 即可加入交流群!</p>
</blockquote>
</div>

CNode - TG 频道

<div class="markdown-text"><h2>概述</h2>
<p>Node.js 刚刚发布了 18.0.0 版本，内置了 <code>fetch</code>、<code>node:test</code> 等标准模块。</p>
<p><strong>一句话点评：std lib 在标准化，user lib 在精细化。</strong></p>
<blockquote>
<p>原文地址：<a href="https://zhuanlan.zhihu.com/p/502951532">EggJS 知乎专栏</a>，求点赞。</p>
</blockquote>
<hr>
<h2>如何快速体验</h2>
<p>推荐用 <a href="https://github.com/Schniz/fnm">fnm</a>，<a href="https://github.com/jasongin/nvs">nvs</a>，<a href="https://github.com/nvm-sh/nvm">nvm</a> 等 Node.js 版本管理器。</p>
<pre class="prettyprint language-bash"><code>$ fnm install 18
Installing Node v18.0.0 (arm64)

$ fnm use 18
Using Node v18.0.0

$ node -v
v18.0.0
</code></pre><p>需要注意的是，该版本不是 LTS 版本，请勿在生产环境使用，需要等到 2022-10-25 才会成为 LTS 版本。</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/012135a1091b40ef807c8b6e3919bcce~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png" title="https://github.com/nodejs/Release"></p>
<h2>Looking to the future</h2>
<blockquote>
<p>The project is also continuing its ‘Next 10’ effort.  The goal of this effort is to reflect on what led to success in the first 10 years of Node.js and set the direction for success in the next 10.</p>
</blockquote>
<p>Node.js 官方启动了 <a href="https://github.com/nodejs/next-10">next-10</a> 工作，并讨论出了<a href="https://github.com/nodejs/node/blob/master/doc/contributing/technical-priorities.md">未来重要的几件事</a>：</p>
<ul>
<li>现代化的 HTTP</li>
<li>友好的类型支持</li>
<li>对初学者更友好的渐进式文档</li>
<li>对 ECMAScript 规范的支持和及时跟进</li>
<li>可观测性，包括 logging/metrics/tracing，以及 APM 等</li>
<li>更好的多线程支持</li>
<li>支持打包为单文件的分发方式</li>
</ul>
<p>譬如前面说的 Fetch 就和 Modern HTTP 的会议讨论有关，<a href="https://github.com/nodejs/next-10/blob/main/meetings/summit-jan-2022.md">相关纪要</a>。</p>
<blockquote>
<p>6 月份的 OpenJS World 会议中将分享 ESM 和 Observability 进展，可以关注下相关动态。</p>
</blockquote>
<hr>
<h2>Fetch API</h2>
<p>前端同学应该都很熟悉<code>fetch()</code>这个 API，它提供了标准的网络请求能力，取代了远古的  XMLHttpRequest 。</p>
<p>反观 Node.js 侧，官方提供的 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/http.html#httprequesturl-options-callback">http.request()</a>，太底层太基础了，用起来往往需要大量的封装。譬如 302 后自动跳转、文件上传、响应结果解析等等。</p>
<p>因此在 Node.js 社区有非常多的上层请求库封装：</p>
<ul>
<li>曾经广受社区欢迎的 request 库去年<a href="https://github.com/request/request/issues/3142">宣布停止维护</a>后，也引起了社区比较大的混乱。。</li>
<li>我们 Egg 内置的是 <a href="https://www.npmjs.com/package/urllib">urllib</a>，沉淀了阿里多年在网络请求上踩的坑，足够稳定，不过代码也有点久远了。</li>
<li>更多参见 <a href="https://github.com/request/request/issues/3143">Alternative libraries to request</a> 以及 <a href="https://zhuanlan.zhihu.com/p/415361629">《天猪：那些你应该说再见的 npm 祖传老库》</a>。</li>
</ul>
<p><strong>去年 Node.js 官方推出了 <strong><a href="https://undici.nodejs.org/"><strong>undici</strong></a></strong>，一个非常现代化的库，具备优越的性能，良好的扩展性，内置的 mock 等能力，集大成者。</strong></p>
<blockquote>
<p>undici 的命名也很有趣：A HTTP/1.1 client → 11 → Eleven → Undici，即意大利语的 11。</p>
</blockquote>
<p>从而 <strong>Node.js 终于内置了新的请求库</strong>，它遵循 <a href="https://fetch.spec.whatwg.org/">Fetch 规范</a>，底层就是基于 undici 来实现的。</p>
<pre class="prettyprint language-javascript"><code>const res = await fetch(&#x27;https:&#x2F;&#x2F;nodejs.org&#x2F;api&#x2F;documentation.json&#x27;);
if (res.ok) {
  const data = await res.json();
  console.log(data);
}
</code></pre><p>就这么简单，比 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/http.html#httprequesturl-options-callback">http.request()</a> 那一坨 callback-style 代码简洁多了，平时写个脚本啥的，不用再引入额外的类库了。</p>
<p>全局增加了 fetch, FormData, Headers, Request, Response 这几个 API，以及 Web Streams API。</p>
<p>目前还处于默认开启的实验性特性阶段，文档在 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/globals.html#fetch">Globals</a> 章节，近乎没有，有需要直接看 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">MDN 文档</a> 即可。</p>
<p>可能是为了遵循规范， undici 的很多能力如 Mock，Proxy，Pool 等都没有提供出来。</p>
<hr>
<h2>Test Runner</h2>
<p>单元测试很重要，很多新兴的编程语言都是会内置对应的能力，但前端这块一直都是由社区来实现，前端同学耳熟能详的 Test Runner 有 <a href="https://mochajs.org/">Mocha</a>、<a href="https://jestjs.io/">Jest</a>。</p>
<pre class="prettyprint language-javascript"><code>&#x2F;&#x2F; mocha showcase
import assert from &#x27;assert&#x2F;strict&#x27;;

describe(&#x27;test&#x2F;index.test.js&#x27;, () =&gt; {
  it(&#x27;test1&#x27;, async () =&gt; {
    const res = await fetch(&#x27;https:&#x2F;&#x2F;nodejs.org&#x2F;api&#x2F;documentation.json&#x27;);
    assert(res.ok);
  });
  
  it.skip(&#x27;skip some test&#x27;, () =&gt; {});
});
</code></pre><p>终于，Node.js 在 18.x 里官方支持了 <a href="https://nodejs.org/dist/latest-v18.x/docs/api/test.html">Test 能力</a>：</p>
<pre class="prettyprint language-javascript"><code>import test from &#x27;node:test&#x27;;
import assert from &#x27;assert&#x2F;strict&#x27;;

&#x2F;&#x2F; 等价于 describe()
test(&#x27;asynchronous passing test&#x27;, async () =&gt; {
  const res = await fetch(&#x27;https:&#x2F;&#x2F;nodejs.org&#x2F;api&#x2F;documentation.json&#x27;);
  assert(res.ok);
});

test(&#x27;multi level test&#x27;, async (t) =&gt; {
  &#x2F;&#x2F; 等价于 it()
  await t.test(&#x27;subtest 1&#x27;, (t) =&gt; {
    assert.strictEqual(1, 1);
  });

  await t.test(&#x27;subtest 2&#x27;, (t) =&gt; {
    assert.strictEqual(2, 2);
  });
});

&#x2F;&#x2F; 等价于 describe.skip() &#x2F; it.skip()
test(&#x27;skip option&#x27;, { skip: true }, () =&gt; {});

&#x2F;&#x2F; 等价于 describe.only() &#x2F; it.only()
test(&#x27;only option&#x27;, { only: true }, () =&gt; {});
</code></pre><p>可以看到：</p>
<ul>
<li>语法其实差不多，会更简洁一点，就一个 <code>test()</code>，options 除了 skip 和 only 外，还支持 concurrency 并发。</li>
<li>无需启动器，每一个文件都是一个可执行的 Node.js 代码。</li>
<li>暂未支持 <code>before/after/beforeEach/afterEach</code> 能力，看 issue 描述会后续支持。</li>
<li>暂未支持 Reporter，但日志输出为标准 <a href="https://testanything.org/">TAP</a> 格式，所以应该很容易能复用现有的社区生态。</li>
</ul>
<p>类似覆盖率的演进过程，以前我们需要通过 nyc 对代码转译打桩，现在变为的 Node.js 内置覆盖率输出，nyc 变为 c8 这样的覆盖率报告生成工具。</p>
<p>后续 mocha 等估计会变为类似的上层封装，提供批量执行 和 Reporter 等能力。</p>
<hr>
<h2>Build-time user-land snapshot</h2>
<p>简单的说，可以把某个 js 直接编译成 v8 snapshot，从而可以极大的提速启动时间。</p>
<p>目前这个版本，还只能通过 Node.js 源码来编译，且只能编译成 Node.js Runtime 的方式，即 Build-time。</p>
<pre class="prettyprint language-bash"><code># 把一段 markdown 渲染的逻辑，直接打包到 Node Runtime
$ cd &#x2F;path&#x2F;to&#x2F;node&#x2F;source
$ .&#x2F;configure --node-snapshot-main=marked.js
$ make node

# 执行编译好的 Node Runtime
$ out&#x2F;Release&#x2F;node
&gt; const html = globalThis.marked(&#x27;# this is title&#x27;);
</code></pre><p>秋怡正在继续推进<a href="https://github.com/nodejs/node/issues/35711">该能力</a>，未来可以无需编译 Node.js 源码：</p>
<pre class="prettyprint language-bash"><code>$ node --build-snapshot --snapshot-blob marked.blob marked.js 
$ node --snapshot-blob marked.blob
</code></pre><p>PS：这个能力用在命令行 CLI 的独立打包好像也不错。<a href="https://github.com/nodejs/node/issues/42566">https://github.com/nodejs/node/issues/42566</a></p>
<hr>
<h2>V8 引擎升级</h2>
<p>内置的 V8 引擎升级到 10.1 版本，值得注意的特性：</p>
<ul>
<li>class fields 和 private class methods 的性能优化。</li>
<li><a href="https://v8.dev/blog/v8-release-99#intl.locale-extensions">Intl 规范</a> 的支持，在做日期的本地化，字符串处理的时候非常有用。</li>
<li>数组支持 findLast() 和 findLastIndex() 等。</li>
</ul>
<p>秋怡也写了一篇文章 <a href="https://v8.dev/blog/faster-class-features">Faster initialization of instances with new class features</a> 分享了背后的实现。</p>
<p>PS：<a href="https://mp.weixin.qq.com/s/6PTcjJQTED3WpJH8ToXInw">ECMAScript 双月报告：装饰器提案进入 Stage 3</a> ，阿里的 Node 架构团队今年会推动 Decorator 方案在 V8 的落地实现，不过肯定赶不上了，只能 Node.js 20.x 见了。</p>
<hr>
<h2>ESM 的支持</h2>
<p>虽然在 18.x 中没有新的内容，但在过去的几个月中一直在持续推动 ECMAScript模块实现：</p>
<ul>
<li>对 <a href="https://github.com/tc39/proposal-import-assertions">JSON Import Assertions</a> 的支持。</li>
<li>JSON 模块的正式支持。</li>
<li>对 HTTPS 和 HTTP 导入的实验性支持。</li>
<li><a href="https://github.com/nodejs/loaders">Node.js 加载器团队</a>也在继续开发 ECMAScript 模块加载器实现。</li>
</ul>
<hr>
<h2>工具链和编译器的升级</h2>
<ul>
<li>Linux 版是在 RHEL8 上构建的，要求 glibc 2.28 以上版本。</li>
<li>macOS 要求 10.15 以上版本。</li>
<li>Windows 很多旧版本也不支持了。</li>
</ul>
<p>PS：CentOS 7 官方不再维护了，它对应的 glibc 版本太低，所以升不了。。。</p>
<ul>
<li><a href="https://developer.aliyun.com/article/780803">centos7和8不维护停止更新之后，服务器选择使用什么系统好？</a></li>
<li><a href="https://github.com/nodejs/node/pull/42659">doc: update minimum glibc requirements for Linux by richardlau</a></li>
</ul>
<hr>
<h2>相关资料</h2>
<ul>
<li><a href="https://nodejs.org/en/blog/announcements/v18-release-announce">https://nodejs.org/en/blog/announcements/v18-release-announce</a></li>
<li><a href="https://nodejs.org/en/blog/release/v18.0.0/">https://nodejs.org/en/blog/release/v18.0.0/</a></li>
</ul>
</div>

Node.js 18 新特性解读

<div class="markdown-text"><p><a href="https://registry.npmmirror.com">https://registry.npmmirror.com</a> 中国 npm 镜像源在2013年12月开始就使用基于 koa 的 <a href="https://github.com/cnpm/cnpmjs.org">https://github.com/cnpm/cnpmjs.org</a> 私有 npm 应用搭建，这些年 node 应用框架在快速换代升级，连我们自己造的 egg 都要升级到 TypeScript 了，所以在 2021 年我们启动了 <a href="http://cnpmjs.org">cnpmjs.org</a> 的技术升级重构，基于 egg 的 TypeScript 模式重新实现 <a href="https://github.com/cnpm/cnpmcore">https://github.com/cnpm/cnpmcore</a> 。</p>
<p>npm registry 的接口是 100% 实现迁移，然后在数据同步上通过数据库实现足够简单的任务系统，已经在 2022年1月30日完全老数据迁移。
非常感谢阿里云这么多年来的对中国 npm 镜像云服务器的开源赞助，只能靠仅有的广告位和每年的感谢帖子来回报这份天价的云资源账单。这一次重构之后，我们验证下来至少可以节省一半的云服务器资源，也算是让阿里云的开源赞助可以减轻一些成本负担。</p>
<p>当然 cnpmcore 不仅仅是为了技术升级，我们的核心新能力会跟随 npmfs 黑科技在 2022 年发布出来，到时候 npm install 的安装速度会在 cli 侧和 registry 侧同时发力，让 npm 模块安装速度在可预见的未来达到秒级。</p>
<p>PS：预估你在此期间遇到包数据同步和丢失问题，请先手动同步一次，如果还是没有，请回帖反馈给我们。</p>
</div>

中国 npm 镜像源升级公告

<div class="markdown-text"><p>继 2019 年开源 Midway 框架之后，阿里一直在 Node.js 的前沿进行深度研究，除了加入 TC39 参与标准化建设，向上游 Node.js 项目持续贡献，与龙蜥社区合作优化之外，也在 Serverless 领域有了不小的成果。</p>
<p>今天，向大家介绍我们最新的面向云原生场景，面向 Serverless 架构下的新产品， 代号 <strong>Noslate</strong>。</p>
<h2>Noslate 是什么？</h2>
<p>欢迎访问项目了解更多内容：<a href="https://github.com/noslate-project/noslate">Noslate</a>
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01hh1Db41sqh60CiNhD_!!6000000005818-2-tps-1324-390.png" alt="Noslate">
JavaScript 是开发者数量最庞大的编程语言，早些年 Node.js 等技术的出现，让 JavaScript 可以轻松地处理各类服务端任务。</p>
<p>但随着云原生/Serverless 等新架构概念的引导，弹性效率成为了全新的架构设计目标。为了能够让 JavaScript 任务拥有更高的弹性效率，进而满足在泛终端、全栈交付等领域的效率期待。我们逐步深入探索的过程中逐渐形成了 Noslate Project，旨在提升云原生场景下 JavaScript 的被调度性能，解决诊断性黑盒问题。</p>
<p>Noslate 它主要由三个子项目组成，分别体现了我们在提升 Javascript 任务弹性效率过程中碰到的问题以及解决方式：</p>
<ol>
<li>Node.js Distribution：初期针对函数计算冷启动场景优化，降低 Node.js 用户代码加载耗时，形成了针对性的 Node.js 发行版本。</li>
<li>Noslate Workers：随着探索的深入，我们设计了面向轻量端云同构场景的 W3C Web-interoperable JavaScript 轻量化容器方案。在交付灵活度上和资源、执行效率上形成平衡，现在主要应用于中心化的 SSR 渲染等轻量任务场景，效果显著。</li>
<li>Noslate Debugger：在落地业务过程中，我们发现在弹性效率提升后，对于异常和崩溃变得难以定位，得益于 Linux 系统 Coredump 机制的启发，我们设计了基于 Corefile 对问题进行离线诊断的 Noslate Debugger 产品，帮助用户实现问题的回溯和实时定位。</li>
</ol>
<p>简而言之，Noslate 目标是通过提供完整的技术产品方案， 将 JavaScript 打造成云原生时代最灵活的交付语言。</p>
<h2>为什么开源？</h2>
<p>一方面我们希望通过开源加强项目产品化程度；另一方面希望在社区中吸收更多的实践场景进而继续完善产品设计，也欢迎大家参与到项目中来。
同时，依托阿里云龙蜥社区和 Anolis 操作系统的合作关系，我们得以在底层探索，实现技术的演进。</p>
<h3>一、Noslate Workers</h3>
<p><img src="https://gw.alicdn.com/imgextra/i4/O1CN01L6QLHh1NRjQD5l5PE_!!6000000001567-2-tps-1270-339.png" alt="Noslate Workers">
W3C Web-interoperable 运行时 Aworker，提供了一个轻量，近乎 0 冷启动的 JavaScript Serverless 运行环境。通过它，可以轻松的在已有的架构中集成轻量化类 Serverless 的能力。
<img src="https://gw.alicdn.com/imgextra/i2/O1CN015XmQ8e20OlsVamGdC_!!6000000006840-2-tps-1729-672.png" alt="Noslate Workers 架构">
与传统的 FaaS 架构不同，这是一个在普通应用容器之上的轻量任务单位。得益于良好的动态任务高密度混部和隔离特性、以及基于任务状态拷贝 API 带来的近乎 0 冷启动特性，可以实现任务的即用即启与即停即抛，进而无需关心在整个大集群中任务节点的编排问题。
与既有架构的关系：
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01hwla1u1WSUch3qhT0_!!6000000002787-0-tps-3337-1879.jpg" alt="弹性架构分层">
Noslate Workers 由两个主要组件组成：</p>
<ol>
<li>Aworker - 轻量、Web-interoperable JavaScript Runtime</li>
<li>Noslated - Serverless 化的 Aworker 调度管控实现</li>
</ol>
<h4>关于 Aworker</h4>
<p>提供 Web API 标准的 Web-interoperable JavaScript 运行时，适合不直接依赖系统接口的业务逻辑部署。 Aworker 实现了近似 <a href="https://www.w3.org/TR/service-workers/">Service Worker API</a> 的规范，提供了基本的 <a href="https://www.w3.org/TR/service-workers/#fetchevent">Request-Response</a> 服务 API。
因为提供了相比于 Node.js 的 API 更加高层次、抽象的定义，不会泄漏系统底层状态，Aworker 通过 Startup Snapshot 和 Warmfork 能力， 实现了更快的水平及垂直扩容，能够在毫秒级启动并处理流量，具备更高的弹性效率。</p>
<h5>亮点特性一、Warmfork</h5>
<p>熟悉 Linux 系统编程的同学都知道 fork(2) 系统调用有几个优势：</p>
<ol>
<li>新进程可以继承母进程的当前状态，而无需从 main() 开始初始化；</li>
<li>pcb、栈、内存页，页表都是纯内存复制，所以进程创建快 (&lt;1ms)；</li>
<li>CopyOnWrite，新进程可以继承母进程的静态页表，可节省系统内存；</li>
</ol>
<p>对于 Node.js 来说，因为其无法在主线程持有所有多线程的状态 (如锁，信号量等)，所以 Node.js 进行 fork 的修改难度很大。其多线程设计主要 来源于 libuv 库和 V8 Platform Worker 线程：</p>
<ol>
<li>因部分 IO 操作存在同步调用，如 dns，文件读写等，所以 libuv 使用 IO 线程将同步操作转换成异步操作；</li>
<li>Node.js 的 V8 默认配置为多线程 GC、Background Compilation/Optimization 的方式；</li>
</ol>
<p>Node.js 的单进程多线程模型可以由下图表示：
<img src="https://gw.alicdn.com/imgextra/i1/O1CN01f3vkhU1gZxESjIBhq_!!6000000004157-2-tps-767-267.png" alt="Node.js 单进程多线程模型">
Aworker 的设计是采用单进程单线程的模型，也就是将上述模型中的 worker thread 单独抽出放到一独立进程中。Worker 因此可支持 fork，从而避免从 main() 开始的启动消耗，达到快速启动的目的。
<img src="https://gw.alicdn.com/imgextra/i1/O1CN01vaKK3b1NniQw29c7a_!!6000000001615-2-tps-734-266.png" alt="Aworker 单进程单线程模型">
为了支持单线程，Aworker 还做了如下修改：</p>
<ol>
<li>使用了 Linux AIO 特性替掉了 libuv 中同步的文件系统操作（不是 POSIX AIO，两者有区别。Posix AIO 类似于 libuv 现有的实现）；</li>
<li>使用 V8 的 SingleThread 模式，这是一个给低端设备（Low-end devices）实现的能力，不过非常符合 Serverless 资源模型；</li>
</ol>
<p>而为了管理、隔离这些工作进程，我们设计了一个轻量的业务进程容器管理组件 Turf ，该组件能通过 Warmfork 方式创建新的 Aworker 服务进程，并能提供一定的资源、环境的隔离能力，同时兼容 OCI。区别于传统 runc, rund 的容器，turf 旨在承载如 Aworker 这类轻 JS Runtime，它无需镜像运行，开销更低，可以支持更高的部署密度。</p>
<p>Warmfork 具体的对比：
<img src="https://gw.alicdn.com/imgextra/i2/O1CN01cLR5kd1JGVFa2tPic_!!6000000001001-2-tps-480-391.png" alt="warmfork">
提供 “被复制” 的进程，称为 “种子进程”，其他服务进程都是该进程的克隆。譬如 Aworker 作为种子进程，它需要确定自己一个 “可被克隆” 的时间点，将自己的所在状态（内存）作为克隆进程的初始状态。</p>
<p>Warmfork 的系统时序如下：
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01dTl9w71ZcW8TdBOon_!!6000000003215-2-tps-675-386.png" alt="warmfork 时序"></p>
<h5>亮点特性二、Startup Snapshot</h5>
<p>Warmfork 能实现了单机上服务进程的快速启动，而对于优化冷机启动加载速度，需要采用 Startup Snapshot 方案。
Startup Snapshot 和 CodeCache 的区别在于 Startup Snapshot 能够保存用户代码逻辑执行状态，而 CodeCache 只保存代码解析结果、仍然需要重新执行 用户代码逻辑。</p>
<p>设计上，Startup Snapshot 可提供携带用户代码逻辑的快速恢复，但是也有局限性：</p>
<ol>
<li>Startup Snapshot 对内存开销敏感，如果应用启动阶段用了大量内存，可能造成负优化；</li>
<li>用户代码启动需要没有歧义的状态，比如 IP 地址、日期、连接状态、服务发现结果等，针对这些歧义内容用户代码需要在进程恢复时有修正能力；</li>
</ol>
<p>V8 的 Startup Snapshot Serializer 就是一个类似于 GC 的对象遍历器。这个遍历器通过遍历加入到 Snapshot 中的 Root 对象，遍历它所对应的对象图并按照对象关系生成一系列的反序列化指令。</p>
<p>Startup Snapshot 相当于从 V8 Context 对象与它的 globalThis 开始，遍历堆中所有的对象并将对象关系与引用序列化成 特有的字节码，形成一个线性的可存储状态。并在恢复时，解释执行这些字节码，恢复堆中的对象内容与他们之间的引用关系。
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01VbTxVV1j7xsJEqEGB_!!6000000004502-2-tps-750-390.png" alt="V8 对象">
上述的两类和被调度性能相关的特性被统一归类为状态拷贝 API，具体使用可以参考官网文档中的<a href="https://noslate.midwayjs.org/docs/noslate_workers/aworker/serialize-api">《状态拷贝 API》</a>章节，详细介绍了命令行参数和程序内的 Events。</p>
<h4>Noslated</h4>
<p>Noslate Container Deamon，作为 Noslate Workers 解决方案的核心管控程序，提供了实例调度、弹性扩缩容、配置管理、流量管理等能力。</p>
<p>基于健壮性考虑，它由两个角色组成：控制面（Control Plane）、数据面（Data Plane）
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01OGE8Xk1hEiU0mY4Nw_!!6000000004246-2-tps-2845-1351.png" alt="Noslated 架构">
Noslated 对于实例的管控主要有三个模式：</p>
<ol>
<li>基础模式 - 基于流量的扩缩容</li>
<li>即抛模式 - 运行完即销毁</li>
<li>预留模式 - 面向历史场景兼容，在此不额外展开，详情可以查阅官网<a href="https://noslate.midwayjs.org/docs/noslate_workers/references/scale/#%E4%B8%89%E9%A2%84%E7%95%99%E7%AD%96%E7%95%A5">【预留策略】</a>。</li>
</ol>
<h5>一、基础模式</h5>
<p>当流量进入 Data Plane 后，如果没有能够处理请求的 Worker 实例，会通过 requestQueueing 事件通知 Control Plane，它会根据当前水位决定扩容数量，如果当前已无法创建 Worker 实例，会返回资源上限报错。新的 Worker 实例启动后，会自动连接到 Data Plane，Data Plane 发现新的 Worker 实例连接后会主动触发初始化请求，初始化成功后开始消费请求队列里堆积的请求。</p>
<p>当 Worker 实例闲置一段时间后，Control Plane 会主动发起 GC 操作，告知 Data Plane 关闭流量，流量关闭后，Control Plane 会通知 Turf 关闭 Worker 实例，清理资源残留。
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01TWklUC1OusEnQ5ENK_!!6000000001766-2-tps-1207-1020.png" alt="基础弹性模式"></p>
<h5>二、即抛模式</h5>
<p>针对特定的灵活场景，一次性的轻量用户脚本执行（比如特别高密度的混部执行二方任务如 SSR），为了隔离不同请求间的上下文，可以针对每个请求创建一个实例，并在执行后销毁。
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01k7ZGMG1DHWQzoQWSV_!!6000000000191-2-tps-1207-1020.png" alt="即抛模式">
在常规 Node.js 实例带上业务逻辑启动一般都不会太快，如果直接用于响应用户流量 RT 会难以接受。得益于 Aworker 运行时的 Warmfork 以及 Startup Snapshot 能力，把部分业务初始化逻辑放置到 Warmfrok 特性中，进而让新实例都是更快的启动并具备响应能力，这才让高密度混部二方任务成为可能。</p>
<h2>二、Noslate Debugger</h2>
<p><img src="https://gw.alicdn.com/imgextra/i1/O1CN010OWgpL1yU9IWuE5XG_!!6000000006581-2-tps-1270-339.png" alt="Noslate Debugger">
Noslate Debugger 是针对 V8 应用的离线分析工具，它可以分析 Node.js 等应用程序产生的 Corefile (Core 文件)：</p>
<ol>
<li>检查 Node.js/V8 应用程序的结构体、堆栈等内容</li>
<li>检查 V8 堆内的各种对象信息</li>
<li>从 Corefile 中导出 Heap Snapshot</li>
<li>业务无感获取 Corefile (通过 Arthur 工具)</li>
<li>已支持 Node.js / AWorker LTS 官方发行版</li>
</ol>
<p>为了更好的解决问题而不是造轮子，在未来的几个月 Noslate Debugger 也会和国内社区 Node.js 稳定性领域优秀的开源软件 Easy Monitor 共建整合，在 Node.js/V8 的问题诊断领域形成合力，也是值得期待的事情。</p>
<h5>优点一：基于 Corefile 的 “快照” 更适应 Serverless</h5>
<p>Serverless 应用通常会使用大量生命周期短、规格小的任务实例，但在此类任务实例上获得调试诊断能力并不容易，这使得 Serverless 应用长期处于较为黑盒的窘境。比如，Inspector 需要稳定和长时的网络连接、运行时 Heap Snapshot 需要较多的计算和内存资源，都是和 Serverless 架构背道而驰的。</p>
<p>不管是 V8 的对象还是堆快照，它都是 “信息” 在内存中的存储，而 Inspector 功能就是可以在 “运行时” 能提取这些信息。Noslate Debugger 通过 Corefile 将这部分调试诊断能力转移到了离线时进行，让原有实时性要求高的在线诊断调试转化为只需简单文件上传即可集成使用。</p>
<p>在用户本地或云端服务上提供接近用户本地开发时的调试诊断体感：
<img src="https://gw.alicdn.com/imgextra/i2/O1CN01OCIltT1LGcaAR4r8G_!!6000000001272-2-tps-861-519.png" alt="调试流程"></p>
<blockquote>
<p>Corefile (特指 GNU Corefile 格式) 主要记录的是 Node.js 进程的内存和寄存器转储(CoreDump: 内存到磁盘的过程)。所以它也是进程完整“信息”，被用于 Linux 系统应用 Crash(有损) 的调试载体，也可用于 GCore(无损) 产生进程快照用于离线分析。</p>
</blockquote>
<h5>优点二：更小的业务影响​</h5>
<p>对比原有线上 “堆快照” 对业务的影响长达数分钟，到只影响业务 RT 秒级（通过 GCore），甚至只有几十毫秒 （通过 Arthur 工具）。Corefile 快照也不会有任何运行时的&quot;添油加醋&quot;，所以它也适合那些还未被GC的对象定位，譬如诊断已经结束了的业务处理等。</p>
<p>Arthur 是 Noslate Debugger 中用于低影响获取 core文件的工具，利用 fork 减少进程暂停时间，LZ4 压缩减少转储体积。带业务流量的线上环境抓取，业务影响 31.106 毫秒，Corefile 大小为 338 MB （进程原使用 1.44GB 物理内存）。</p>
<h2>三、Node.js 发行版</h2>
<p><img src="https://gw.alicdn.com/imgextra/i1/O1CN01wxGn641fHLWa312QP_!!6000000003981-2-tps-1270-339.png" alt="Anode">
我们还对 Node.js 的实例进行了定向弹性场景的优化，提高了用户代码的加载速度，从而降低了冷启动时间。主要包括 Require 关系加速、Bytecode Cache，优化效果提升可高达 100% ~ 200%。该发行版，同时包含来自阿里云基础软件团队在 ARM 架构的性能优化特性。</p>
<h3>冷启动优化</h3>
<p>PGO（Profile Guided Optimization），是一种根据运行时 Profiling Data 来进行编译优化的技术，这里我们借鉴了这一概念。主要是通过执行一遍之后收集启动阶段的热点数据生成缓存文件，后续通过内存映射直接加载高效的缓存文件，即可获得提升在 100% ~ 200% 的用户代码冷启动优化效果。
<img src="https://gw.alicdn.com/imgextra/i4/O1CN01nHx1UD1yE7Qqlfef6_!!6000000006546-2-tps-1164-930.png" alt="PGO 流程"></p>
<h3>面向特定平台架构优化</h3>
<p>Node.js 支持包括 x64、arm64 等在内的多种架构。 但针对 ARM 芯片的快速发展，上游版本往往仅提供基础适配，缺少针对新指令集的优化，导致在 ARM 芯片上无法获得潜在的性能提升。当下主流云厂商大都提供了 ARM 架构、高性价比的运行环境。 Noslate Node.js 发行版针对 ARM 等平台的优化可以让应用在这些架构上获得更高的性能和效率。
目前 Noslate Node.js 发行版已经在进行针对阿里云 Ampere、阿里云倚天的定制优化，未来计划包括支持龙蜥社区中的其他架构。主要包括：zlib 特性优化、其他一些利用 SIMD 的性能提升都在 PR 合并和准别中。
上面是对 Noslate Project 的简单介绍，如果想要详细了解可通过下述方式：
● GitHub: <a href="https://github.com/noslate-project/noslate">https://github.com/noslate-project/noslate </a>
● 网站：<a href="https://noslate.midwayjs.org/">https://noslate.midwayjs.org/</a>
● 龙蜥社区 SIG（特殊兴趣小组，有钉钉群）：<a href="https://openanolis.cn/sig/web-platform">https://openanolis.cn/sig/web-platform</a>
● 邮件列表：noslate-support@list.alibaba-inc.com</p>
<p>致谢
感谢阿里巴巴集团内业务方的支持，同时还要特别感谢所有给本项目贡献过代码、一起探索过技术方向伙伴们（包括不限于 legendecas、mariodu、zhaolei0505、XadillaX、umuoy1、oraluben、hyj1991 等）。</p>
</div>

阿里巴巴 Noslate 正式开源 - 面向云原生的 JavaScript 容器方案

<div class="markdown-text"><p>RT.</p>
<p>请大家遵守法律法规，勿发布不合规内容。</p>
<ul>
<li>2021/11/26：针对部分打擦边球的推广行为（如各种云服务商的推广链接），将会对账户做出屏蔽处理。</li>
<li>2021/11/26：针对机器人频繁发布广告与违规内容，新增发帖限制如下：新用户五天内不允许发帖（不影响回帖）。</li>
</ul>
</div>

【2021/11/26】请大家遵纪守法，勿发布不合规内容

<div class="markdown-text"><p>很多人觉得Node.js没有往年那么火了，事实上不是这样的，Node.js社区健康稳步的发展中，主要是从性能好向好用转变，在易用性上有很大提升，从Node.js源码更新的内容看，大抵如此。Node.js Diagnostics Working Group是近二年Node.js社区的重点工作组，Node.js 14版本之后的大部分功能特性都是这个工作组推动的。早在2015年，有2个跟踪工作组tracing WG 和事后分析工作组 postmortem WG，在2017年合并到Diagnostics WG。核心产出是async_hooks, profiling, tracing, dump debug, report等，都是在易用性和好用性上做提升。让每个Node.js开发者更低门槛的提升Node.js应用的开发体验。</p>
<p>秦粤老师在《浮华过后的Node.js》分享里，也表达了同样观点，他用的是产品化平缓期，也是健康稳步的发展的意思。</p>
<p><img src="//static.cnodejs.org/FqRK1Uehhaz3lFDF3oHeL97Z7zYm" alt="image.png"></p>
<p>社区方面，Web框架已经没有多少空间，以特性取胜的框架，应该不会很多，比较期待Egg3。像fastify这种，修改Node.js机制，在性能领域深耕的框架，目前看是比较有作为的。pnpm是有创新的，但代码是有点可读性不太好。我更加喜欢rushstack对menorepo的改进，大规模编程范式还需要探索。除了去年提的midway-hooks，easy-monitor，看起来remix和morden算新，但还没有超出之前的范畴。</p>
<p>下面结合《<a href="https://nodersurvey.github.io/reporters">Node.js开发者2021报告</a>》内容，我们详细解读一下Node.js 2021年的情况。这份解读是根据冰森&amp;狼叔直播内容整理的，要点如下。
​</p>
<h3>1）开发框架变化较大，造轮子变少，TS变多，使用企业级框架变多</h3>
<p>​</p>
<p>去年express占比还非常高，今年企业级框架变多，尤其是大而全的框架更受欢迎。</p>
<p><img src="//static.cnodejs.org/Fl-QFKuag-dvFGbx7Q45WabMH5d8" alt="image.png"></p>
<p>Egg在国内普及率很高，而Midway和Nest增长较快，其实和TS普及有一定关系。
​
<img src="//static.cnodejs.org/FvoNa6PGZJN1ZaqZlmXZuRnNUI5_" alt="image.png">
​</p>
<h3>2）版本更新变化较大，从Node 12升级到Node 14，升级比较积极</h3>
<p>​</p>
<p>去年Node.js主要是使用Node 12，2021年Node 14占比将近一半，更新还是较快的。</p>
<p><img src="//static.cnodejs.org/FpQcq4qzd9rl-R-VEXzLZAiVMPaa" alt="image.png">
​</p>
<h3>3）吐槽变多，意味着用的人变多，趋于成熟</h3>
<p>​</p>
<p>C++之父Bjarne Stroustrup说过：世界上只有两种编程语言,一种是整天被人骂的,还有一种是没人用的。
​</p>
<p>大家对Node.js吐槽变多，实际上是在应用场景上使用较多，不再是针对于某些特性而进行吹捧。回归理性，在真实应用场景上，分布广泛，核心围绕API和BFF层，CLI&amp;工具。
​
<img src="//static.cnodejs.org/FkEeeI7hvEdSMIyUNaKxnQx9pzcJ" alt="image.png"></p>
<h3>4）出圈：年龄分布较去年比变大，使用工种也变得比较丰富。</h3>
<p>除了应用场景上，分布广泛外，非前端意外的开发者相关角色也有很大比例的提升，比如架构师，技术总监，项目经理等都一定程度上使用Node.js。可以说Node.js走出了前端圈，面向更大群体提供服务。另外受访者的年龄分布也变大了，这和出圈是有直接关系的。
​
<img src="//static.cnodejs.org/FsnHAf1Map8P8i4bEAn89POQf_8E" alt="image.png"></p>
<h3>5）使用困惑：性能优化，内存泄漏以及npm依赖</h3>
<p>​</p>
<p>以往对Node.js困惑最多的是异步流程控制，随着async/await的普及，这个问题已经慢慢在弱化。随着开发者使用Node.js深度增加，对性能优化，内存泄漏更为关注，这也是比较容易理解的。</p>
<p><img src="//static.cnodejs.org/FkPiwL5U9kbNq1vUE1J8AQKn54z4" alt="image.png"></p>
<p>​</p>
<h3>6）未来：从业经验越高则越关注性能和 Serverless</h3>
<p>​</p>
<p>关注性能比较容易理解，关注Serverless最主要是的原因是Serverless可以做到低运维甚至是0运维。运维作为Node.js开发者必备技能，Serverless的出现使得很多非专业Node.js也能轻松搞定Node.js各种服务端场景。</p>
<p><img src="//static.cnodejs.org/FjZSOZ1uO-Tqh8yTL2E4CtvMUFbN" alt="image.png"></p>
<p><img src="//static.cnodejs.org/FshPaWkMvnMKMxJckqf0L-M5OYe1" alt="image.png"></p>
<h3>推荐阅读</h3>
<ul>
<li>天猪《EggJS 的前世今生与未来》，比较期待Egg3，easy-monitor作者一君也加入Egg3项目组了 <a href="https://www.yuque.com/atian25/blog/egg-1to2to3">https://www.yuque.com/atian25/blog/egg-1to2to3</a></li>
<li>秦粤 《浮华过后的Node.js》链接稍后给出来</li>
</ul>
<h3>参考</h3>
<ul>
<li>原文  <a href="https://cnodejs.org/topic/6108bbc2a5d29d175c2d4208">https://cnodejs.org/topic/6108bbc2a5d29d175c2d4208</a></li>
<li>报告 <a href="https://nodersurvey.github.io/reporters">https://nodersurvey.github.io/reporters</a></li>
</ul>
<p>如果大家想参与讨论，欢迎回复</p>
</div>

Node.js 2021年开发者报告解读：健康稳步的发展中

<div class="markdown-text"><p>最近使用fabric.js开发了一个图形编辑器并开源了，已收到900+star，<strong>很多开发者咨询fabric.js能实现哪些功能</strong>，今天就用文字加动图的形式直观的分享出来，帮助大家做参考。</p>
<p>fabric.js 提供强大的底层能力，可实现<strong>自定义模板、素材、字体，图片滤镜、辅助线、组合、裁剪等功能，也提供了自定义元素等高级的用法</strong>。</p>
<p>项目：<a href="https://github.com/nihaojob/vue-fabric-editor">https://github.com/nihaojob/vue-fabric-editor</a></p>
<p>预览：<a href="https://nihaojob.github.io/vue-fabric-editor/#/">https://nihaojob.github.io/vue-fabric-editor/#/</a></p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89169a52052245839413826e3a9b9ac0~tplv-k3u1fbpfcp-watermark.image?" alt="screenshot-20230415-142257.png"></p>
<h2>画布功能</h2>
<p><strong>画布属性：尺寸、预设大小、背景色。</strong>
支持修改画布尺寸，也有预常用预设的画布尺寸，可以便捷设置，有背景色修改属性，同时提供常用颜色的快捷修改。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/044e2d09049f489f9341263862674fb9~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415120741_rec_.gif"></p>
<p><strong>画布缩放：放大、缩小、自动适应、鼠标滚轮缩放。</strong>
支持画布放大缩小操作，可按照1:1尺寸展示或自适应展示，页面窗口改变时会根据窗口大小自适应展示；滑动鼠标滚轮时可快捷缩放画布。</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6950ef15074c494e9d277a5b46c2c9f2~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415121804_rec_.gif"></p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/570f0c1bb2434593949b65234972f1b4~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415122049_rec_.gif"></p>
<p><strong>其他细节：拖拽画布、画布区域外显示控制条。</strong>
画布支持拖拽操作，按住alt快捷键，可以拖动画布；当元素拖拽到画布外区域时，仍然展示控制条，但元素并不会被展示出来，所见即所得。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b050ef702a4449dbce41b27a525a7e2~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415122246_rec_.gif"></p>
<h2>辅助功能</h2>
<p><strong>控制条：</strong> 在满足元素缩放、旋转的基础上尽量让其简洁，提供了2种样式。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69bba9a276e24db99653513bafb23f75~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415123406_rec_.gif"></p>
<p><strong>标尺：</strong> 标尺与辅助线可以满足我们更高要求的设计场景。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3489af30b75e4ecdbd037f7dddfbd10a~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415123622_rec_.gif"></p>
<p><strong>快捷调整：</strong> 图层管理、右键菜单、快捷键。
图层可以直观的定位元素的层级顺序，右键菜单提供了常用的快捷功能，还支持复制、删除等快捷键操作，提高操作效率。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/559b2176cb3e4ce0bc973d27cd58d705~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415125124_rec_.gif"></p>
<h2>基础元素</h2>
<p><strong>字体元素：</strong> 字体元素有普通字体、框字体，框字体可调整外边框，自动换行。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b2dd53747534bbba5273787cced287a~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415130158_rec_.gif"></p>
<p><strong>基础形状：</strong> 有矩形、圆形、三角形、多边形，可直接点击或拖拽添加到画布。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cafa5a10f62049cdbd7a6f0d10760e29~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415130303_rec_.gif"></p>
<p><strong>线条元素：</strong> 支持箭头、线条元素绘制。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1209cdaee70b4f38b7eef8987d6d676d~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415131152_rec_.gif"></p>
<p><strong>插入元素：</strong> 支持插入多种图片类型，图片图片、SVG元素、SVG字符串。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba18715bb24d46719d8883a90d127152~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415130901_rec_.gif"></p>
<p><strong>自定义素材：</strong> 素材在左侧分类展示，可定义图片素材、字体样式素材。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c97231aaa1f145f1965c1a7ee935e442~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415131012_rec_.gif"></p>
<h2>文件功能</h2>
<p><strong>数据保存：</strong> 支持导出/导出JSON文件方便存储数据，可自定义设计模板。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ff449fe3b9b4f08b5e51f5072b164ae~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415131754_rec_.gif"></p>
<p><strong>图片保存：</strong> 可清空画布、预览图片、保存图片文件。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd9b6eef8f2d46a284acccaa15710f39~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415131852_rec_.gif"></p>
<h2>属性设置</h2>
<p><strong>基础操作：</strong> 所有元素都可以在属性面板调整透明度、坐标、旋转角度。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/457b96af734d4a03bfeb003de4d04865~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415133918_rec_.gif"></p>
<p><strong>锁定与组合：</strong> 锁定元素后元素将不会收到其他操作影响；可将多个元素组合为一个组元素，也可以将组元素拆分为多个元素。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed1d836659d849d0ba115a5ec2e3b959~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415132328_rec_.gif"></p>
<p><strong>元素对齐：</strong> 单个元素支持相对于画布的水平、垂直、水平垂直居中，多个元素支持上、下、左、右对齐，水平居中、垂直居中、垂直平均分布、水平平均分布功能。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b71eae7cab77489d8ffb51edb3c66f11~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415132516_rec_.gif">
**自定义字体：**可自定义字体、对齐方式、行高、背景色、下划线、删除线等信息。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4eae4c5d03474d28b25fa64e82ef87e4~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png"></p>
<p><strong>渐变配置：</strong> 渐变是设计的重要形式之一，支持为元素、字体设置渐变颜色。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/daf12add8983481cb2a11bcd0a33614e~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png"></p>
<p><strong>边框设置：</strong> 支持为元素增加边框样式。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/349ce94cbc0f4aae99ec59d72ea73346~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415134137_rec_.gif"></p>
<p><strong>图片操作：</strong> 快捷替换、简单滤镜、复杂滤镜。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4998294d7f11404fad58321bfb4f22ae~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415133617_rec_.gif"></p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f21f01ec7ccd40458693d0e0b8cb43a7~tplv-k3u1fbpfcp-zoom-1.image" alt="20230415133505_rec_.gif"></p>
<h2>总结</h2>
<p>fabric.js 的底层能力非常强大，这依赖于灵活的底层接口，但是太过灵活也有一个弊端，那就是我们必须掌握更多的细节才能用起来得心应手，这对于开发者来说并不会太轻松。</p>
<p><a href="https://github.com/nihaojob/vue-fabric-editor">vue-fabric-editor</a>项目致力于打造一个开箱即用的web图片编辑器应用，同时<strong>沉淀一个介于web图片编辑器应用与fabric.js之间的封装层</strong>，期望封装层面向开发者设计，<strong>提供更简单的接口，让开发者可以轻松的实现图片应用开发</strong>。</p>
<h2>邀请</h2>
<p>通过技术社区和开源的方式和大家相识是一种很奇妙的体验，大部分都是在使用fabric.js做项目的开发者，我们组建了fabric.js开发者交流群，一起抱团取暖互相支招，一边吐槽文档，一起实现功能，欢迎你的加入交流群。</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e358ff17a16e4f6e946291c7beeac0d4~tplv-k3u1fbpfcp-watermark.image?" alt="WechatIMG391.jpeg"></p>
<p>我们离目标还有很长的距离，如果你对这件事情感兴趣，真诚的邀请你加入，我们一起沉淀fabric.js的最佳实践，<strong>你会得到包括不限于以下列表的收获，你只要会简单的Git和Javascript语法就可以</strong>。</p>
<ul>
<li>熟悉开源协作方式，成为项目贡献者。</li>
<li>Vue3 + TS实践，边学边开发。</li>
<li>fabric.js开发，边学边开发。</li>
<li>入门单元测试，边学边开发。</li>
<li>众多的fabric.js开发者交流。</li>
</ul>
<p>我自己是第一次搞开源项目，感谢项目的贡献者的帮助和社区的推动，<strong>这是一个很新的项目和社区，期待你的加入，希望我们一起边走边学，在未来一起成为知名开源项目的开发者</strong>。</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7d96501901c48c8ba76d6a64ca4a185~tplv-k3u1fbpfcp-watermark.image?" alt="海报.png"></p>
</div>

fabric.js开发图片编辑器可以实现哪些功能？多图

<div class="markdown-text"><p>你们在全栈ts吗</p>
</div>

发现最近全栈ts的公司越来越多啊，蒸蒸日上～

<div class="markdown-text"><p>今天闲着没事看 coffeescript，发现 coffeescript 会把</p>
<pre class="prettyprint language- coffeescript"><code>a = undefined
if a?
  console.log a
</code></pre><p>翻译成：</p>
<pre class="prettyprint language- javascript"><code>var a;
a = void 0;
if (a != null) {
  console.log(a);
}
</code></pre><p>然后我想了想、试了试，发现 <code>0</code>、<code>false</code>、<code>&quot;&quot;</code> 都不满足 <code>== null</code></p>
<p>于是我就想，可不可以使用 <code>a == null</code> 来代替  <code>a === null</code> || <code>a === undefined</code> 呢？</p>
</div>

可不可以用 a == null 来代替  a === null || a === undefined

<div class="markdown-text"><p>推荐一个新的<code>excel</code>处理库， [<a href="/user/zurmokeeper">@zurmokeeper</a>/exceljs](<a href="https://www.npmjs.com/package/">https://www.npmjs.com/package/</a><a href="/user/zurmokeeper">@zurmokeeper</a>/exceljs)， 关键功能，支持xlsx文件的解密功能，<a href="https://github.com/zurmokeeper/excelize/blob/master/README_zh.md">文档地址</a>，<a href="https://github.com/zurmokeeper/excelize">项目地址</a>, 完全兼容exceljs</p>
<p>使用方法：</p>
<pre class="prettyprint language-javascript"><code>完全兼容exceljs 所以原来对exceljs 

const ExcelJS = require(&#x27;exceljs&#x27;);
可以直接换成
const ExcelJS = require(&#x27;[@zurmokeeper](&#x2F;user&#x2F;zurmokeeper)&#x2F;exceljs&#x27;);
其它API的使用保持不变
-------------------------------------------------

const ExcelJS = require(&#x27;[@zurmokeeper](&#x2F;user&#x2F;zurmokeeper)&#x2F;exceljs&#x27;);

&#x2F;&#x2F; 从文件读取
const workbook = new Excel.Workbook();
await workbook.xlsx.readFile(filename);

&#x2F;&#x2F; 从文件读取, 解密使用密码加密的excel文件
const workbook = new Excel.Workbook();
await workbook.xlsx.readFile(filename, {password:&#x27;123456&#x27;});
&#x2F;&#x2F; ... 使用 workbook


&#x2F;&#x2F; 从流读取
const workbook = new Excel.Workbook();
await workbook.xlsx.read(stream);

&#x2F;&#x2F; 从流读取, 解密使用密码加密的excel文件
const workbook = new Excel.Workbook();
await workbook.xlsx.read(stream, {password:&#x27;123456&#x27;});
&#x2F;&#x2F; ... 使用 workbook


&#x2F;&#x2F; 从 buffer 加载
const workbook = new Excel.Workbook();
await workbook.xlsx.load(data);

&#x2F;&#x2F; 从 buffer 加载, 解密使用密码加密的excel文件
const workbook = new Excel.Workbook();
await workbook.xlsx.load(data, {password:&#x27;123456&#x27;});
&#x2F;&#x2F; ... 使用 workbook
</code></pre><h4>起因：</h4>
<p>需要完成一个读取WPS带密码保密的excel功能，找遍了社区所有的库，都没有找到，一开始发现 <a href="https://www.npmjs.com/package/xlsx-populate">xlsx-populate</a> 支持解密，后面发现只支持 ecma376 agile encrytion。是现在office xlsx格式的加密方式，不是WPS的加密方法，所以无法解密.</p>
<p>后面发现 WPS 对xlsx文件的加解密用的是 ecma376 standard encrytion. 然后参考官方文档和其他语言的库对照着来实现，比如python写的<a href="https://github.com/nolze/msoffcrypto-tool">msoffcrypto-tool</a> 和 go 的 <a href="https://github.com/qax-os/excelize">excelize</a>. 由于不是很懂加解密知识，实现的过程也是一波三折。具体的可以看SF，这里有几个链接，<a href="https://segmentfault.com/q/1010000043804317">问题1</a>, <a href="https://segmentfault.com/q/1010000043810282">问题2</a>,  <a href="https://segmentfault.com/q/1010000043864023">问题3</a></p>
<p>本来是想给<code>exceljs</code>提<code>PR</code>的，但是发现<code>exceljs</code>快2年没人维护了，后面23/4月底的时候有几个维护者开始合并代码，但是进度很慢，而且中间还停滞了很久，而且这些维护者还不是作者本人，有没发布的权限也不了解，所以想用上这个解密功能不知道还要多久。</p>
<p><code>xlsx-populate</code> 也是很久没有人维护了，而且<code>xlsx-populate</code>对于 ecma376 agile encrytion 的处理代码不是单独一个库来处理的，而我是把这些加解密的实现单独出来了一个包，<a href="https://www.npmjs.com/package/officecrypto-tool">officecrypto-tool</a>，实现加解密的话，直接使用这个包就好了，也就不需要 <code>xlsx-populate</code> 原来关于加解密的那部分代码了，不知道人家会不会接受，所以也没有给<code>xlsx-populate</code> 提<code>PR</code>了。</p>
<p>还有一个库，叫<code>xlsx</code>，是<code>sheetjs</code>出的，这个功能最广，支持读取xls格式。但是这个库其实是个社区版，阉割了加解密功能，看源码可以看到，写到加解密那部分的时候，然后代码就没有了，付费版才支持。所以估计是不会接受PR的。毕竟加了谁还买他们的付费版。</p>
<p>node.js 处理<code>excel</code>用的最多的3个库:</p>
<p><code>exceljs</code></p>
<p>API最友好，文档最丰富，功能也强大，不支持加解密，不支持xls, 快处于无人维护状态</p>
<p><code>xlsx-populate</code></p>
<p>API一般，文档一般，但是支持ecma376 agile encrytion加解密,不支持xls,  快处于无人维护状态</p>
<p><code>xlsx</code> 社区版</p>
<p>API一般，文档一般，不支持加解密，但是支持的文件格式最广，比如支持xls。由于是社区版，估计也不会加什么新功能了</p>
<p>所以在<code>exceljs v4.3.0</code>的基础写了这个 <code>[@zurmokeeper](/user/zurmokeeper)/exceljs</code></p>
<p>是基于 2023/5/5 exceljs 的最新提交代码上的，对比v4.3.0版本，解决了一些bug外（感谢其他开发者）。最重要的更新就是支持对xlsx文件的解密功能。加密功能<code>TODO</code>中。</p>
<p>现在的想法是想继续维护这个项目，其实本人是一直关注exceljs的，提过PR,也回答了一些issue，但是苦于没有更多的权限，也不能够关闭issue，看着issue越来越多，其实很多是已经处理的，或者是重复的。也有很多不错的PR在那里放着。</p>
<p>如果 exceljs 继续更新代码， <code>[@zurmokeeper](/user/zurmokeeper)/exceljs</code> 会尽量保持跟上，同时自己也会尽量去处理现在exceljs 的issue 和 pr，然后更新在 <code>[@zurmokeeper](/user/zurmokeeper)/exceljs</code>，也欢迎更多的开发者加入，issue或者pr也好。不敢保证能做的多好，只能说尽力。<a href="https://github.com/zurmokeeper/excelize">项目地址</a></p>
</div>

CNode 社区微信小程序客户端

<div class="markdown-text"><p><a href="https://github.com/hsiaosiyuan0/slowjs">SlowJS</a> - QuickJS 降速版本！</p>
<ul>
<li>将 5.4W 行 <a href="https://github.com/bellard/quickjs">quickjs.c</a> 进行拆分</li>
<li>增加断点调试功能</li>
<li>增加内存 dump WIP</li>
</ul>
<p>一起学习 QuickJS!</p>
</div>

SlowJS!

<div class="markdown-text"><p>NestJs周下载量已经达到200多万了 用nestjs开发的人多还是midway多？</p>
<p><img src="//static.cnodejs.org/Ftx8B1sj-zY5bLEFJA5ObHwGec8G" alt="nestjs8.png"></p>
</div>

NestJs周下载量已经达到200多万了 用nestjs开发的人多还是midway多--各位老铁用的什么

<div class="markdown-text"><blockquote>
<p>从零开始带你开发一款 Web3 RWA(Real World Assets) 钱包</p>
</blockquote>
<h2>以比赛来推进项目落地</h2>
<p>最近报名参加了一个新的波卡黑客松比赛，这个比赛奖金很丰厚，第一名有 4 万美金左右，不过能不能拿奖我也是没底。</p>
<p>参加比赛其实主要是为了能给我制造紧迫感来推进自己的 idea 落地，这次我是规划做个 Web3 RWA 钱包，这次代码也直接开源。</p>
<h2>项目落地过程中能顺便写一本小书来介绍这个项目的技术原理等</h2>
<p>其实我很早就想写个全栈 Web3 的培训课程，不过一直没有落地，因为一直在参加各种 Web3 黑客松比赛或者研究新技术了。</p>
<p>而钱包开发会涉及到前端、后端、浏览器插件、Web3 等知识。</p>
<p>在这个过程中，我希望能一点点的把开发这个钱包的一些相关技术整理出来，最终能形成一本书。</p>
<p>最终，本书会被我也在落地开发中的 Web3 的书籍出版平台 Web3Blog.World 发布到区块链上。</p>
<p>届时，每个章节都会有对应的区块链上的一次性付费逻辑，以支持部分读者不想看正本书而只看部分章节的需求。</p>
<h2>项目代码是开源的</h2>
<p>这个 Web3 RWA 钱包的项目是完全开源的。</p>
<p>书的计划状态： <a href="https://github.com/Web3Hacker-World/Discussions/issues/22">https://github.com/Web3Hacker-World/Discussions/issues/22</a>
目前项目进度状态： <a href="https://github.com/Web3Hacker-World/Discussions/issues/15">https://github.com/Web3Hacker-World/Discussions/issues/15</a></p>
<p>在比赛期间，代码放到了这里：<a href="https://github.com/NftTopBest/hackathon-2023-summer/tree/main/projects/01-NFT-Fi-Twitter/code">https://github.com/NftTopBest/hackathon-2023-summer/tree/main/projects/01-NFT-Fi-Twitter/code</a>
在比赛之后，将会被移到 Web3Hacker-World 组织大本营：<a href="https://github.com/Web3Hacker-World/web3-rwa-wallet">https://github.com/Web3Hacker-World/web3-rwa-wallet</a></p>
<h2>书的适用人群及内容规划</h2>
<p>本书适用于有一定编程基础的人员，最好是有前端基础，不过如果自认为学习能力或者时间比较多，也是可以零基础参与进来，不过难度会比较大！</p>
<p>每个章节其实就是我们每天推进开发这个钱包的过程以及碰到的问题。</p>
<p>本书其实是一个注重实战的教程类书，学习某个技术的最佳方案其实是带着目标和疑问去学习或者看某个知识。</p>
<p>比如，在确认要写个 Web3Hacker.World 自己的钱包之后，我才开始研究 MetaMask 的钱包原理。</p>
<p>而研究原理过程中，我又写了文章来介绍这些我学到的知识。</p>
<p>这个过程可能会比较曲折和漫长，不过我觉得比之前单纯的学了某个技术知识点，然后一股脑开发出来会更有意义。</p>
<p>因此我在写了几篇文章之后，决定把这变成一本书。</p>
<p>这样，可以和大家一起开发钱包过程中，逐步把这些知识信息整理出来，和更多的人分享。</p>
<p>同时，可能大家在一起学习的过程中，可能也想到了钱包的某部分功能等待开发，那么大家就可以利用业余时间也参与进来开发这部分模块的代码，然后也输出书的文章章节。</p>
<p>这可能就是 <code>Learn by doing</code> 的一个过程，而我们可能更像 <code>Learn by building &amp;&amp; booking</code>。</p>
<p>目前还明确书的章节，因为钱包其实才刚刚开始开发的。</p>
<p>但是教程的最终用意是希望大家可以和我一起一步步的学习如何把钱包开发出来并落地。</p>
<p>最近一个月会争取每天都更新钱包代码，并且每天 21 点有 10 分钟左右的视频演示当天进度代码说明。</p>
<p>当然，如果有疑问也可以在视频会议里面答疑。</p>
<p>注意，视频会被分享到网络上！</p>
<p>目前已发布的跟本书相关的文章：</p>
<ul>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483926&amp;idx=1&amp;sn=75ebf158b921e455e0f305e44909b2cc&amp;chksm=c324092bf453803dcece917b7d4733b9ceb1349d8eca3bc7d6af3e4208346a690cf95466ba58&amp;token=398129627&amp;lang=zh_CN#rd">MetaMask 的秘钥加密逻辑</a> 此文为翻译文章，后续会再重新整理</li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483935&amp;idx=1&amp;sn=d4d6c8a130039775135515de5531a08a&amp;chksm=c3240922f4538034bab55b857e16f43a3e27c29b601efd8de4bd45b6a91f93967fc9b2d16f50&amp;token=398129627&amp;lang=zh_CN#rd">Web3开发技术更新： 还在用 web3.js 或 ethers.js? 试试 Wagmi 和 Viem!</a></li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247484018&amp;idx=1&amp;sn=cf2eaff501251370011d0526d2924858&amp;chksm=c324094ff45380590ac970c245e03b0f0587bb9ac12fde58ceb771d0780a5b4676d92eec8233&amp;token=398129627&amp;lang=zh_CN#rd">WebExt Bridge 实战</a></li>
</ul>
<h2>早鸟计划</h2>
<ul>
<li>前 10 名限价 99RMB。</li>
<li>11 - 100 名限价 199RMB。</li>
<li>本书最终的定价会是 300RMB，并获得终身的更新支持。</li>
<li>成为会员后，转发并推荐新的会员，老会员会获得 20% 返利，新会员获得 20%返利。</li>
</ul>
<p>另外，这本书会是的 <code>Full Stack Life Hacker Handbook</code> 的一部分，不过那本书定价更高，会成为访问 Web3Hacker.World 所有资源的会员权限。</p>
<p>本书对 <code>Full Stack Life Hacker Handbook</code> 书购买者及 Web3Hacker.World 的种子用户会员及黑客会员直接全部开放，无需另外付费。</p>
<blockquote>
<p>我是来自 <code>Web3Hacker.World</code>的 Bruce，22 年 5 月 All In Web3，后面连续参加了 10 多个黑客松并三个月内拿到 15 个左右的赛道奖及 Grants）。
后面又经历休息、搬家到海边（懒散了几个月）、从新学习了大量新技术。现在又开始新的一轮的 Web3 掘金。
这波主要围绕我创建的 <code>BuidlerProtocol</code> 打造 <code>万物皆可 Web3</code> 的跨链的 <code>Web3 App Store</code> 生态平台来制作各种不同的实际应用场景的 DApp 参加各种不同的黑客松比赛并尝试获得 Web3 投资机构的投资。</p>
</blockquote>
</div>

计划写个全栈的浏览器插件开发教程，内容涉及 Web3, 前端，后端，浏览器开发，有没有感兴趣的！

<div class="markdown-text"><p>目前我在用nestjs</p>
</div>

大家开发都用什么框架呢？

<div class="markdown-text"><p><img src="//static.cnodejs.org/FvpTDdDDa-yauYS945iGW2PJH1_k" alt="image.png"></p>
<p>## ai智聘App功能介绍：
专注于高品质招聘的AI平台，利用最新的人工智能技术，为用户提供可信赖的高品质招聘服务。帮助企业主找到更优秀的人才。</p>
<p>联系我们：zilutiyankeji@163.com
或者直接留言。</p>
<p>感谢您的使用和反馈。</p>
</div>

ai智聘技术服务支持

<div class="markdown-text"><p>Transform your room with different themes by capturing a photo. Start your room remodeling journey today. <a href="https://gptroom.co">https://gptroom.co</a>
<img src="//static.cnodejs.org/FinRRNyAC3ExgwqGWRAG_MHXXp2n" alt="image.png"></p>
</div>

Generating dream rooms using AI for everyone.

<div class="markdown-text"><h3>软件名称</h3>
<p>Dawn Launcher</p>
<h3>应用平台</h3>
<p>Windows</p>
<h3>应用简介</h3>
<p>软件用Electron开发，Windows快捷启动工具，帮助您整理杂乱无章的桌面，分门别类管理您的桌面快捷方式，让您的桌面保持干净整洁。
支持相对路径（便携路径），支持扫描本机开始菜单、本地Appx应用列表添加项目、支持多项目添加，一次启动多个项目、支持添加网址并一键获取网址信息。</p>
<h3>官方网站</h3>
<p><a href="https://dawnlauncher.com/">dawnlauncher.com</a></p>
<h3>部分功能截图</h3>
<h3>子分类</h3>
<p><img src="//static.cnodejs.org/Fr7bnjDJtGkTEjS9-nb5IIRo8KW_" alt="1.png"></p>
<h3>自定义主题</h3>
<p><img src="//static.cnodejs.org/FqAPeF72vSCx-NT3zWWmbS2cqH6Y" alt="2.png"></p>
<h3>自定义背景图</h3>
<p><img src="//static.cnodejs.org/FpxLfDmgugwTxfqBEurMbUWCK-Al" alt="3.png"></p>
<h3>快速搜索</h3>
<p><img src="//static.cnodejs.org/Fn0NyiAGhtDGUp4KXLNed9DSODvb" alt="4.gif"></p>
<h3>一键获取网址信息</h3>
<p><img src="//static.cnodejs.org/Fh-kwPuOb06WG6xmlnrqcSOEM-Y-" alt="5.gif"></p>
<h3>相对路径（便携路径）</h3>
<p><img src="//static.cnodejs.org/FjdLuc2LnkX5WMOv-0FOQ_yGFDN0" alt="6.png"></p>
<h3>关联文件夹</h3>
<p><img src="//static.cnodejs.org/FrfjbPJIdJwSWjxdZAhr1LlD4eOk" alt="7.gif"></p>
</div>

分享我用Electron做的软件Dawn Launcher - Windows快捷启动工具

<div class="markdown-text"><blockquote>
<p>Web3Hacker.World 是一个集合程序员黑客、对新事物好奇的种子用户、及 vc 投资者组合的围绕 <code>万物皆可 Web3</code> 的理念打造的生态体系。
我们将持续分享 Web3 的最新技术发展，并打造一个开放式的黑客社区并产出真正非庞氏的 Web3 产品</p>
</blockquote>
<p>目前大部分 Web3 的文章教程都是在介绍一大堆的工具链等，在我们看来，有一些其实已经可以逐步淘汰了，未来非底层架构甚至开发其实都不用去碰的一些工具概念名词。
而 Web3Hacker.World 则目标是打造一站式的 Web3 开发者工具链生态，所以我们本身会一直持续更新我们的技术架构以适应整体技术的发展变化。</p>
<p>本文即我们在开发我们自己的开源应用钱包 BuidlerProtocol Wallet 时，研究新技术方案时碰到的，<code>wagmi</code> 这个项目是 16 个月前开始的，这过程中核心团队就 2 个人，
他们开发非常活跃，到现在 <code>wagmi</code> 项目有 4.5k 的 star，而官方 Twitter <a href="/user/wagmi_sh">@wagmi_sh</a> 有快 5k 的粉丝了。</p>
<p><code>wagmi</code> 是 <code>We all gona make it</code> 的缩写。</p>
<p>我们之前多个项目也一直使用 <code>ethers.js</code>，在综合考虑后，觉得全部逐步替换为 <code>wagmi</code> 和 <code>Viem</code>，我们将在这些项目替换：</p>
<ul>
<li>bs-craft(未开源，仅黑客会员可使用，未来会释放出精简版开源): 基于 nuxt3 layer 的一站式的 Web3 全栈开发解决方案</li>
<li>BuidlerProtocol Wallet: 参加波卡黑客松的契机刚刚立项，将实现一个可以让 Twitter 用户发布 NFT 作为付费模式的浏览器插件钱包
<ul>
<li>此项目开源，欢迎有业余时间同学可以加入参与，未来会根据贡献分配奖励</li>
</ul>
</li>
</ul>
<p>另外我们还启动了好几个 Web3 及相关技术栈的翻译的开源项目，这些项目在未来也会通过 Web3Hacker.World 的开源基金会分发奖励，欢迎早期参与者加入贡献！</p>
<ul>
<li><a href="https://github.com/Web3Hacker-World/wagmicn.web3hacker.world">Wagmi CN</a> 即本文翻译的站点 <a href="https://github.com/Web3Hacker-World/wagmicn.web3hacker.world">https://github.com/Web3Hacker-World/wagmicn.web3hacker.world</a></li>
<li><a href="https://github.com/Web3Hacker-World/viemcn.web3hacker.world">Viem CN</a> 即本文翻译的站点 <a href="https://github.com/Web3Hacker-World/viemcn.web3hacker.world">https://github.com/Web3Hacker-World/viemcn.web3hacker.world</a></li>
<li><a href="https://github.com/Web3Hacker-World/nuxtcn.web3hacker.world">Nuxt3 CN</a> Nuxt3 的相关文档翻译 <a href="https://github.com/Web3Hacker-World/nuxtcn.web3hacker.world">https://github.com/Web3Hacker-World/nuxtcn.web3hacker.world</a></li>
</ul>
<p>以下为 <code>wagmi core</code> 的 <a href="https://wagmi.sh/core/getting-started"><code>getting started</code></a> 翻译，注意，文中链接还未完全翻译，故可能导致访问 404，可以替换域名为 <code>wagmi.sh</code> 即可阅读英文原文，后续中文翻译完链接即可恢复。</p>
<h1>开始</h1>
<p><code>@wagmi/core</code> 是一个原生 JS 库，包含开始使用以太坊所需的一切。它使“连接钱包”、显示 ENS 和余额信息、签名消息、与合约交互等变得容易。</p>
<h2>安装</h2>
<p>安装 <code>@wagmi/core</code> 及 <a href="https://viem.sh/">viem</a> 并列依赖项。</p>
<pre class="prettyprint language-bash"><code>pnpm i @wagmi&#x2F;core viem
</code></pre><h2>配置链</h2>
<p>首先，配置 wagmi 使用的你想要的链，以及你想要使用的 <code>providers</code> 。</p>
<pre class="prettyprint language-ts"><code>import { configureChains, mainnet } from &#x27;@wagmi&#x2F;core&#x27;
import { publicProvider } from &#x27;@wagmi&#x2F;core&#x2F;providers&#x2F;public&#x27;

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)
</code></pre><p>此示例使用从 <code>@wagmi/core</code> 导入的以太坊主网链(<code>mainnet</code>) ，当然，您也可以传入任何 <a href="https://wagmicn.web3hacker.world/core/chains#wagmichains">EVM 兼容链</a>。</p>
<p>注意：在生产环境的应用中，不建议仅传递 <code>publicProvider</code> 给 <code>configureChains</code>，因为您可能会面临公共 provider 端点的速率限制。建议也提供一个 <a href="https://wagmicn.web3hacker.world/core/providers/alchemy"><code>alchemyProvider</code></a> 或 <a href="https://wagmicn.web3hacker.world/core/providers/infura"><code>infuraProvider</code></a>。</p>
<p><a href="https://wagmicn.web3hacker.world/core/providers/configuring-chains">阅读有关配置链的更多信息</a></p>
<h2>创建 wagmi 配置</h2>
<p>接下来，使用 <a href="https://wagmicn.web3hacker.world/core/config"><code>createConfig</code></a> 创建一个 wagmi config实例，并将结果通过 <code>configureChains</code> 传递给它。</p>
<pre class="prettyprint language-ts {14-18}"><code>import {
  createConfig,
  configureChains,
  mainnet,
} from &#x27;@wagmi&#x2F;core&#x27;
import { publicProvider } from &#x27;@wagmi&#x2F;core&#x2F;providers&#x2F;public&#x27;

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)

const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
})
</code></pre><p><a href="https://wagmicn.web3hacker.world/core/config">阅读有关客户端配置的更多信息</a></p>
<h2>你可以开始了</h2>
<p>使用 <code>action</code> 吧！您现在可以在整个应用程序中导入和使用 <code>action</code>。</p>
<pre class="prettyprint language-ts {4-6,7}"><code>import { connect, fetchEnsName } from &#x27;@wagmi&#x2F;core&#x27;
import { InjectedConnector } from &#x27;@wagmi&#x2F;core&#x2F;connectors&#x2F;injected&#x27;

const { address } = await connect({
  connector: new InjectedConnector(),
})
const ensName = await fetchEnsName({ address })
</code></pre><p>想了解更多？继续阅读文档。</p>
<blockquote>
<p>我是来自 <code>Web3Hacker.World</code>的 Bruce，22 年 5 月 All In Web3，后面连续参加了 10 多个黑客松并三个月内拿到 15 个左右的赛道奖及 Grants，累积产值 70 万 RMB 左右（含后续参与其他团队获得）。
后面又经历休息、搬家到海边（懒散了几个月）、从新学习了大量新技术。现在又开始新的一轮的 Web3 掘金。
这波主要围绕我创建的 <code>BuidlerProtocol</code> 打造 <code>万物皆可 Web3</code> 的跨链的 <code>Web3 App Store</code> 生态平台来制作各种不同的实际应用场景的 DApp 参加各种不同的黑客松比赛并尝试获得 Web3 投资机构的投资。
在这个过程中，我会用 Web3 的技术开发一系列产品，并在过程中实际使用他们。比如使用 Web3 的博客平台来分享我们后续的付费阅读的文章 Web3NFT.Social.</p>
</blockquote>
<hr>
<h3>往期回顾</h3>
<ul>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483849&amp;idx=1&amp;sn=18920019b11ce4c61718874266faa9b0&amp;chksm=c3240af4f45383e2ea46f21d3d65d7d47186e74d435878859a9682503d3fffe5bb709bd8976b&amp;token=710208366&amp;lang=zh_CN#rd">辞职 All in Web3 一年的回顾以及一些对 Web3 NFT 的看法见解 （一）</a></li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483881&amp;idx=1&amp;sn=93c85b1d9e8459c4d36f0184b19a5b90&amp;chksm=c3240ad4f45383c287de88ad8247e124572e4c554172e8367eb0140958550052b32348168033&amp;token=710208366&amp;lang=zh_CN#rd">辞职 All in Web3 一年的回顾以及一些对 Web3 NFT 的看法见解 （二）</a></li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483903&amp;idx=1&amp;sn=8f66059eac6de805c7e8340dc322b0a0&amp;chksm=c3240ac2f45383d43d5dea6abe59cfaf302c35a53c51d90d51d2203b2481c1ca2422ce22031e&amp;payreadticket=HK0vH-VgFuwBPr4gN2wYXhvqXGV5ld6kPkiC4AJp1ZdDicfP6ZQzJOMyOJz1AR0qFcEOMzY#rd">对于 2023 至 2025 年是 Web3 的 iPhone 时刻 文章的一些看法</a></li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483903&amp;idx=2&amp;sn=35e4a0c768248644719be77e64432075&amp;chksm=c3240ac2f45383d4ff5bb1caad8636d30836647ca492560b1c2598776bc601dfa7f7b8c6cacb&amp;payreadticket=HDoD_mLn3oAbe1ycn9lkwy8l9ckXsxRtY7u_hTWI6SsrfGXWiMCYYqWdSlGb8p8pwMuQdjg#rd">申请 Alliance 投资孵化的一些小贴士</a></li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483778&amp;idx=1&amp;sn=a43130fe5e9c5132986f892a724040b2&amp;chksm=c3240abff45383a9a14b200503680abfe00ff67eedb62ed8d98aaa99f97264651ba1259a56b5&amp;token=1902673380&amp;lang=zh_CN#rd">介绍下Web3赏金黑客们必备的开箱即用 Web3 元宇宙 NFT 开发必备脚手架</a></li>
<li><a href="https://mp.weixin.qq.com/s?__biz=Mzk0NDM5NzkwNg==&amp;mid=2247483715&amp;idx=1&amp;sn=4c39648183b0cb2781819e3a065d0a86&amp;chksm=c3240a7ef45383681fff64cff623ef0a9590abf8f6f31e015975210ebc64d1f1b67f26356fa7&amp;token=1411723489&amp;lang=zh_CN#rd">一个解决方案来让你的 NFT 拥有无限可能</a></li>
</ul>
</div>

Web3开发技术更新： 还在用 web3.js 或 ethers.js? 试试 Wagmi 和 Viem!

<div class="markdown-text"><blockquote>
<p>react 18 新增了启发式的并发渲染机制，副作用函数会因为组件重渲染可能调用多次，为了帮助用户理清正确的副作用使用方式，在开发模式启用StrictMode时，会刻意的故意调用两次副作用函数，来达到走查用户逻辑的效果，但此举也给部分升级用户带来了困扰，本文将讨论helux如何规避此问题。</p>
</blockquote>
<h2>helux 简介</h2>
<p><a href="https://github.com/tnfe/hel/tree/main/packages/helux">helux</a>是一个主打轻量、高性能、0成本接入的react状态库，你的应用仅需替换<code>useState</code>为<code>useShared</code>，然后就可以在其他代码<strong>一行都不用修改</strong>的情况下达到提升react局部状态为全局共享状态的效果，可访问此在线<a href="https://codesandbox.io/s/helux-effect-qyv6xz?file=/src/App.tsx">示例</a>了解更多。</p>
<pre class="prettyprint language-diff"><code>import React from &#x27;react&#x27;;
+ import { createShared, useShared } from &#x27;helux&#x27;;
+ const { state: sharedObj } = createShared({a:100, b:2});

function HelloHelux(props: any) {
-  const [state, setState] = React.useState({ a: 100, b: 2 });
+  const [state, setState] = useShared(sharedObj);

   &#x2F;&#x2F; 当前组件仅依赖a变更才触发重渲染
   &#x2F;&#x2F; helux会动态收集当前组件每一轮渲染的最新依赖，以确保做到精确更新
   return &lt;div&gt;{state.a}&lt;&#x2F;div&gt;;
}
</code></pre><p>默认共享对象是非响应的，期望用户按照react的方式去变更状态，如用户设置<code>enableReactive</code>为true后，则可创建响应式对象</p>
<pre class="prettyprint language-ts"><code>const { state, setState } = createShared({ a: 100, b: 2 }, true);
&#x2F;&#x2F; or
const { state, setState } = createShared({ a: 100, b: 2 }, { enableReactive: true });

&#x2F;&#x2F; 将更新所有使用 &#96;sharedObj.a&#96; 值的组件实例
sharedObj.a++; 
setState({a: 1000});
</code></pre><h2>2.0 带来了什么</h2>
<p><code>2.0</code>版本做了以下三个调整</p>
<h3>精简api命名</h3>
<p>原来的 <code>useSharedObject</code> api重新导出为更精简的<code>useShared</code>，配合<code>createShared</code>以便提高用户的书写效率和阅读体验。</p>
<h3>新增信号记录（实验中）</h3>
<p>内部新增了信号相关的记录数据，为将来要发布的<code>helux-signal</code>（一个基于helux封装的react signal模式实现库）做好相关基础建设，<code>helux-signal</code>还在原型阶段，在合适的时机会发布<code>beta</code>版本体验。</p>
<p>不使用信号时，需要<code>createShared</code> 和 <code>useShared</code> 来两者一起搭配，<code>createShared</code>创建共享状态，<code>useShared</code>负责消费共享状态，它返回具体的可读状态值和更新函数。</p>
<pre class="prettyprint"><code>const { state: sharedObj } = createShared({a:100, b:2}); &#x2F;&#x2F; 创建
function HelloHelux(props: any) {
  const [state, setState] = useShared(sharedObj); &#x2F;&#x2F; 使用
  &#x2F;&#x2F; render logic ...
}  
</code></pre><p>使用信号时，仅需要调用<code>helux-signal</code>一个接口<code>createSignal</code>既可以完成状态的创建，然后组件可跳过<code>useShared</code>钩子函数直接读取共享状态。</p>
<p>需注意，目前helux 2仅是内部完成了相关基础建设，上层负责具体实现的helux-signal还在实验阶段，现阶段社区已有preact提供的<a href="https://www.npmjs.com/package/@preact/signals-react">signals-react</a>库来支持signal模式开发react组件。</p>
<p>一个预想的完整的基于<code>helux-signal</code>开发react组件示例如下：</p>
<pre class="prettyprint"><code>import { createSignal, comp } from &#x27;helux-signal&#x27;;

const { state, setState } = createSignal({a:100, b:2}); &#x2F;&#x2F; 创建信号
&#x2F;&#x2F; 以下两种方式都将触发组件重渲染
state.a++;
setState({a: 1000});

&#x2F;&#x2F; &lt;HelloSignal ref={ref} id=&quot;some-id&quot; &#x2F;&gt;
const HelloSignal = comp((props, ref)=&gt;{ &#x2F;&#x2F; 创建可读取信号的react组件
	return &lt;div&gt;{state.a}&lt;&#x2F;div&gt;; &#x2F;&#x2F; 当前组件的依赖是 state.a	
})
</code></pre><h3>新增 useEffect、useLayoutEffect</h3>
<p>v2版本新增了<code>useEffect</code>，<code>useLayoutEffect</code>两个接口，这也是本文要重点讨论的两个接口，为何<code>helux</code>提供这两个接口来替代原生接口呢？且看下面的内容一一详解。</p>
<h2>react18 的副作用</h2>
<p>react 18 新增了启发式的并发渲染机制，副作用函数会因为组件重渲染可能调用多次，为了帮助用户发现未正确使用副作用带来的可能问题（例如忘了做清理行为），在开发模式启用StrictMode时，会刻意的故意调用两次副作用函数，来达到走查用户逻辑的效果，期望用户正确的理解副作用函数。</p>
<p>实际情况什么情况会产生多次挂载行为呢？新文档特意提到了一个例子，由于在18里react会分离组件的状态与卸载行为（非用户代码控制的卸载），即组件卸载了状态依然保持，再次挂载时会由react内部还原回来，例如<strong>离屏渲染</strong>场景需要此特性。</p>
<h3>双调用的困扰</h3>
<p>但此举也给部分升级用户带来了困扰，以下面例子为例：</p>
<pre class="prettyprint language-ts"><code>function UI(props: any) {
  useEffect(() =&gt; {
    console.log(&quot;mount&quot;);
    return () =&gt; {
      console.log(&quot;clean up&quot;);
    };
  }, []);
}
</code></pre><p>在 strcit 模式打印如下</p>
<pre class="prettyprint language-txt"><code>mount
clean up
mount
</code></pre><p>用户真正卸载组件后还有一次<code>clean up</code>打印，由此让很多用户误以为是bug，去react仓库提issue描述升级18后useEffect产生了两次调用，后来react官方专门解释了此问题是正常现象，为辅助用户存在不合理的副作用函数刻意做的双调用机制。</p>
<p>但有些场景用户的确期望开发时也只产生一次调用（例如组件的数据初始化），于是就有了以下各种花式对抗双调用的方式。</p>
<h3>移除 StrcitMode</h3>
<p>最简单粗暴的方式，就是移除根组件处的<code>StrcitMode</code>包裹，彻底屏蔽此双调用行为。</p>
<pre class="prettyprint language-diff"><code>root.render(
-  &lt;React.StrictMode&gt;
    &lt;App &#x2F;&gt;
-  &lt;&#x2F;React.StrictMode&gt;
);
</code></pre><p>用户可能只需要某些地方无双调用，其他地方需要双调用检查副作用的正确性的话，但此举属于一杆子打死所有场景行为，不太通用。</p>
<h3>局部包裹StrcitMode</h3>
<p><code>StrcitMode</code>除了包裹根组件，也支持包裹任意子组件，用户可以在需要的地方包裹</p>
<pre class="prettyprint language-tsx"><code> &lt;React.StrictMode&gt;&lt;YourComponent &#x2F;&gt;&lt;&#x2F;React.StrictMode&gt;
</code></pre><p>相比全局移除，此方法较为温和，但包裹StrictMode是一个强迫性的行为，需要代码处导出安排哪里需要包裹那里不需要包裹，较为麻烦，有没有既能在根组件包裹<code>StrcitMode</code>又能局部屏蔽双调用机制的方式呢？用户们开始从代码层面入手，准确的说是<code>useEffect</code>回调里入手</p>
<h3>使用useRef标记执行状态</h3>
<p>大体思路是使用<code>useRef</code>记录一个副作用函数是否已执行的状态，让第二次调用被忽略。</p>
<pre class="prettyprint"><code>function Demo(props: any) {
  const isCalled = React.useRef(false);

  React.useEffect(() =&gt; {
    if (isCalled.current === false) {
      await somApi.fetchData();
      isCalled.current = true;
    }
  }, []);
}
</code></pre><p>此举有一定的局限性，就是如果加上依赖后，<code>isCalled</code>无法控制，按思维会副作用清理函数里置<code>isCalled.current</code>为false，这样在组件的存在期过程中变更id值时，尽管有双调用行为也不会打印两次<code>mock api fetch</code></p>
<pre class="prettyprint"><code> React.useEffect(() =&gt; {
    if (isCalled.current === false) {
	    isCalled.current = true;
      console.log(&#x27;mock api fetch&#x27;);
	    return ()=&gt;{
		 isCalled.current = false;
		 console.log(&#x27;clean up&#x27;);
	    };
    }
  }, [id]); &#x2F;&#x2F; id 变更时，发起新的请求
</code></pre><p>但如上写法，在组件首次挂载时还是发生两次调用，打印顺序为</p>
<pre class="prettyprint language-txt"><code>mock api fetch
clean up
mock api fetch
</code></pre><p>有没有真正的完美方案，让基于根组件包裹<code>StricMode</code>时，子组件初次挂载和存在期始终副作用只发生一次调用呢？接下来让<code>helux</code>提供的<code>useEffect</code>来彻底解决此问题吧</p>
<h3>使用helux的useEffect</h3>
<p>我们只要核心理解react双调用的原由：让组件卸载和状态分离，即组件再次挂载时存在期的已有状态会被<strong>还原</strong>，既然有一个还原的过程，那么入手点就很容易了，主要就是观察在组件还原那一刻的运行日志来查找规律。</p>
<p>先标记一个序列自增id当做组件示例id，观察挂载行为针对是哪一个实例</p>
<pre class="prettyprint"><code>let insKey = 0;
function getInsKey() {
  insKey++;
  return insKey;
}

function TestDoubleMount() {
  const [insKey] = useState(() =&gt; getInsKey());
  console.log(&#96;TestDoubleMount ${insKey}&#96;);
  React.useEffect(() =&gt; {
    console.log(&#96;mount ${insKey}&#96;);
    return () =&gt; console.log(&#96;clean up ${insKey}&#96;);
  }, [insKey]);
  return &lt;div&gt;TestDoubleMount&lt;&#x2F;div&gt;;
}
</code></pre><p>可观察到日志如下图，可发现灰色的打印 <code>TestDoubleMount</code> 是react故意发起的第二次调用，副作用都是针对2号示例，1号作为一次冗余的调用被react丢弃掉。</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a615694b11f479b9dd692940d6aeced~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<p>由于id是自增的，react会刻意的对同一个组件发起两次调用，丢弃第一个并针对第二个调用重复执行副作用（mount–&gt;clean–&gt;mount —&gt; 组件卸载后 clean），那么我们在第二个副作用执行时只要检查前一个示例是否存在副作用记录，同时记录第二个副作用的执行次数，就很容易做到屏蔽第二次模式出的副作用了，即（mount–&gt;clean–&gt;mount —&gt; 组件卸载后 clean）被修改为（mount —&gt; 组件卸载后 clean），在组件真正执行卸载时执行设定的clean。</p>
<p>伪代码如下</p>
<pre class="prettyprint language-ts"><code>function mayExecuteCb(insKey: number, cb: EffectCb) {
  markKeyMount(insKey); &#x2F;&#x2F; 记录当前实例id 挂载次数
  const curKeyMount = getKeyMount(insKey); &#x2F;&#x2F; 获取当前实例挂载信息
  const pervKeyMount = getKeyMount(insKey - 1); &#x2F;&#x2F; 获取前一个实例的挂载信息
  if (!pervKeyMount) { &#x2F;&#x2F; 前一个示例无挂载信息则是双调用行为
    if (curKeyMount &amp;&amp; curKeyMount.count &gt; 1) { &#x2F;&#x2F; 当前实例第二次挂载才正在执行用户的副作用函数
      const cleanUp = cb();
      return () =&gt; {
        clearKeyMount(insKey); &#x2F;&#x2F; 清理当前实例挂载信息
        cleanUp &amp;&amp; cleanUp(); &#x2F;&#x2F; 返回清理函数
      };
    }
  }
}
</code></pre><p>在此基础上封装一个<code>useEffect</code>给用户即可达到我们上面说的目的：让基于根组件包裹<code>StricMode</code>时，子组件初次挂载和存在期始终副作用只发生一次调用。</p>
<pre class="prettyprint"><code>function useEffect(cb: EffectCb, deps?: any[]) {
  const [insKey] = useState(() =&gt; getInsKey()); &#x2F;&#x2F; 写为函数避免key自增开销
  React.useEffect(() =&gt; {
    return mayExecuteCb(insKey, cb);
  }, deps);
}
</code></pre><p>如果感兴趣<code>useEffect</code>的具体实现可查看仓库<a href="https://github.com/tnfe/hel/blob/main/packages/helux/src/hooks/useEffect.ts">代码</a></p>
<p>现在你可以像使用原生的<code>useEffect</code>那样使用<code>helux</code>导出的<code>useEffect</code>，同时享受到某些场景不需要双调用检测的好处了。</p>
<pre class="prettyprint language-ts"><code>import { useEffect } from &#x27;helux&#x27;;

useEffect(() =&gt; {
  console.log(&#x27;mock api fetch&#x27;, id);
  return () =&gt; {
    console.log(&#x27;mock clean up&#x27;);
  };
}, [id]); &#x2F;&#x2F; id 变更时，发起新的请求
</code></pre><h3>结语</h3>
<p>了解<code>双调用</code>的设计初衷与流程有助于帮助我们更清晰的理解副作用函数如何治理，同时也可以帮助我们为避免双调用机制做出更好的决策。</p>
<p><a href="https://github.com/tnfe/hel/blob/main/packages/helux">helux</a>属于模块联邦sdk <a href="https://github.com/tnfe/hel">hel-micro</a>子包，初衷是为 react 提供一种更灵活、更低廉成本的状态共享方式，如果你对helux或hel-micro感兴趣，欢迎关注并给予我们更多的改进反馈意见。</p>
</div>

helux 2 发布，助你深度了解副作用的双调用机制

<div class="markdown-text"><p><img src="//static.cnodejs.org/Fg5rNitzL2mSiYAzDadW9o9XIvTy" alt="index.JPG">
<em>首页 (引入侧边栏，全局显示用户的歌单列表)</em></p>
<p><img src="//static.cnodejs.org/Fg3V7-Y2Zr6MBKD_t0WG1kIic-6I" alt="搜索薛之谦.JPG">
<em>搜索&quot;薛之谦&quot;</em></p>
<p><img src="//static.cnodejs.org/Fk9wkSI6nS73Jo4jwfjaorlGqy7h" alt="搜索巴赫旧约.JPG">
<em>搜索&quot;巴赫旧约&quot;</em></p>
<p><img src="//static.cnodejs.org/FnJo-Q2Yp71yR7fmmBtqxx5F0paD" alt="导入狂飙.JPG">
<em>导入专辑 《狂飙》OST</em></p>
<p><img src="//static.cnodejs.org/FkcB-uAPkV_FE8Dy6ZiVAn1507WW" alt="歌词_播放列表.JPG">
<em>歌词 &amp; 播放列表</em></p>
<p><img src="//static.cnodejs.org/FonR7rUdeZAlmb90OQdarKF2Ii-8" alt="artists.png">
<em>Artists</em></p>
<p><strong><a href="https://tonzhon.com">https://tonzhon.com</a></strong>
GitHub: <a href="https://github.com/enzeberg/tonzhon-music">https://github.com/enzeberg/tonzhon-music</a></p>
<p>这个音乐 Web App 现在用上了 <strong>侧边栏</strong>，专门显示用户的歌单列表，并使其保持全局显示，从而强调用户自身的重要性，弱化环境的重要性。“一切以用户为中心”是它的宗旨。</p>
<p>它还把灰色背景改成了白色，把白色卡片改成了灰色线框 (有些左侧边框用上了其他颜色，便于用户区分不同的卡片)…</p>
<p>期待大家的建议~</p>
</div>

这个可以免费听歌的 web app，上线了全新的 UI 和 功能...

<div class="markdown-text"><p>打扰了，更新prisma后，无法下载prisma包
在Prisma@4.14.1中，报not found</p>
<pre class="prettyprint"><code>Downloading Prisma engines for Node-API for rhel-openssl-1.0.x [                    ] 0%
Error: Not Found https:&#x2F;&#x2F;registry.npmmirror.com&#x2F;-&#x2F;binary&#x2F;prisma&#x2F;all_commits&#x2F;d9a4c5988f480fa576d43970d5a23641aa77bc9c&#x2F;rhel-openssl-1.0.x&#x2F;libquery_engine.so.node.gz
</code></pre><p>prisma engine下载类型
schema.prisma</p>
<pre class="prettyprint"><code>generator client {
  provider      = &quot;prisma-client-js&quot;
  output        = &quot;.&#x2F;generated&#x2F;prisma-client-js&quot;
  binaryTargets = [&quot;rhel-openssl-1.0.x&quot;]
}
</code></pre><p>环境变量</p>
<pre class="prettyprint"><code>PRISMA_ENGINES_MIRROR=https:&#x2F;&#x2F;registry.npmmirror.com&#x2F;-&#x2F;binary&#x2F;prisma
</code></pre><p>如果移除这个变量，换成默认<code>https://binaries.prisma.sh</code>则正常，但是这个源被block，你懂得。
但是 Prisma@4.13.0 版本正常，应该是npmirror同步问题，如何解决？</p>
<p>相关问题：
<a href="https://github.com/cnpm/mirrors/issues/248">https://github.com/cnpm/mirrors/issues/248</a>
<a href="https://github.com/prisma/prisma/issues/12662">https://github.com/prisma/prisma/issues/12662</a></p>
</div>

【求助】Prisma@4.14.1在npmmirror上无法下载

<div class="markdown-text"><p>应用内提供了付费免 Key 免梯子，如果有自己的 Key 的话也可以用自己的~
<img src="https://moss.csxq.fun/assets/home-stack-33a12395.png" alt>
个人感觉还是很好用的，尤其是小窗和命令面板</p>
<p>小窗可以在任意位置打开，可以钉在桌面上，交互很流畅
<img src="https://moss.csxq.fun/assets/mini-3c52c0b8.png" alt>
命令面板可以搜索历史消息和会话
<img src="https://moss.csxq.fun/assets/commandPanel-f66b2cbc.png" alt>
还有消息模板、AI 工具箱这些功能
<img src="https://moss.csxq.fun/assets/aiTools-0cf68cf1.png" alt>
<img src="https://moss.csxq.fun/assets/template-459678e2.png" alt>
我也在持续更新应用功能，欢迎大家下载体验！！！
下载地址：<a href="https://mossgpt.fun">https://mossgpt.fun</a></p>
</div>

做了一款桌面端的 ChatGPT 客户端，欢迎大家来体验体验~

最新的一些 Web3 开发相关技术栈更新 && MetaMask 是怎么保存你的钱包秘钥的？

<div class="markdown-text"><p>哈哈，我真是太容易遇到这种困扰了，但是真的不想因为判断个整数，引入一个大库。</p>
<p>需求是这样的，从 url 里取出一个参数 <code>num</code>，我要判断 <code>num</code> 是否为正整数：</p>
<pre class="prettyprint language- js"><code>function is_int(value_raw) {
  const value = parseInt(value_raw)
  return value == value_raw ? value : false
}
</code></pre><p>如果返回 false，那么 <code>value_raw</code> 就不是整数<br>
否则是整数，且返回值就是对应的整数类型的值</p>
<p>看起来比较简洁，但是我担心使用 <code>parseInt(value_str) == value</code> 不够严谨<br>
因此请教一下友友们，不知道有没有什么反例</p>
<p>我已经测试了这些情况：</p>
<pre class="prettyprint language- js"><code>parseInt(&#x27;1&#x27;) == &#x27;1&#x27; &#x2F;&#x2F; true
parseInt(&#x27;-1&#x27;) == &#x27;-1&#x27; &#x2F;&#x2F; true
parseInt(NaN) == NaN &#x2F;&#x2F; false。没错，NaN == NaN 是 false
parseInt(1.1) == 1.1 &#x2F;&#x2F; false
parseInt(&#x27;1.1&#x27;) == &#x27;1.1&#x27; &#x2F;&#x2F; false
parseInt(true) == true &#x2F;&#x2F; false
parseInt(false) == false &#x2F;&#x2F; false
parseInt(&#x27;true&#x27;) == &#x27;true&#x27; &#x2F;&#x2F; false
parseInt(&#x27;false&#x27;) == &#x27;false&#x27; &#x2F;&#x2F; false
</code></pre><p>但是 <code>'1.0'</code> 竟然也是 true，不过需求是判断 <strong>可解析为整数</strong>，所以也不算反例：</p>
<pre class="prettyprint language- js"><code>&#x27;1.0&#x27; == parseInt(&#x27;1.0&#x27;) &#x2F;&#x2F; true 
</code></pre></div>

可不可以使用 num == parseInt(num) 来判断 num 可解析为整数？

<div class="markdown-text"><p>实现了在公众号里接入chatgpt，与其他公众号的接入有以下几点不同：</p>
<p>1.<strong>内置了一些角色</strong>，这些角色已经设置好了提示词，用户可直接使用。比如私人翻译、英语家教、说文解字等。</p>
<p>2.<strong>可以自定义角色</strong>，根据需要自己写提示词</p>
<p>3.<strong>可以语音输入和语音输出</strong>，可以用语音的方式输入和返回结果，</p>
<p>4.<strong>长文本和长语音可以分段输出</strong>，当返回的文本或语音太长时，可以将它们分成多段再发送。</p>
<p>5.<strong>绑定api key</strong>，如果用户自己有api key，可以绑定api key后再使用。</p>
<p><img src="//static.cnodejs.org/Ftyv48555VV7IhJTc2PNtELkccPM" alt="vv2"></p>
<p><strong>编程语言</strong>
用到的技术主要是：nodejs和mysql</p>
<p>扫描下面二维码关注公众号，关注后就可以体验了
<img src="//static.cnodejs.org/FnO9TgqyPSskBmMr3_-h0PZ7Wimn" alt="qrcode_for_gh_10a982e801c1_430.jpg"></p>
</div>

实现了公众号接入ChatGPT

<div class="markdown-text"><p>开源项目地址：<a href="https://github.com/eleme/morjs">https://github.com/eleme/morjs</a>，欢迎试用 ~</p>
<p>喜欢么？或者对您有用？ <a href="https://github.com/eleme/morjs">☞ 立即去 ⭐️ Star ⭐️ 一下 ☞</a></p>
<h1>MorJS 是什么？</h1>
<h3>简介</h3>
<p>Mor (发音为 /mɔːr/，类似 more) 是饿了么开发的<strong>一款</strong> <strong>基于小程序 DSL 的，可扩展的多端研发框架。</strong></p>
<p>使用 MorJS，我们只需书写一套（微信或支付宝）小程序，就可以通过 MorJS 的<strong>转端编译能力</strong>，将源码分别编译出可以发布在不同端（微信/支付宝/百度/字节/钉钉/快手/QQ/淘宝/H5）的产物。MorJS 还支持小程序、小程序插件、小程序分包之间的<strong>形态转换</strong>，同时也配备了从源码到构建产物全阶段的<strong>插件体系</strong>，满足各类功能扩展，提升开发体验和开发效率。</p>
<h3>示例</h3>
<p>以下是饿了么-美食外卖频道在微信、支付宝、抖音小程序及 H5 中的表现：</p>
<p><img src="//static.cnodejs.org/Ft8BJ5QsaNK1u_nBEvmACF6DGKqW" alt="20f90566c7a34ec8a1694c83efd4b303~tplv-k3u1fbpfcp-watermark.jpeg"></p>
<h1>为什么要做 MorJS？</h1>
<p>目前各大平台都相继推出了自己的小程序，饿了么 C 端业务需要在不同平台小程序进行投放，这些项目大多是以支付宝或微信原生 DSL 编写，面对业务渠道的不断增加，我们尝试了多种方法来兼容多端适配，但由于不同平台间小程序代码写法、能力支持的差异性逐步变大，过去的方案无法满足新业务的需求，我们需要一套跨端研发框架能解决以下诉求：</p>
<ul>
<li><strong>原生 DSL 支持</strong>，方便现有小程序 DSL 编写的存量业务使用；</li>
<li><strong>降低性能开销</strong>，尽可能轻运行时，减少编译构建的时长；</li>
<li><strong>便捷的使用</strong>，一键转换为支持各小程序平台使用的产物；</li>
<li><strong>拓展的功能</strong>，提供针对大型复杂小程序的解耦方案；</li>
<li><strong>灵活的配置</strong>，能够简单的增加修改多套不同端的项目配置；</li>
<li><strong>产物优化能力</strong>，压缩构建产物体积，减少小程序包大小；</li>
</ul>
<p>在明确这几点后，我们调研了业界所有主流技术框架，发现并没有能完全满足我们需求的方案，所以我们决定自研 MorJS。</p>
<h1>如何使用？</h1>
<p>MorJS 是基于小程序原生 DSL 进行扩展的，只要你掌握微信或支付宝任意一种小程序，那你就几乎掌握了 MorJS。</p>
<p>MorJS 提供了官方脚手架工具用于创建新项目，同时也支持已有小程序引入相关依赖接入 MorJS。</p>
<h3>开始一个新项目</h3>
<p>MorJS 项目示例：<a href="https://github.com/eleme/morjs/tree/main/examples">https://github.com/eleme/morjs/tree/main/examples</a></p>
<ol>
<li>创建项目，选定项目目录，在目录终端执行以下任一命令：</li>
</ol>
<pre class="prettyprint language-shell"><code>$ npm init mor # npm 创建项目
$ yarn create mor # yarn 创建项目
$ pnpm create mor # pnpm 创建项目
</code></pre><ol>
<li>选择对应的工程类型，按照提示完成初始化操作</li>
</ol>
<pre class="prettyprint language-shell"><code>✔ 请选择工程类型 › 小程序
✔ 请选择源码类型 › 微信小程序 DSL
✔ 是否使用 Typescript … 否 &#x2F; 是
✔ 请选择 CSS 预处理器 › less
✔ 请输入 小程序 的名称 … myapp
✔ 请输入 小程序 的描述 … my first app
✔ 用户名 … yourUserName
✔ 邮箱 … your@gmail.com
✔ 请输入 Git 仓库地址 … https:&#x2F;&#x2F;github.com&#x2F;yourUserName&#x2F;myapp
✔ 请选择 npm 客户端 › npm &#x2F; pnpm &#x2F; yarn
…
</code></pre><ol>
<li>执行编译命令启动项目：</li>
</ol>
<pre class="prettyprint language-shell"><code>$ npm run dev
</code></pre><ol>
<li>多端产物已构建在 <em>dist</em> 目录下，分别用对应平台的 IDE 打开即可开发预览</li>
</ol>
<h3>已有小程序项目接入</h3>
<ol>
<li>在已有项目中添加必要的依赖：</li>
</ol>
<pre class="prettyprint language-shell"><code>$ npm i @morjs&#x2F;cli -D &amp;&amp; npm i @morjs&#x2F;core --save
</code></pre><ol>
<li>在项目根目录下增加配置文件 <em>mor.config.ts</em></li>
</ol>
<pre class="prettyprint language-typescript"><code>import { defineConfig } from &#x27;@morjs&#x2F;cli&#x27;

export default defineConfig([
  &#x2F;&#x2F; 第一套配置: 微信 DSL 编译
  {
    name: &#x27;wx&#x27;,
    sourceType: &#x27;wechat&#x27;, &#x2F;&#x2F; 源码类型: 微信 DSL
    target: &#x27;wechat&#x27;, &#x2F;&#x2F; 编译目标: 微信
    compileMode: &#x27;bundle&#x27;, &#x2F;&#x2F; 编译模式: 打包模式
  },
  &#x2F;&#x2F; 第二套配置: 微信转支付宝
  {
    name: &#x27;ali&#x27;,
    sourceType: &#x27;wechat&#x27;, &#x2F;&#x2F; 源码类型: 微信 DSL
    target: &#x27;alipay&#x27;, &#x2F;&#x2F; 编译目标: 支付宝
    compileMode: &#x27;bundle&#x27;, &#x2F;&#x2F; 编译模式: 打包模式
  },
  &#x2F;&#x2F; 第三套配置: 微信转 Web
  {
    name: &#x27;web&#x27;,
    sourceType: &#x27;wechat&#x27;, &#x2F;&#x2F; 源码类型: 微信 DSL
    target: &#x27;web&#x27;, &#x2F;&#x2F; 编译目标: Web
    compileMode: &#x27;bundle&#x27;, &#x2F;&#x2F; 编译模式: 打包模式
  }
])
</code></pre><ol>
<li>在 <em>package.json</em> 中配置脚本：</li>
</ol>
<pre class="prettyprint language-json"><code>{
  &quot;scripts&quot;: {
+   &quot;dev&quot;: &quot;mor compile -w&quot;,
+   &quot;build&quot;: &quot;mor compile --production&quot;
  }
}
</code></pre><ol>
<li>在项目目录终端下执行编译命令启动项目：</li>
</ol>
<pre class="prettyprint language-shell"><code>$ npm run dev
</code></pre><ol>
<li>多端产物已构建在 <em>dist</em> 目录下，分别用对应平台的 IDE 打开即可开发预览。</li>
</ol>
<h1>MorJS 核心能力</h1>
<h3>多端编译：提供一码多端转换能力</h3>
<p>从诞生之初，MorJS 的一个核心能力就是实现小程序一码多端的转换，让一套代码经过编译后对应的各端产物，分别在多个小程序平台上运行，让开发成本，招聘、管理、测试各方面成本都大幅下降。截止到目前，我们已经支持多数小程序平台的转换。</p>
<p>如果你对多端编译的实现感兴趣，可参见文档<a href="https://mor.eleme.io/guides/introduction/how-mor-works">《MorJS 如何工作》</a></p>
<p><img src="//static.cnodejs.org/Fjw7qsWJRy464xjpEdicZuDotyL9" alt="d1fcd68695014df4957c92467394b2bc~tplv-k3u1fbpfcp-watermark.jpeg"></p>
<h3>集成研发：提供复杂小程序解耦开发能力</h3>
<p>随着业务需求的不断增加，很多小程序项目不可避免的会出现体积巨大化的问题。虽然小程序官方提供了小程序分包、小程序插件的解决方案，但基于同一个小程序代码库，众多分包、插件的迭代情况复杂，实际业务难以解耦。如果你的项目遇到类似的问题，可以使用 MorJS 提供的集成研发能力，把各个分包、插件、模块分成一个个独立的项目，并通过集成研发将小程序宿主和这些子模块通过拉包、编译、构建、合并等一系列处理，合并为一个完整小程序进行开发、调试和部署。</p>
<p>如果你对集成研发的实现感兴趣，可参见文档<a href="https://mor.eleme.io/guides/advance/complex-miniprogram-integration">《复杂小程序集成》</a></p>
<p><img src="//static.cnodejs.org/FkB04_oTjKB_myh44K4iPFBfCgtG" alt="bd1b7d97b5d145b09a81e8a8c787feaf~tplv-k3u1fbpfcp-watermark.jpg"></p>
<h3>形态互转：提供小程序多形态转换能力</h3>
<p>（<strong>如果你的项目没有类似诉求可以跳过本段内容</strong>）随着投放场景的增加，不同业务在不同小程序端的形态可能并不相同。例如一个在支付宝端的小程序应用，在某些场景下希望他以分包的形式接入到微信小程序中。于是让项目在独立小程序、小程序插件、小程序分包应用形态间互相转换成为一个难题。</p>
<p>MorJS 提供的形态一体化能力，可以在尽量减少业务代码修改的前提下，提供<strong>同一个项目在以不同端（微信、支付宝、淘宝、抖音等）不同形态（小程序、小程序插件、小程序分包）间的转换能力。</strong></p>
<p>如果你对形态一体化的实现感兴趣，可参见文档<a href="https://mor.eleme.io/guides/advance/unity-of-forms">《小程序形态互换》</a></p>
<p><img src="//static.cnodejs.org/FpOkt6QmYMm14me4Fp3oMlSgSfOG" alt="4ebd7e68d19d4e7096c0c6a1dbe0a929~tplv-k3u1fbpfcp-watermark.jpg"></p>
<h3>H5 同构：提供小程序 DSL 转 H5 能力</h3>
<p>除了多端多形态的小程序外，不少开发者还面临着 H5 场景的投放。对此， MorJS 提供将小程序项目转换为 Web 项目的能力。这一能力的核心是将小程序转换成一个基于 <strong>React</strong> 的项目产物。无论是整个工程项目的转码、或是单个组件的编译，MorJS 都能够支持。</p>
<p>如果你对转 Web 开发的实现感兴趣，可参见文档<a href="https://mor.eleme.io/web/basic/quickstart">《MorJS Web 开发》</a></p>
<p><img src="//static.cnodejs.org/FlLqIKMy8AEkqG_S-tmrO4qnO7Mn" alt="0e2968712b9e428b960e625a9040261e~tplv-k3u1fbpfcp-watermark.jpg"></p>
<h3>其他</h3>
<p>除此上述核心能力外，MorJS 围绕小程序实现了一系列研发生态能力的建设，包括但不限于以下：</p>
<ul>
<li>条件编译：提供对于多端或不同环境构建产出不同代码的能力，更加灵活的解决不同场景的适配问题；</li>
<li>产物压缩：提供了不同类型文件的最小化兼容压缩方式，并保留配置选项对高级压缩方案的扩展支持；</li>
<li>Mock 能力：提供小程序本地 JSAPI mock 能力，解决开发阶段无法联调接口请求数据的痛点；</li>
<li>…</li>
</ul>
<h1>优势与现状</h1>
<h3>MorJS 的优势</h3>
<p>如你所见，MorJS 是一套基于小程序 DSL (支付宝或微信) 的框架。他的易用性、标准化和灵活性，使得开发者能更好地专注于业务，降低研发、调试成本，提高开发者的工作效率。</p>
<p><img src="//static.cnodejs.org/FtyKgnWy3CVs1stS8hZOA6uh4VAo" alt="4d15f812a67e412fba159948051b53a0~tplv-k3u1fbpfcp-watermark.jpg"></p>
<h3>使用现状</h3>
<p>截止目前，MorJS 支持 4 种编译形态（小程序、小程序插件、小程序分包、H5），支撑了饿了么 C 端大多数业务在各个渠道上的研发和投放。通过 MorJS 的开源，我们期望能把其中的技术细节、架构设计和技术思考呈现给大家，为有类似多端同构需求的企业和开发者服务。</p>
<h1>结语</h1>
<p>MorJS 为饿了么解决了大量业务在多端研发上的差异问题，让小程序开发的重心回到产品业务本身，减少使用者对多端差异兼容的投入，在通过开源让大家更好地了解和使用这项技术的同时，我们也希望能够借此吸引到更多志趣相投的小伙伴参与共建，一起加速小程序一码多端能力的发展。欢迎广大小程序开发者们与我们交流。</p>
<p>以上是对 MorJS 的简单介绍，如果想要详细了解可通过下述方式：</p>
<ul>
<li>GitHub：<a href="https://github.com/eleme/morjs">https://github.com/eleme/morjs</a></li>
<li>官网地址：<a href="https://mor.eleme.io/">https://mor.eleme.io/</a></li>
<li>加入 MorJS 社区服务群：钉钉扫码或搜索群号「29445021084」咨询或了解更多 👇</li>
</ul>
<p><img src="//static.cnodejs.org/FmDw_anol-1QEFSDSxSF8Dev0MdR" alt="O1CN01heyxL41IHacBtHYT1_!!6000000000868-2-tps-828-1068.png"></p>
</div>

饿了么开源自研多端框架 MorJS

<div class="markdown-text"><p>项目地址：<a href="https://github.com/sinajia/express-jwt-session2">https://github.com/sinajia/express-jwt-session2</a>
目标：
把session保存在client端的cookie里面，跟使用redis、MongoDB等保存session info，client端保存key的方案类似。
信息用aes加密，client端base64解码之后也看不到原文。
支持签名。
做成express中间件，用户代码使用req.session得到session。</p>
<p>使用aes加密
使用jwt机制sign和verify</p>
</div>

基于jwt签名的分布式express session中间件

<div class="markdown-text"><p>基于node.js sse-server重构后，现已支持消息stream流式回复。
<strong><a href="https://v.douyin.com/UdKFoHr/">演示视频点这里</a></strong>
微信扫描下方二维码即可下载安装体验
<img src="//static.cnodejs.org/FmX66Rv0t6wbKFRlxVlqBsVqI1TI" alt="二维码 (2).png"></p>
</div>

文丑-ChatGPT客户端 支持消息打字机式回复啦，响应时间毫秒级

<div class="markdown-text"><p>今天打开App突然发现请求全部报错，看了眼服务器发现CPU负载100%，监控内存曲线一直上涨，推测是内存泄露问题，
在代码中加入以下代码：</p>
<pre class="prettyprint"><code>import v8 from &#x27;node:v8&#x27;

process.on(&#x27;warning&#x27;, e =&gt; console.warn(e.stack))

process.on(&#x27;SIGUSR2&#x27;, () =&gt; {
  const fileName = v8.writeHeapSnapshot();
  console.log(&#96;Created heapdump file: ${fileName}&#96;);
})
</code></pre><p>在服务器上新启一个服务，端口换成8999，
启动新服务后，执行</p>
<pre class="prettyprint"><code>kill -SIGUSR2 11044 &#x2F;&#x2F; 新服务的pid
</code></pre><p>打一个测试包，服务器端口换成新服务的8999，不停发请求，
然后执行</p>
<pre class="prettyprint"><code>kill -SIGUSR2 11044 &#x2F;&#x2F; 新服务的pid
</code></pre><p>抓取到新的内存快照。</p>
<p>将两个内存快照下载到本地，用chrome dev tools/ Memory Load进去，对比发现依赖的某个包吃了很多内存
<img src="//static.cnodejs.org/FqI2bOxGcS02ESZEqSaqL07lxSuS" alt="image.png">
在网上搜，果然发现这个依赖包是有问题的
<a href="https://pullanswer.com/questions/always-meet-error-from-atdqbd-tiktoken-and-cause-memory-leak">https://pullanswer.com/questions/always-meet-error-from-atdqbd-tiktoken-and-cause-memory-leak</a>
按教程修改后，memory leak消失：
<img src="//static.cnodejs.org/FnGg8qU9WOfW4hq_r2z6JWi10GBs" alt="image.png"></p>
<p>最后，欢迎大家下载体验我开发的App ChatGPT客户端/文丑App:
<img src="https://imgs.wiki/imgs/2023/05/10/c600e28d54e3ca24.png" alt="image.png"></p>
</div>

记一次排查内存泄露问题

<div class="markdown-text"><p>刚上传了一个自己实现的项目，我已经运行起来了：<a href="https://github.com/sinajia/wechatbot-nodejs">https://github.com/sinajia/wechatbot-nodejs</a>
支持用户在本地电脑扫码登录，接入GPT，让自己的微信自动回复消息。
本项目可以实现：
群聊@回复
私聊回复
特定提问回复
<img src="//static.cnodejs.org/FiJX8l7PeP55gxkY0f7V4TXnpUTT" alt="group.jpg">
todo
后期支持发送图片和gif动画，活跃群气氛。</p>
</div>

微信接入GPT

<div class="markdown-text"><p>hhhhh有点广告</p>
</div>

求扩列，rust react 加我snowmanzzz（wechat）

<div class="markdown-text"><p>上学时喜欢帮同桌找错，一个英文句子如果能找到5处错误，心里就美滋滋的。如今轮到自己写技术文档，面对满篇的中式英语却有心无力。好心的网友，如果开发累了，就摸个鱼🐟，帮我找找错吧，也找回学生时代的感觉</p>
<ul>
<li>原文链接：<a href="https://cabloy.com/articles/how-to-read.html">How to Study CabloyJS</a></li>
</ul>
<p>============ 正文分隔线 ============</p>
<hr>
<h1><strong>How to Study CabloyJS?</strong></h1>
<h2><strong>Document Audiences</strong></h2>
<p>Software development is like building houses and bridges, which can be the towering palaces in the north, the elegant courtyards in the south, and even the precipitous and isolated bridges beyond mountains. Then, different languages and frameworks attract a group of fans by their inherent qualities. They work tirelessly to create different ecosystems and present different development styles and experiences. Just as <code>Rails to Ruby</code>, <code>Lavaral to PHP</code>, <code>Django to Python</code>, and <code>Spring Boot to Java</code>. So, what will be to Javascript? There is no doubt that Javascript faces more usage scenarios, such as front-end, back-end, mobile, IOT, etc. Different scenarios have excellent solutions. Moreover, based on different usage habits, the javascript ecosystem is split into two style systems, which are <code>Javascript</code> and <code>Typescript</code>. So, based on business development, in terms of the current node ecology, we can say that <code>Nest to Typescript</code>, and <code>Cabloy to Javascript</code></p>
<p>Because different languages and frameworks will have different solutions and styles. Therefore, whether you use <code>CabloyJS</code> or not, it is necessary to come in and see what kind of flowers can grow on the soil of sticking to the pure javascript (Vanilla JS). Therefore, whether you are a fan of front-end development, back-end development, full stack development, or other languages, or a technical manager, product manager, or project manager, you can learn different ideas and methods for solving problems from the documents and videos provided by CabloyJS, communicate with each other, learn from each other, and make progress together!</p>
<table>
<thead>
<tr>
<th><strong>Language</strong></th>
<th><strong>Framework</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Ruby</td>
<td>Rails</td>
</tr>
<tr>
<td>PHP</td>
<td>Lavaral</td>
</tr>
<tr>
<td>Python</td>
<td>Django</td>
</tr>
<tr>
<td>Java</td>
<td>Spring Boot</td>
</tr>
<tr>
<td>Typescript</td>
<td>Nest</td>
</tr>
<tr>
<td>Javascript</td>
<td>Cabloy</td>
</tr>
</tbody>
</table>
<h2><strong>What is CabloyJS</strong></h2>
<p>CabloyJS is a NodeJS full-stack framework with workflow engine, a low-code development platform for developers, is also a PAAS platform with both out-of-the-box and flexible-customization. Only one set of codes is needed to realize the admin management system at backend and the applications at frontend at the same time. Only one set of codes is needed to adapt to PC and mobile at the same time, and the mobile is close to the native experience</p>
<h2>Framework styles and design principles of CabloyJS</h2>
<h3>1. Framework styles: <code>brief-but-not-simple</code></h3>
<h3>2. Design principles: <code>out-of-the-box</code> + <code>flexible-customization</code></h3>
<p>Many friends feedback that they are unfamiliar with the concepts of CabloyJS, so they don’t know where to start?</p>
<p>Different languages and architecture concepts determine the style of a framework. In order to create a truly easy-to-use full stack business framework, CabloyJS abstracts and refines the concepts behind the real business requirements, which not only achieves the effect of out-of-the-box, but also can be customized flexibly</p>
<p>Therefore, this also determines that the overall style of CabloyJS framework is: <code>brief-but-not-simple</code>. When you are familiar with this style, you will find that the really comfortable development experience should be like this</p>
<h3>1. Take a case at backend</h3>
<p>If you want to implement the <code>CRUD</code> features, the codes can be designed very simply, and you can even know how to use it without referencing the documents</p>
<blockquote>
<p>We can recall that most of the other backend MVC frameworks or backend API frameworks provide the <code>CRUD</code> features, while often stop there steps here?</p>
</blockquote>
<p>Then, let’s introduce some real business requirements:</p>
<ol>
<li>
<p>Add a <code>draft</code> copy of the data. When we modify the <code>draft</code>, the original data that has been formally submitted will not be affected</p>
</li>
<li>
<p>Add some <code>history</code> copies of the data, so as to record the historical version of the data</p>
</li>
<li>
<p>Add a <code>approval workflow</code>. Business data will be approved after the draft is submitted, and will be transferred to the <code>formal</code> copy only after it is approved</p>
</li>
<li>
<p>Add <code>cms static rendering mechanism</code>: as CRUD are generally managed in the backend, we need to output the data statically for the frontend system to access, and realize the SEO optimization of the website</p>
</li>
<li>
<p>Add <code>category</code> and <code>tag</code> features to facilitate further classification of data</p>
</li>
<li>
<p>For these characteristics mentioned above:</p>
<ol>
<li>
<p>How to refine general concepts</p>
</li>
<li>
<p>How to design the development interface (to achieve the effect of <code>out-of-the-box</code> and <code>flexible-customization</code>)</p>
</li>
<li>
<p>How to configure flexibly (enable or disable some features conveniently). As the saying goes: it is easy to reduce dimensions, but difficult to increase dimensions. We need to have these features first, and then decide whether to enable them according to business requirements</p>
</li>
<li>
<p>How to adapt more business scenarios (rather than only applicable to a certain type of business data), such as blog posts, community posts, leave forms, reimbursement forms, purchase orders, contracts, projects, assets, financial documents, etc.</p>
</li>
</ol>
</li>
<li>
<p>It is doomed that the concept of business data is not simple, but CabloyJS has implemented a brief development interface, which can be used <code>out-of-the-box</code> and <code>flexible-customization</code></p>
</li>
</ol>
<blockquote>
<p>See Also：Bilibili Video：<a href="https://www.bilibili.com/video/BV1yL4y1w7dc/">新建业务表单+审批工作流</a> (Translation Wanted)</p>
</blockquote>
<h3>2. Take a case at frontend</h3>
<ol>
<li>
<p><code>Question</code>: With the popularization and upgrading of mobile devices, a large number of business scenarios need mobile support. Then, how can the admin management system support the mobile devices more elegantly?</p>
</li>
<li>
<p><code>Traditional solution</code>: At present, most of the admin management frameworks on the market are compatible with PC and Mobile by using <code>CSS media query</code></p>
<ol>
<li><code>Disadvantages of the traditional solution</code>: However, the UI interaction experiences of PC and Mobile are different, and the page layouts are different either. Therefore, only relying on <code>CSS media query</code> can only make PC pages available on the Mobile, but it is far from achieving the effect of the native Mobile</li>
</ol>
</li>
<li>
<p><code>New solution</code>: CabloyJS provides a unique  adaptive layout of <code>pc=mobile+pad</code>, so that only one set of codes is needed to adapt to PC and mobile at the same time, and the mobile is close to the native interactive experience</p>
<ol>
<li><code>Advantages of the new solution</code>: This solution also implements the design principle of <code>out-of-the-box</code> + <code>flexible-customization</code>, with the style of <code>brief-but-not-simple</code>. All you need to do is to understand this mechanism by referencing documents or watching videos. The codes required for actual frontend page development will be much less than <code>CSS media query</code></li>
</ol>
</li>
</ol>
<blockquote>
<p>See Also：Bilibili Video: <a href="https://www.bilibili.com/video/BV1St4y1j7kv/">独树一帜的跨端方案：pc=mobile+pad自适应布局</a> (Translation Wanted)</p>
</blockquote>
<h2>Basic Concepts</h2>
<p>It is recommended that you read the following documents to have a preliminary understanding of the basic concepts of CabloyJS</p>
<ul>
<li>
<p><a href="https://cabloy.com/articles/guide-quick-start.html">Quick Start</a></p>
</li>
<li>
<p><a href="https://cabloy.com/articles/module-create.html">Modularization And Create Module</a></p>
</li>
<li>
<p><a href="https://cabloy.com/articles/module-compile.html">Module Compilation and Publish</a></p>
</li>
</ul>
<h2>Basic knowledges</h2>
<p>CabloyJS is based on EggJS, VueJS and Framework7. These underlying framework documents do not have to be read first. CabloyJS provides enough samples and test codes to facilitate rapid development. It is recommended to run CabloyJS project first, and then gradually introduce relevant knowledge as needed</p>
<p>Of course, if you have the knowledges of EggJS and Framework7 in advance, it is easier to understand what innovations and transformations CabloyJS has made on the basis of these two</p>
<ul>
<li>Frontend
<ul>
<li><a href="https://v2.vuejs.org/v2/guide/">Vue2</a></li>
<li><a href="https://v5.framework7.io/">Framework7</a></li>
</ul>
</li>
<li>Backend
<ul>
<li><a href="https://eggjs.org">EggJS</a></li>
</ul>
</li>
</ul>
<h2>Learn through practice</h2>
<p>CabloyJS has many built-in core modules, which encapsulates and implements most of the functions and features commonly used in specific businesses. Therefore, it is recommended that you first create a project, run it, and preview the functions and features provided by CabloyJS. In this way, when you develop your own system, you will know how to refer to the existing paradigm to get twice the result with half the effort</p>
<ul>
<li>See Also: <a href="https://cabloy.com/articles/guide-quick-start.html">Quick Start</a></li>
</ul>
<h2>Free Video Courses</h2>
<p>CabloyJS offers some free video courses. This set of courses is taught by the author of CabloyJS, zhennann. Through on-site coding and actual combat, it takes you into the real scene of NodeJS full stack development, so that you can quickly improve development skills and quickly start the development of various business systems after learning</p>
<ul>
<li>
<p>See Also: <a href="https://course.cabloy.com/zh-cn/articles/A-001.html">A-001: CabloyJS全栈框架：从入门到精通</a> (Translation Wanted)</p>
</li>
<li>
<p>See Also: <a href="https://course.cabloy.com/zh-cn/articles/A-002.html">A-002: CabloyJS全栈框架：功能特性演示</a> (Translation Wanted)</p>
</li>
<li>
<p>See Also: <a href="https://course.cabloy.com/zh-cn/articles/B-001.html">B-001: 微信一起点菜项目进度复盘</a> (Translation Wanted)</p>
</li>
</ul>
<h2>Tutorials</h2>
<p>On the basis of <code>CabloyJS</code> framework, it is very fast and convenient to redevelop specific business modules. From the following <code>tutorials</code> section, you can see what steps are needed to develop a <code>business module</code></p>
<ul>
<li>See Also: <a href="https://cabloy.com/articles/tutorial-introduce.html">Tutorials</a></li>
</ul>
<h2>EggBornJS</h2>
<p>By reading the <code>EggBornJS</code> section, you can understand what features <code>EggBornJS</code> has extended on the basis of <code>EggJS</code> in order to achieve <code>business modularity</code></p>
<ul>
<li>See Also: <a href="https://cabloy.com/articles/eggborn-introduce.html">What is EggBornJS</a></li>
</ul>
<h2>CabloyJS</h2>
<p>By reading the <code>CabloyJS</code> section, you can understand what core modules <code>CabloyJS</code> provides to improve the efficiency and convenience of business development</p>
<ul>
<li>See Also: <a href="https://cabloy.com/articles/cabloy-introduce.html">What is CabloyJS</a></li>
</ul>
<h2>NodeJS Workflow Engine</h2>
<p><code>NodeJS workflow engine</code> is the core component of a business development platform. By reading this chapter, you can understand how CabloyJS’s own workflow engine supports the development of business systems in a simple, flexible and efficient way</p>
<ul>
<li>See Also: <a href="https://cabloy.com/articles/flow-introduce.html">What is NodeJS Workflow Engine</a></li>
</ul>
<h2>Solutions</h2>
<p>Based on CabloyJS, corresponding solutions are implemented for different business scenarios, including:</p>
<ol>
<li>
<p><a href="https://cabloy.com/articles/cms-introduce.html">Cabloy-CMS</a></p>
</li>
<li>
<p><a href="https://cabloy.com/articles/community-introduce.html">Cabloy-Community</a></p>
</li>
<li>
<p><a href="https://cabloy.com/zh-cn/articles/wechat-introduce.html">Cabloy-Wechat</a> (Translation Wanted)</p>
</li>
<li>
<p><a href="https://cabloy.com/zh-cn/articles/wxwork-introduce.html">Cabloy-Wechat Work</a> (Translation Wanted)</p>
</li>
<li>
<p><a href="https://cabloy.com/zh-cn/articles/dingtalk-introduce.html">Cabloy-Dingtalk</a> (Translation Wanted)</p>
</li>
<li>
<p><a href="https://cabloy.com/zh-cn/articles/uniapp-introduce.html">Cabloy-Uniapp</a> (Translation Wanted)</p>
</li>
</ol>
<h2>Test Modules/Suites</h2>
<ul>
<li>
<p><code>test-party</code> : is the test suite of CabloyJS, including a large number of <code>test cases</code> and <code>Kitchen-sink</code></p>
<ul>
<li>See Also: <a href="https://store.cabloy.com/articles/test-party.html">test-party</a></li>
</ul>
</li>
<li>
<p><code>test-flow</code>: is the test module of NodeJS workflow engine, containing a large number of workflow related test cases</p>
<ul>
<li>See Also: <a href="https://store.cabloy.com/articles/test-flow.html">test-flow</a></li>
</ul>
</li>
<li>
<p><code>test-note</code>: is used to demonstrate how to use the Markdown rich text editor</p>
<ul>
<li>See Also: <a href="https://store.cabloy.com/articles/test-note.html">test-note</a></li>
</ul>
</li>
</ul>
<p>These test <code>modules/suites</code> not only facilitate the quick learning of knowledge points in all aspects of CabloyJS, but also provide a large number of code examples to facilitate the rapid start of actual project development. It is strongly recommended that you pay attention to and keep these test <code>modules/suites</code> updated, so as to always obtain the latest sample codes in time</p>
<ul>
<li>
<p>How to install test modules/suites, see also: <a href="https://cabloy.com/articles/cli-store.html">Cabloy Store Cli</a></p>
</li>
<li>
<p>How to disable test modules/suites, see also: <a href="https://cabloy.com/articles/disabled-modules.html">Disable Module/Suite</a></p>
</li>
<li>
<p>How to update test modules/suites, see also: <a href="https://cabloy.com/articles/update-cabloy.html">Update Cabloy</a></p>
</li>
</ul>
<h2>Core Modules</h2>
<p>By reading the source codes of the core modules provided by <code>CabloyJS</code>, you will find that the <code>CabloyJS</code> framework is flexible enough to allow you to deeply customize, replace, and extend the numerous functions and features provided by <code>CabloyJS</code></p>
<ul>
<li>See Also: <a href="https://cabloy.com/articles/modules-list.html">Core Modules</a></li>
</ul>
<h2>Contributions</h2>
<p>Welcome to participate in and contribute to the improvement of the CabloyJS full stack framework, which is also an effective way to learn CabloyJS quickly and deeply</p>
</div>

开发累了就摸个鱼🐟，帮我修改一下中式英语

<div class="markdown-text"><p>技术栈
1、mysql
2、react
3、node框架（koa、fastify，midway）</p>
<p>cool-admin我看过。其他，大家有啥好推荐吗？</p>
<p>接下来打算基于midway，这样做。</p>
<pre class="prettyprint"><code>@Controller(&quot;&#x2F;posts&quot;)
@Crud()
export class PostController extends BaseController&lt;PostService&gt;{

}
</code></pre></div>

最近找了一圈，没有一个好的crud，大家有啥好推荐吗？

<div class="markdown-text"><p>判断一个变量里存的 <strong>是否为基本数据类型</strong></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#primitive_values">mdn 上说</a>:</p>
<blockquote>
<p>All primitive types, except null, can be tested by the typeof operator. typeof null returns “object”, so one has to use === null to test for null.</p>
</blockquote>
<p>那么可不可以这样：</p>
<pre class="prettyprint language- js"><code>function isPrimative(target) {
  return typeof target != &#x27;object&#x27; &amp;&amp; typeof target != &#x27;function&#x27; || target === null
}
</code></pre><p>大家有没有想到什么反例，或更简洁的方式，感谢指导！</p>
</div>

大家伙平时是怎么判断“基本数据类型”的？

<div class="markdown-text"><p>大家好，我是一位93年的前端开发者，最近开源了一款基于Fabric.js + Vue3 开发的Web图形编辑器，它是一个<strong>可以自定义设计模板、设计素材，让开发者快捷的开发出一个图片编辑应用</strong>，类似稿定设计、创客贴设计这样的工具。</p>
<p>这篇笔记的两个目的：</p>
<ol>
<li>介绍开源项目，如果有类似场景大家可直接使用，不再重复开发。</li>
<li>分享开源经历，鼓励和邀请对开源感兴趣的伙伴一起参与进来。</li>
</ol>
<h2>项目介绍</h2>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa746af9a6ee4b05984ae93d4eff989f~tplv-k3u1fbpfcp-zoom-1.image" alt="screenshot-20230415-142257.png"></p>
<p>Github：<a href="https://github.com/nihaojob/vue-fabric-editor">https://github.com/nihaojob/vue-fabric-editor</a></p>
<p>预览：<a href="https://nihaojob.github.io/vue-fabric-editor/">https://nihaojob.github.io/vue-fabric-editor/</a></p>
<h3></h3>
<h3>技术选型：</h3>
<p><strong>项目以Fabric.js 为底层，使用Vue3框架和精致的View UI Plus组件库构建</strong>。
Fabric.js 是业界知名的Canvas工具库，它已经12岁了，在业界得到了广泛的应用和认可；Vue提供更友好的入门曲线，尤其在国内应用更广；希望借助这些优秀的开源项目，<strong>构建底层强大、上手容易、便捷扩展、开箱即用的开源图像编辑器产品</strong>。</p>
<h3>应用场景</h3>
<p>它适用于**海报设计、封面设计、T恤设计、奖状/工卡设计、电子价签设计、印章设计、手机壁纸、PPT设计等场景，**还有更复杂的工业软件场景，如机房拓扑拓展、设备巡检图等。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/867e54383ff847d7931e7cf9e6a04aff~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png">
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5f1268b28694307b3cacc7c57bd3228~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png"></p>
<h3>产品特点</h3>
<p>开源前做了一些调研，已经有一些比较专业的开源编辑器项目，比如知名的SVGEdit项目，它们很强大，类似在线版本的PS，提供给更专业的设计师使用；<strong>vue-fabric-editor的产品定位是给非专业设计人员使用</strong>，例如让没有设计技能的运营同学在模板上简单修改，生成一张在公众号中使用的头图。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f004e7389ae47889a53f16afa815366~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png"></p>
<h3>支持功能</h3>
<ol>
<li>支持导入导出JSON源文件，导出常见的图片PNG、SVG格式。</li>
<li>可自定义设计模板、字体样式模板、自定义分类素材。</li>
<li>元素支持拖拽、组合、层级管理、多种对齐操作。</li>
<li>图片素材支持插入、替换、滤镜、裁剪。</li>
<li>支持形状素材、线条绘制，渐变、边框、透明度、阴影设置。</li>
<li>画布可自定义尺寸、放大缩小、辅助线、标尺功能。</li>
<li>快捷键、右键菜单快捷操作设置。</li>
</ol>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f372975619e64f09a619b4c94e7f5261~tplv-k3u1fbpfcp-zoom-1.image" alt="20230422131548_rec_.gif"></p>
<p>以上就是项目的介绍了，总结一下，<strong>它是一个基于Fabric + Vue3开发的一款开源Web图片编辑器，二次开发简单、扩展便捷、可帮助开发者快速构建一个面向非专业设计人员的图形编辑器</strong>。</p>
<h2>开源经历</h2>
<h3>关于我</h3>
<p>我曾就职于优信二手车，参与过低代码平台的开发，现在一家互联网保险公司工作，参与音视频营销工具、外呼系统的开发，都属于复杂度比较高的前端项目，一直对架构和开源比较感兴趣，也在学习和积累设计模式、架构设计、开源相关的经验。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c025963d7a44b2791c64ed9c748262d~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png">
作为一位已经30岁的开发者，<strong>一直对开源有着强烈的兴趣，但是从未参与过</strong>，于是在好奇心的驱动下发起了这个开源项目。</p>
<h3>项目经历</h3>
<p>最初，我帮朋友实现了一个基于Fabric.js开发的图片生成工具，后面将核心功能抽离并开源到了Github上，投稿到了阮一峰老师的博客，获得了一些关注。</p>
<p>Fabric.js的底层能力非常强大，接口也很灵活，<strong>我最初以为只需要简单的API调用就可以实现一个图片编辑器</strong>，事实上我高估了自己的学习能力，也低估了Fabric.js的强大和灵活。</p>
<p><strong>很多开发者反馈Fabric.js 的文档不太友好</strong>，太过强大和灵活也有一个弊端，那就是细节太多，要实现一个基础功能完整、功能丰富的图编辑器应用并不轻松，<strong>要掌握很多的细节，做很多基础的封装工作</strong>。</p>
<p>我将开发过程发布到了技术社区，结识了很多Fabric.js的开发者。</p>
<ol>
<li><a href="https://juejin.cn/post/7155040639497797645">《使用fabric.js 快速开发一个图片编辑器》</a></li>
<li><a href="https://juejin.cn/post/7199849226745430076">《fabric.js开发图片编辑器的细节实现》</a></li>
<li><a href="https://juejin.cn/post/7222141882515128375">《fabric.js开发图片编辑器可以实现哪些功能？》</a></li>
</ol>
<p>短短几个月的时间，项目**在Github上已经从0涨到1K+ Star，**开源给我带来了新奇的体验。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1695d59d38f4299bddd440984b6513e~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png"></p>
<h3>沉淀</h3>
<p>在和众多的开发者交流后，发现大家都在做同一件事情，重复的开发；大家更期望在<strong>不做太多基础工作的情况下，快速构建一个功能完整、易于扩展的图片编辑应用</strong>。</p>
<p>目前的项目还只是一个前端应用项目，希望未来和社区一起沉淀一个介于Web图片编辑器应用与Fabric.js底层库之间的封装层，<strong>面向应用开发者设计，提供更简单的接口，让开发者可以通过开源SDK，快速构建图片编辑器应用</strong>。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6e8fec15d9844c1af2f2cdd8ba3084e~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png"></p>
<h3>邀请</h3>
<p>开源是很有魅力一件事情，我在Github上结识了很多志同道合的贡献者，<strong>他们是一个个富有热情且有执行力的有趣灵魂</strong>，是他们在深夜付出自己的时间与热爱为项目贡献代码，让不相识的后来人受益，让项目越来越好，<strong>我也从一个开源门外汉，和大家一起成为了开源贡献者</strong>。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecc79fefc06848a8bdae4b7d531d5356~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png">
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0df6172b6ca143a4a77e16dd87f6541f~tplv-k3u1fbpfcp-zoom-1.image" alt="image.png"></p>
<p>这是一个很新的项目和社区，有太多的工作需要做，<strong>如果你对这件事情感兴趣，真诚的邀请你加入，希望我们一起边走边学，在未来一起成为开源世界里的一部分，期待你的加入。</strong></p>
</div>

我的开源项目与开源经历分享

<div class="markdown-text"><h2>关于helux</h2>
<p><a href="https://github.com/tnfe/hel/tree/main/packages/helux">helux</a>是一个鼓励服务注入，并支持响应式变更react的全新数据流方案，它的前身是<a href="https://github.com/concentjs/concent">concent</a>（一个类vue开发体验的高性能状态管理框架），但concent自身因为需要兼容class和function保持一致的语法，且为了对其<code>setup</code>功能，导致内部代码量实在太大，压缩后有<code>70</code>多kb，api暴露得也非常多，导致学习难度急剧上升，为了更符合现在非常流行的<code>DDD</code>围绕业务概念构建领域模型的编码趋势，<code>helux</code>一开始就设计为<code>鼓励服务注入</code>、<code>支持响应式变更</code>、<code>支持依赖收集</code>的轻量级react数据流方案。</p>
<p>它拥有以下优势：</p>
<ul>
<li>轻量，压缩后2kb</li>
<li>简单，仅暴露7个api，高频使用的仅<code>createShared</code>、<code>useObject</code>、<code>useSharedObject</code>、<code>useService</code>4个接口</li>
<li>高性能，自带依赖收集</li>
<li>响应式，支持创建响应式对象，在视图之外变更对象将同步更新视图</li>
<li>服务注入，配合<code>useService</code>接口轻松控制复杂业务逻辑，总是返回稳定的引用，可完全避免<code>useCallback</code>依赖烦扰了</li>
<li>状态提升0改动，所以地方仅需将<code>useObject</code>换为<code>useSharedObject</code>即可提升状态共享到其他组件</li>
<li>避免forwordRef 地狱，内置的<code>exposeService</code>模式将轻松解决父掉子时的<code>ref</code>转发晦涩理解问题和传染性（隔代组件需要层层转发）</li>
<li>ts友好，100% ts 编写，为你提供全方位类型提示</li>
</ul>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88176d2bc14643e8b81d29fd72902a9d~tplv-k3u1fbpfcp-watermark.image?" alt="2.gif"></p>
<blockquote>
<p>该gif图和以下所有api均对应有在线<a href="https://codesandbox.io/s/demo-show-service-dev-mode-ikybly?file=/src/App.tsx">示例1</a>和<a href="https://codesandbox.io/p/sandbox/use-service-to-replace-ref-e5mgr4?file=%2Fsrc%2FApp.tsx">示例2</a>,欢迎fork并修改体验。</p>
</blockquote>
<p>为什么起名<code>helux</code>，虽然内心上我是把它作为<code>concent</code> v3版本去开发的，但因为它的变化实在太大，除了依赖收集不继承任何<code>concent</code>的特性，同时它也是伴随我开发的<a href="https://github.com/tnfe/hel">hel-micro</a>诞生一款作品，我期望它成为 hel-micro 生态的 luxury 级别的贡献，就将 hel-micro 和 luxury 两个词拼一起成为了 <code>helux</code>。</p>
<p>欢迎点星关注<a href="https://github.com/tnfe/hel/tree/main/packages/helux">helux</a>，它虽然较新，但已在我自己的使用场景中发挥功不可没的作用，现已加入hel-micro生态大仓，期待能成为你愿意挑选的一款可心数据流方案。</p>
<h2>快速上手</h2>
<p>极致的简单是helux最大的优势，了解以下6个api后，你可以轻松应付任何复杂场景，最大的魅力在于<code>useSharedObject</code>和<code>useService</code>两个接口，且看如下api介绍，或访问在线<a href="https://codesandbox.io/s/demo-show-service-dev-mode-ikybly?file=/src/App.tsx">示例1</a>和<a href="https://codesandbox.io/p/sandbox/use-service-to-replace-ref-e5mgr4?file=%2Fsrc%2FApp.tsx">示例2</a>fork并修改来体验。</p>
<h3>useObject</h3>
<p>使用 useObject 有两个好处</p>
<ul>
<li>1 方便定义多个状态值时，少写很多 useState</li>
<li>2 内部做了 unmount 判断，让异步函数也可以安全的调用 setState，避免 react 出现警告 :
“Called SetState() on an Unmounted Component” Errors</li>
</ul>
<pre class="prettyprint language-ts"><code>&#x2F;&#x2F; 基于对象初始化一个视图状态
const [state, setState] = useObject({a:1});
&#x2F;&#x2F; 基于函数初始化一个视图状态
const [state, setState] = useObject(()=&gt;({a:1}));
</code></pre><h3>useForceUpdate</h3>
<p>强制更新当前组件视图，某些特殊的场景可以使用它来做视图重刷新</p>
<pre class="prettyprint language-ts"><code>const forUpdate = useForceUpdate();
</code></pre><h3>createSharedObject</h3>
<p>创建一个共享对象，可透传给 <code>useSharedObject</code>，具体使用见 useSharedObject</p>
<pre class="prettyprint"><code>&#x2F;&#x2F; 初始化一个共享对象
const sharedObj = createSharedObject({a:1, b:2});
&#x2F;&#x2F; 基于函数初始化一个共享对象
const sharedObj = createSharedObject(()=&gt;({a:1, b:2}));
</code></pre><h3>createReactiveSharedObject</h3>
<p>创建一个响应式的共享对象，可透传给 useSharedObject</p>
<pre class="prettyprint"><code>&#x2F;&#x2F; 初始化一个共享对象
const [reactiveObj, setState] = createReactiveSharedObject({a:1, b:2});

sharedObj.a = 111; &#x2F;&#x2F; 任意地方修改 a 属性，触发视图渲染
setSharedObj({a: 111}); &#x2F;&#x2F; 使用此方法修改 a 属性，同样也能触发视图渲染，深层次的数据修改可使用此方法
</code></pre><h3>createShared</h3>
<p>函数签名</p>
<pre class="prettyprint"><code>function createShared&lt;T extends Dict = Dict&gt;(
  rawState: T | (() =&gt; T),
  enableReactive?: boolean,
): {
  state: SharedObject&lt;T&gt;;
  call: &lt;A extends any[] = any[]&gt;(
    srvFn: (ctx: { args: A; state: T; setState: (partialState: Partial&lt;T&gt;) =&gt; void }) =&gt; Promise&lt;Partial&lt;T&gt;&gt; | Partial&lt;T&gt; | void,
    ...args: A
  ) =&gt; void;
  setState: (partialState: Partial&lt;T&gt;) =&gt; void;
};
</code></pre><p>创建一个响应式的共享对象，可透传给 useSharedObject，它是<code>createReactiveSharedObject</code>和<code>createSharedObject</code>的结合体，当需要调用脱离函数上下文的服务函数时（即不需要感知组件props时），可使用该接口，第二位参数为是否创建响应式状态，为 true 时效果同 <code>createReactiveSharedObject</code> 返回的 sharedObj</p>
<pre class="prettyprint"><code> const ret = createShared({ a: 100, b: 2 });
 const ret2 = createShared({ a: 100, b: 2 }, true); &#x2F;&#x2F; 创建响应式状态
 &#x2F;&#x2F; ret.state 可透传给 useSharedObject
 &#x2F;&#x2F; ret.setState 可以直接修改状态
 &#x2F;&#x2F; ret.call 可以调用服务函数，并透传上下文
</code></pre><p>以下将举例两种具体的定义服务函数的方式，之后用户便可在其他其他地方任意调用这些服务函数修改共享状态了，如需感知组件上下文，则需要用到下面介绍的<code>useService</code>接口去定义服务函数。</p>
<pre class="prettyprint"><code>&#x2F;&#x2F; 调用服务函数第一种方式，直接调用定义的函数，配合 ret.setState 修改状态
function changeAv2(a: number, b: number) {
   ret.setState({ a, b });
}
*
&#x2F;&#x2F; 第二种方式，使用 ret.call(srvFn, ...args) 调用定义在call函数参数第一位的服务函数
function changeA(a: number, b: number) {
   ret.call(async function (ctx) { &#x2F;&#x2F; ctx 即是透传的调用上下文，
     &#x2F;&#x2F; args：使用 call 调用函数时透传的参数列表，state：状态，setState：更新状态句柄
     &#x2F;&#x2F; 此处可全部感知到具体的类型
     &#x2F;&#x2F; const { args, state, setState } = ctx;
     return { a, b };
   }, a, b);
 }
</code></pre><h3>useSharedObject</h3>
<p>函数签名</p>
<pre class="prettyprint"><code>function useSharedObject&lt;T extends Dict = Dict&gt;(sharedObject: T, enableReactive?: boolean): [
  SharedObject&lt;T&gt;,
  (partialState: Partial&lt;T&gt;) =&gt; void,
]
</code></pre><p>接收一个共享对象，多个视图里将共享此对象，内部有依赖收集机制，不依赖到的数据变更将不会影响当前组件更新</p>
<pre class="prettyprint language-ts"><code>const [ obj, setObj ] = useSharedObject(sharedObj);
</code></pre><p><code>useSharedObject</code>默认返回非响应式状态，如需要使用响应式状态，透传第二位参数为true即可</p>
<pre class="prettyprint language-ts"><code>const [ obj, setObj ] = useSharedObject(sharedObj);
&#x2F;&#x2F; now obj is reactive
 setInterval(()=&gt;{
  state.a = Date.now(); &#x2F;&#x2F; 触发视图更新
 }, 2000);
</code></pre><h3>useService</h3>
<p>函数签名</p>
<pre class="prettyprint"><code>&#x2F;**
 * 使用用服务模式开发 react 组件：
 * @param compCtx
 * @param serviceImpl
 *&#x2F;
function useService&lt;P extends Dict = Dict, S extends Dict = Dict, T extends Dict = Dict&gt;(
  compCtx: {
    props: P;
    state: S;
    setState: (partialState: Partial&lt;S&gt;) =&gt; void;
  },
  serviceImpl: T,
): T &amp; {
  ctx: {
    setState: (partialState: Partial&lt;S&gt;) =&gt; void;
    getState: () =&gt; S;
    getProps: () =&gt; P;
  };
}
</code></pre><p>它可搭配<code>useObject</code>和<code>useSharedObject</code>一起使用，会创建服务对象并返回，该服务对象是一个稳定的引用，且它包含的所有方法也是稳定的引用，可安全方法交给其它组件且不会破会组件的pros比较规则，避免烦恼的<code>useMemo</code>和<code>useCallback</code>遗漏相关依赖</p>
<p>搭配<code>useObject</code>时</p>
<pre class="prettyprint language-ts"><code>function DemoUseService(props: any) {
  const [state, setState] = useObject({ a: 100, b: 2 );
  &#x2F;&#x2F; srv本身和它包含的方法是一个稳定的引用，
  &#x2F;&#x2F; 可安全的将 srv.change 方法交给其它组件且不会破会组件的pros比较规则
  const srv = useService({ props, state, setState }, {
    change(a: number) {
      srv.ctx.setState({ a });
    },
  });
  
  return &lt;div&gt;
    DemoUseService:
    &lt;button onClick={() =&gt; srv.change(Date.now())}&gt;change a&lt;&#x2F;button&gt;
  &lt;&#x2F;div&gt;;
}
</code></pre><p>搭配<code>useSharedObject</code>时，只需替换<code>useObject</code>即可，其他代码不用做任何改变</p>
<pre class="prettyprint language-diff"><code>+ const sharedObj = createSharedObject({a:100, b:2})

function DemoUseService(props: any) {
-  const [state, setState] = useObject({ a: 100, b: 2 );
+  const [state, setState] = useSharedObject(sharedObj);
</code></pre><h4>getState 和 getProps</h4>
<p>因 <code>state</code> 和 <code>props</code> 是不稳定的，所以服务内部函数取的时候需从<code>srv.ctx.getState</code>或<code>srv.ctx.getProps</code></p>
<pre class="prettyprint language-ts"><code>&#x2F;&#x2F; 抽象服务函数
export function useChildService(compCtx: {
  props: IProps;
  state: S;
  setState: (partialState: Partial&lt;S&gt;) =&gt; void;
}) {
  const srv = useService&lt;IProps, S&gt;(compCtx, {
    change(label: string) {
      &#x2F;&#x2F; !!! do not use compCtx.state or compCtx.state due to closure trap
      &#x2F;&#x2F; console.log(&quot;expired state:&quot;, compCtx.state.label);

      &#x2F;&#x2F; get latest state
      const state = srv.ctx.getState();
      console.log(&quot;the latest label in state:&quot;, state.label);
      &#x2F;&#x2F; get latest props
      const props = srv.ctx.getProps();
      console.log(&quot;the latest props when calling change&quot;, props);

      &#x2F;&#x2F; your logic
      compCtx.setState({ label });
    }
  });
  return srv;
}

export function ChildComp(props: IProps) {
  const [state, setState] = useObject(initFn);
  const srv = useChildService({ props, state, setState });
}

 return (
    &lt;div&gt;
      i am child &lt;br &#x2F;&gt;
      &lt;button onClick={() =&gt; srv.change(&#96;self:${Date.now()}&#96;)}&gt;
        change by myself
      &lt;&#x2F;button&gt;
      &lt;h1&gt;{state.label}&lt;&#x2F;h1&gt;;
    &lt;&#x2F;div&gt;
  );
</code></pre><h4>exposeService</h4>
<p>当孩子组件props上透传了<code>exposeService</code>函数时，<code>useService</code> 将自动透传服务对象给父亲组件，是一种比较方便的逃离<code>forwardRef</code>完成父调子的模式</p>
<pre class="prettyprint language-ts"><code>import { ChildSrv, Child } from &quot;.&#x2F;Child&quot;;

function App() {
  &#x2F;&#x2F; 保存孩子的服务
  const childSrv = React.useRef&lt;{ srv?: ChildSrv }&gt;({});
  const seeState = () =&gt; {
    console.log(&quot;seeState&quot;, childSrv.current.srv?.ctx.getState());
  };

  return (
    &lt;div&gt;
      &lt;button onClick={() =&gt; childSrv.current.srv?.change(&#96;${Date.now()}&#96;)}&gt;
        call child logic
      &lt;&#x2F;button&gt;
      &lt;Child
        unstableProp={&#96;${Date.now()}&#96;}
        exposeService={(srv) =&gt; (childSrv.current.srv = srv)}
      &#x2F;&gt;
    &lt;&#x2F;div&gt;
  );
}
</code></pre><h2>结语</h2>
<p><a href="https://github.com/tnfe/hel/tree/main/packages/helux">helux</a>是把<a href="https://github.com/concentjs/concent">concent</a>内部精华全部萃取提炼再加工后的全新作品，期望能得到你的喜欢与鼓励。❤️</p>
</div>

helux，一个鼓励服务注入的响应式react状态库

<div class="markdown-text"><p>最近自己开发了一个图片编辑器，把源码也放在了GitHub上，顺便也总结下使用fabric.js开发一个编辑器需要用到哪些知识点。</p>
<ul>
<li>预览地址：<a href="https://nihaojob.github.io/vue-fabric-editor/">https://nihaojob.github.io/vue-fabric-editor/</a></li>
<li>GitHub地址：<a href="https://github.com/nihaojob/vue-fabric-editor">https://github.com/nihaojob/vue-fabric-editor</a></li>
</ul>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88ca4329b4c24dcea91e624ccadf4127~tplv-k3u1fbpfcp-watermark.image?" alt="Foxmail20220904011310.png"></p>
<h3>架构设计</h3>
<p><strong>选型：</strong> fabric.js 和 konva.js都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些，因为比较熟悉fabric就没有采用konva。</p>
<p><strong>要点：</strong> 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。</p>
<p>我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97d79b361a2549eea30d199e59b36344~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<p>入口文件：
<a href="https://github.com/nihaojob/vue-fabric-editor/blob/161faae7b0adcf6f55d9efaa38cb6d7c6d2c01b5/src/views/HomeView.vue#L113">https://github.com/nihaojob/vue-fabric-editor/blob/161faae7b0adcf6f55d9efaa38cb6d7c6d2c01b5/src/views/HomeView.vue#L113</a></p>
<p>mixins文件：
<a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/mixins/select.js">https://github.com/nihaojob/vue-fabric-editor/blob/main/src/mixins/select.js</a></p>
<h3>初始化</h3>
<p>初始化比较简单，fabric.js创建对象，用EventEmitter创建事件发射器，可订阅单选、多选、取消选择事件。
通过vue的provide语法把fabric对象、EventEmitter对象向下传递，在mixins中保存选中的元素和选中状态。</p>
<p><strong>初始化：</strong>
<a href="https://github.com/nihaojob/vue-fabric-editor/blob/161faae7b0adcf6f55d9efaa38cb6d7c6d2c01b5/src/views/HomeView.vue#L111">https://github.com/nihaojob/vue-fabric-editor/blob/161faae7b0adcf6f55d9efaa38cb6d7c6d2c01b5/src/views/HomeView.vue#L111</a></p>
<p><strong>事件发射器：</strong></p>
<pre class="prettyprint"><code>import EventEmitter from &#x27;events&#x27;

class EventHandle extends EventEmitter {

    init(handler){
        this.handler = handler
        this.handler.on(&quot;selection:created&quot;, (e) =&gt; this._selected(e));
        this.handler.on(&quot;selection:updated&quot;,  (e) =&gt; this._selected(e));
        this.handler.on(&quot;selection:cleared&quot;, (e) =&gt; this._selected(e));
    }

    &#x2F;&#x2F; 暴露单选多选事件
    _selected(e) {
        const actives = this.handler.getActiveObjects()
        if(actives &amp;&amp; actives.length === 1) {
            this.emit(&#x27;selectOne&#x27;, actives)
        }else if(actives &amp;&amp; actives.length &gt; 1){
            this.mSelectMode = &#x27;multiple&#x27;
            this.emit(&#x27;selectMultiple&#x27;, actives)
        }else{
            this.emit(&#x27;selectCancel&#x27;)
        }
    }
}

export default EventHandle
</code></pre><p><strong>mixins:</strong></p>
<pre class="prettyprint"><code>export default {
  inject: [&#x27;canvas&#x27;, &#x27;fabric&#x27;, &#x27;event&#x27;],
  data() {
    return {
      mSelectMode: &#x27;&#x27;, &#x2F;&#x2F; one | multiple
      mSelectOneType: &#x27;&#x27;, &#x2F;&#x2F; i-text | group ...
      mSelectId: &#x27;&#x27;, &#x2F;&#x2F; 选择id
      mSelectIds: [], &#x2F;&#x2F; 选择id
    }
  },
  created(){
    this.event.on(&#x27;selectOne&#x27;, (e) =&gt; {
      this.mSelectMode = &#x27;one&#x27;
      this.mSelectId = e[0].id
      this.mSelectOneType = e[0].type
      this.mSelectIds = e.map(item =&gt; item.id)
    })

    this.event.on(&#x27;selectMultiple&#x27;, (e) =&gt; {
      this.mSelectMode = &#x27;multiple&#x27;
      this.mSelectId = &#x27;&#x27;
      this.mSelectIds = e.map(item =&gt; item.id)
    })

    this.event.on(&#x27;selectCancel&#x27;, () =&gt; {
      this.mSelectId = &#x27;&#x27;
      this.mSelectIds = []
      this.mSelectMode = &#x27;&#x27;
      this.mSelectOneType = &#x27;&#x27;
    })
  },
  methods: {
    &#x2F;**
     * @description: 保存data数据
     * @param {Object} data 房间详情数据
     *&#x2F;
    _mixinSelected({ event, selected }) {
      if(selected.length === 1) {
        const selectItem = selected[0]
        this.mSelectMode = &#x27;one&#x27;
        this.mSelectOneType = selectItem.type
        this.mSelectId = [selectItem.id]
        this.mSelectActive = [selectItem]
      }else if(selected.length &gt; 1){
        this.mSelectMode = &#x27;multiple&#x27;
        this.mSelectActive = selected
        this.mSelectId = selected.map(item =&gt; item.id)
      }else{
        this._mixinCancel()
      }
    },
    &#x2F;**
     * @description: 保存data数据
     * @param {Object} data 房间详情数据
     *&#x2F;
     _mixinCancel(data) {
      this.mSelectMode =&#x27;&#x27;
      this.mSelectId= []
      this.mSelectActive =[]
      this.mSelectOneType = &#x27;&#x27;
    },
  }
}

</code></pre><h3>背景设置</h3>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2286f31ad81545579f8a0a4caf060d60~tplv-k3u1fbpfcp-watermark.image?" alt="背景.gif">
主要包括设置画布大小、设置背景颜色、设置背景图片，也可以设置背景重复方向。
<a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/bgBar.vue">代码：</a></p>
<pre class="prettyprint language-"><code>&#x2F;&#x2F; 设置大小
setSize() {
      this.canvas.c.setWidth(this.width);
      this.canvas.c.setHeight(this.height);
      this.canvas.c.renderAll()
},
&#x2F;&#x2F; 设置背景图片
setBgImg(target) {
      const imgEl = target.cloneNode(true);
      imgEl.onload = () =&gt; {
        &#x2F;&#x2F; 可跨域设置
        const imgInstance = new this.fabric.Image(imgEl, { crossOrigin: &#x27;anonymous&#x27; });
        &#x2F;&#x2F; 渲染背景
        this.canvas.c.setBackgroundImage(imgInstance, this.canvas.c.renderAll.bind(this.canvas.c), {
          scaleX: this.canvas.c.width &#x2F; imgInstance.width,
          scaleY: this.canvas.c.width &#x2F; imgInstance.width,
        });
        this.canvas.c.renderAll()
        this.canvas.c.requestRenderAll();
      }
},
&#x2F;&#x2F; 背景颜色设置
setColor(color) {
      this.canvas.c.setBackgroundColor(color, this.canvas.c.renderAll.bind(this.canvas.c))
      this.canvas.c.backgroundImage = &#x27;&#x27;
      this.canvas.c.renderAll()
}
</code></pre><h3>插入元素</h3>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43d110915d044f91818a238df07bf767~tplv-k3u1fbpfcp-watermark.image?" alt="插入元素.gif">
主要包括插入基础元素文字、正方形、圆形、三角形、SVG元素，详见<a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/tools.vue#L122">代码</a>：</p>
<pre class="prettyprint"><code>addText() {
      const text = new this.fabric.IText(&#x27;万事大吉&#x27;, {
        ...defaultPosition,
        fontSize: 40, id: uuid(),
      });
      this.canvas.c.add(text)
      this.canvas.c.setActiveObject(text);
},
addTriangle() {
      const triangle = new this.fabric.Triangle({
        top: 100,
        left: 100,
        width: 100,
        height: 100,
        fill: &#x27;#92706B&#x27;
      })
      this.canvas.c.add(triangle)
      this.canvas.c.setActiveObject(triangle);
},
</code></pre><p>导入SVG元素时，可以导入SVG文件或者字符串进行导入，调用fabric的loadSVGFromURL、loadSVGFromString方法进行导入，<a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/importSvg.vue">详见代码</a>。</p>
<h3>属性调整</h3>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e780a1c7c0414f0896bf80ca69b4a35c~tplv-k3u1fbpfcp-watermark.image?" alt="属性调整.gif">
不同元素的属性会有差异，但通用属性是一致的，如填充颜色、坐标、旋转角度、透明度等，也有很多特定元素的特定属性，如文字的字体属性、图片的滤镜属性等，<a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/attribute.vue">详见代码</a>。
字体属性可以自定义字体，需要先下载字体后再进行设置，可以通过fontfaceobserver工具库下载指定字体，成功后在设置字体名称。</p>
<pre class="prettyprint"><code>&#x2F;&#x2F; 字体加载
var font = new FontFaceObserver(fontName);
font.load(null, 150000).then(() =&gt; {
    const activeObject = this.canvas.c.getActiveObjects()[0]
    activeObject &amp;&amp; activeObject.set(&#x27;fontFamily&#x27;, fontName);
    this.canvas.c.renderAll()
    this.$Spin.hide();
}).catch((err) =&gt; {
    this.$Spin.hide();
})
</code></pre><h3>元素对齐</h3>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9dd4ffa48d104810b895c82c705701d2~tplv-k3u1fbpfcp-watermark.image?" alt="对齐.gif">
元素对齐区分单选元素与多选元素，单选元素时只支持相对于画布水平、垂直、水平垂直对齐。</p>
<pre class="prettyprint"><code>&#x2F;&#x2F; name为 centerH | centerV | center
position(name){
  const activeObject = this.canvas.c.getActiveObject()
  if(activeObject){
    activeObject[name]()
    this.canvas.c.renderAll()
  }
}
</code></pre><p>多元素对齐有上下左右对齐、水平、垂直对齐，主要是通过获得最边缘元素的坐标，然后进行计算排序，如顶部对齐代码：</p>
<pre class="prettyprint"><code>const activeObject = this.canvas.c.getActiveObject();
  if (activeObject &amp;&amp; activeObject.type === &#x27;activeSelection&#x27;) {
        const activeSelection = activeObject;
        console.log(activeSelection)
        const activeObjectTop = -(activeObject.height &#x2F; 2);
        activeSelection.forEachObject(item =&gt; {
          item.set({
                top: activeObjectTop,
            });
            item.setCoords();
            this.canvas.c.renderAll();
        });
    }
}
</code></pre><p>平均分配会复杂一些，需要计算出边缘与元素间距，再进行设置，<a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/align.vue">详见代码</a>。</p>
<h3>其他用法</h3>
<p>编辑器经常需要给元素进行分组/拆分组合、调整层级、回退、快捷键、画布放大/缩小、导入/导出文件等功能，不再一一罗列，这个小编辑器都已经支持，大家感兴趣的可以看源码。</p>
<ul>
<li><a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/group.vue">组合</a></li>
<li><a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/layer.vue">层级调整</a></li>
<li><a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/plugin/hotkeys.js">快捷键实现</a></li>
<li><a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/zoom.vue">画布放大缩小</a></li>
<li><a href="https://github.com/nihaojob/vue-fabric-editor/blob/main/src/components/save.vue">导入/导出</a></li>
</ul>
<h3>总结</h3>
<p>fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能，比如我的朋友借助我的功能 + 成语接口生成成语图片，在小红书上斩获了八千多的粉丝。</p>
<p>最后希望大家能够通过这个项目学习到fabric.js的基础用法，感兴趣的话可以一起维护这款小编辑器，欢迎star。</p>
<p><a href="https://github.com/nihaojob/vue-fabric-editor">https://github.com/nihaojob/vue-fabric-editor</a></p>
</div>

使用fabric.js 快速开发一个图片编辑器

<div class="markdown-text"><p><a href="https://talk.aliyun.com/live?id=11741877.9369914">https://talk.aliyun.com/live?id=11741877.9369914</a></p>
<p>以上内容仅代表嘉宾个人观点，于2023年2月14日发布于阿里云大咖说，存在一定时效性，仅供学习和参考。</p>
</div>

《狼书(卷3)：Node.js高级技术》视频版本

<div class="markdown-text"><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22d9d33079b840e3aa3d7d0b603139eb~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?" alt></p>
<p>被裁了，最近在摸鱼写文档，这两天研究了下浏览器环境下摆脱 ffmpeg.wasm 实现 GIF 转视频的功能，现在浏览器提供的 API 越来越靠近底层，浏览器在发展个几年可能真没 Electron 啥事了 [狗头] 。</p>
<p>不重复发文了，发掘金了：<a href="https://juejin.cn/post/7221557738537549879">聊聊 WebCodecs 实现 GIF 视频转码</a></p>
<p>欢迎大佬们指教~</p>
</div>

测试Next SSG渲染