什么是惰性函数？

先来看个例子

function addEvent(el, type, handler) {

  if (window.addEventListener) {

    el.addEventListener(type, handler, false);

  } else {

    el.attachEvent('on' + type, handler);

  }

}

上面这段代码中，每次调用 addEvent 都会进行一遍判断。实际上，我们并不需要每次都进行判断，只需要执行一次就够了，当然，我们也可以存个全局的flag来记录，但是，有更好的办法了

function addEvent(el, type, handler) {

  if (window.addEventListener) {

    addEvent = function(el, type, handler) {

      el.addEventListener(type, handler, false);

    }

  } else {

    addEvent = function(el, type, handler) {

      el.attachEvent('on' + type, handler);

    }

  }

  return addEvent(el, type, handler); // 调用新的函数

}

这就是惰性函数：第一次执行时会根据条件覆盖自身，后续调用直接执行更新后的逻辑。

惰性函数的实现方式

惰性函数一般情况下有两种实现方式

在函数内部重写自身

这种实现方式就是上面我们介绍的那样

function foo() {

  console.log('初始化...');

  foo = function() {

    console.log('后续逻辑');

  }

}

大多数情况下，这种实现方式都可以覆盖

用函数表达式赋值

const foo = (function() {

  if (someCondition) {

    return function() { console.log('A'); }

  } else {

    return function() { console.log('B'); }

  }

})();

这种情况适用于模块或者立即执行的情况，其实就是用闭包做了个封装

惰性函数的应用场景

兼容性判断

我们在做适配的时候，很多时候需要进行浏览器特性的判断，比如之前提到的事件绑定

性能优化

其实惰性函数说起来很像单例，他的原理就是只执行一次，那么如果想要避免一些重复操作，尤其是重复初始化，就可以想一下是不是可以用惰性函数来处理，比如Canvas渲染引擎，加载某些外部依赖、判断登录状态等等

注意事项

一句话总结：能判断一次就不要判断两次，惰性函数让你的代码更聪明

Electron 作为将 Web 技术带入桌面应用领域的先驱框架，让无数开发者能够使用熟悉的 HTML、CSS 和 JavaScript 构建跨平台应用。然而，随着应用规模的扩大，Electron 应用的性能问题逐渐显现——内存占用高、启动速度慢、安装包体积庞大，这些都成为了用户体验的绊脚石。不过，现在有了 PakePlus，这些烦恼都将迎刃而解。

PakePlus官网文档：PakePlus

PakePlus开源地址：github.com/Sjj1024/Pak…

首先要轻

以一款基于 Electron 的文档编辑应用为例，在使用 PakePlus 优化前，安装包大小达 200MB，启动时间超过 10 秒。但是使用PakePlus重新打包之后，安装包大小控制在5M左右，缩小了将近40倍！启动时间也做到了2秒以内！这就是PakePLus的魅力所在。

开发者反馈："迁移过程出乎意料的顺利，大部分代码无需修改，性能提升却立竿见影。"

其次都是其次

• 🚀 基于 Rust Tauri，PakePlus 比基于 JS 的框架更轻量、更快。


• 📦 内置丰富功能包——支持快捷方式、沉浸式窗口、极简自定义。


• 👻 PakePlus 只是一个极简的软件，用 Tauri 替代旧的打包方式，支持跨平台桌面，将很快支持手机端。


• 🤗 PakePlus 易于操作使用，只需一个 GitHub Token，即可获得桌面应用。


• 🌹 不需要在本地安装任何复杂的依赖环境，使用 Github Action 云端自动打包。


• 🧑‍🤝‍🧑 支持国际化，对全球用户都非常友好，并且会自动跟随你的电脑系统语言。


• 💡 支持自定义 js 注入。你可以编写自己的 js 代码注入到页面中。


• 🎨 ui 界面更美观更友好对新手更实用，使用更舒适，支持中文名称打包。


• 📡 支持网页端直接使用，但是客户端功能更强大，更推荐客户端。


• 🔐 数据安全，你的 token 仅保存在你本地，不会上传服务器，你的项目也都在你自己的 git 中安全存储。


• 🍀 支持静态文件打包，将 Vue/React 等项目编译后的 dist 目录或者 index.html 丢进来即可成为客户端，何必是网站。


• 🐞 支持 debug 调试模式，无论是预览阶段还是发布阶段，都可以找到 bug 并消灭 bug

使用场景

你有一个网站，想把它立刻变成跨平台桌面应用和手机APP，立刻高大尚。

你有一个 Vue/React 等项目，不想购买服务器，想把它打包成桌面应用。

你的 Cocos 游戏是不是想要跨平台客户端运行？完全没有问题。

你的 Unity 项目是不是想要跨平台打包为客户端？也完全没有问题。

隐藏你的网站地址，不被随意传播和使用，防止爬虫程序获取你的网站内容。

公司内网平台，不想让别人知道你的网站地址，只允许通过你的客户端访问。

想把某个网站变成自己的客户端，实现自定义功能，比如注入 js 实现自动化操作。

网站广告太多？想把它隐藏起来，用无所不能的 js 来屏蔽它们吧。

需要使用 tauri2 打包，但是依赖环境太复杂，本地电脑硬盘不够用，就用 PakePlus

热门包​

PakePLus 支持 arm 和 inter 架构的安装包，流行的程序安装包仅仅包含了 mac 的 arm(M 芯片)版本 和 windows 的 Inter（x64）版本 和 Linux 的 x64 版本，如果需要更多架构的安装包，请使用 PakePlus 单独编译自己需要的安装包。热门包的下载地址请到官方文档下载体验

常见问题

mac提示：应用已随坏​

这是因为没有给苹果给钱，所以苹果会拒绝你的应用。

解决办法：

Mac 用户可能在安装时看到“应用已损坏”的警告。 请点击“取消”，然后运行以下命令，输入电脑密码后，再重新打开应用：(这是由于应用需要官方签名，才能避免安装后弹出“应用已损坏”的提示，但官方签名的费用每年 99 美元...因此，需要手动绕过签名以正常使用)

sudo xattr -r -d com.apple.quarantine /Applications/PakePlus.app

 当你打包应用时，Mac 用户可能在安装时看到“应用已损坏”的警告。 请点击“取消”，然后运行以下命令，再重新打开应用：

sudo xattr -r -d com.apple.quarantine /Applications/你的软件名称.app

引言.我不是鸽子大王！！

哈喽大家好！距离我上次发文已经过去半个月了，差点又变回了那只熟悉的“老鸽子”。不行，我不能堕落！我还没有将 Web3D 推广到普罗大众，还没有让更多人感受到三维图形的魅力 (其实是还没有捞着米)。怀着这样的心情，我决定重新振作，继续为大家带来更多关于 Three.js 和 Shader 的进阶内容。

0.前置条件

欢迎阅读本篇文章！在深入探讨 Three.js 和 Shader (GLSL) 的进阶内容之前，确保您已经具备以下基础知识：

1. Hero Section 概览

Hero Section 是网页设计中的一个术语，通常指页面顶部的一个大型横幅区域。但对于开发人员而言，这个概念可以更直观地理解为用户在访问网站的瞬间所感受到的视觉冲击，或者促使用户停留在该网站的关键原因因素。

话说这天老何接到了一个私活

起始钱不钱的无所谓！主要是想挑战一下自己(不是)。最后的成品如图所示 （互动方式为鼠标滑动 + 鼠标点击 GIF 压缩太多了内容了，实际要好看很多）。

PC端在线预览地址: fluid-light.vercel.app

Debug调试界面: fluid-light.vercel.app/#debug

源码地址: github.com/hexianWeb/f…

2.基础场景搭建

首先我来为你解读一下这个场景里面有什么，他非常简单。只有一个可以接受光照影响的平面几何体以及数个点光源构成，仅此而已。

让我去掉后处理以及一些页面文本元素展示给你看

构建这样的一个基础场景不难。

2.1 构建平面几何体

让我们先来解决平面几何体

值得注意的是，为了让显示效果更好，我使用了正交相机并让平面覆盖整个视窗大小

    this.geometry = new THREE.PlaneGeometry(2 * 屏幕宽高比, 2);

然后构建相应的物理材质，可以去 polyhaven 下载一些自己喜欢的texture 并下载下来。

根据右边的分类选择纹理大类细分，随后选择想要下载的纹理点击下载。

因为我们本质是需要 Displacement Texture置换贴图 & Normal Texture 法线贴图

所以不需要太在意这个纹理是作用在什么物件上面的

随后将纹理导入后赋予材质相应的属性，并对部分参数进行调整。通常直接赋予displacementMap 后 Threejs 中显示平面的凹凸会特别明显。所以记得通过

displacementScale来调整相应的大小。

    this.material = new THREE.MeshPhysicalMaterial({

      color: '#121423',

      metalness: 0.59,

      roughness: 0.41,

      displacementMap: 下载的纹理贴图,

      displacementScale: 0.1,

      normalMap: 下载的法线贴图,

      normalScale: new THREE.Vector2(0.68, 0.75),

      side: THREE.FrontSide

    });

最后将物体加入场景即可

    this.mesh = new THREE.Mesh(this.geometry, this.material);

    scene.add(this.mesh);

(tips:MeshStandardMaterial 和 MeshPhysicalMaterial 适合需要真实感光照和复杂物理特性的场景，但性能消耗较高。如果您的电脑出现卡顿可以选择消耗较少性能的物理材质)

2.2 灯光加入战场

在本案例中，高级感的来源之一就是灯光的变换。如果您足够细心，可能会注意到一些更微妙的细节：场景中的灯光并不是简单地从 A Color 切换到 B Color，而是同时存在多个光源，并且它们的强度也在动态变化。这种设计使得场景的光影效果更加丰富和立体。

如果场景中只有一个光源，效果可能会显得单调。而本案例中，灯光的变化呈现出一种层次感：中间是白色，周围还有一层类似年轮的光圈，最后逐渐扩散为纯色背景。这种效果的关键在于同一时间场景中存在多个点光源。虽然多个光源会显著增加性能消耗，但为了实现唯美的视觉效果，这是值得的。

让我们逐步分析灯光是如何实现的。

1. 封装创建点光源的函数

为了简化代码并提高复用性，我们可以先封装一个创建点光源的函数。这个函数会返回一个包含光源对象和目标颜色的对象。

  createPointLight(intensity) {

    const light = new THREE.PointLight(

      0xff_ff_ff,

      intensity,

      100,

      Math.random() * 10

    );

    light.position.copy(this.lightPosition); //所有的光源都同步在一个位置

    return {

      object: light,

      targetColor: new THREE.Color()

    };

  }

2. 生成多个点光源

接下来，我们可以调用这个函数生成多个点光源，并将它们添加到场景中。

this.colors = [

      new THREE.Color('orange'),

      new THREE.Color('red'),

      new THREE.Color('red'),

      new THREE.Color('orange'),

      new THREE.Color('lightblue'),

      new THREE.Color('green'),

      new THREE.Color('blue'),

      new THREE.Color('blue')

];    

this.lights = [

      this.createPointLight(2),

      this.createPointLight(3),

      this.createPointLight(2.5),

      this.createPointLight(10),

      this.createPointLight(2),

      this.createPointLight(3),

];



// 初始化灯光颜色

const numberLights = this.lights.length;

for (let index = 0; index < numberLights; index++) {

      const colorIndex = Math.min(index, this.colors.length - 1);

      this.lights[index].object.color.copy(this.colors[colorIndex]);

}



for (const light of this.lights) this.scene.add(light.object);

3. 动态调整光源强度

在场景中，所有光源同时存在，但它们的强度会有所不同。每次由光照强度为 10 的光源担任场景的主色。当用户点击场景时，灯光会像上楼梯或者传送带一样逐步切换，即由新的点光源担任场景主色。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa,

8                           8"b,    "Ya

8                           8  "b,    "Ya

8                    aa=D光源=a8,   "b,  "Ya

8                    8"b,    "Ya   "8""""""8

8                    8  "b,    "Ya  8      8

8             a=C光源=8,   "b,    "Ya8      8

8             8"b,    "Ya   "8"""""""      8

8             8  "b,    "Ya  8             8

8      a=B光源=8,   "b,    "Ya8             8

8      8"b,    "Ya   "8"""""""             8

8      8  "b,    "Ya  8                    8

8=A光源=,   "b,    "Ya8                    8

8"b,    "Ya   "8"""""""                    8

8  "b,    "Ya  8                           8

8,   "b,    "Ya8                           8

 "Ya   "8"""""""                           8

   "Ya  8                                  8

     "Ya8                                  8

       """""""""""""""""""""""""""""""""""""

让我们看看代码是如何实现的吧

    window.addEventListener('click', () => {

      // 打乱颜色数组（看个人喜好)

      this.colors = [...this.colors.sort(() => Math.random() - 0.5)];

       // 标记开始颜色过渡

        this.colorTransition = true;



        // 为每个灯光设置目标颜色

        const numberLights = this.lights.length;

        for (let index = 0; index < numberLights; index++) {

          const colorIndex = Math.min(index, this.colors.length - 1);

          this.lights[index].targetColor = this.colors[colorIndex].clone();

        }

    });

然后再Render函数中以easeing方式更新颜色

  update() {

    // 只在需要时更新颜色

    if (this.colorTransition) {

        const numberLights = this.lights.length;

        const baseSmooth = 0.25;

        const smoothIncrement = 0.05;



        let allTransitioned = true; // 检查所有颜色是否已完成过渡



        for (let index = 0; index < numberLights; index++) {

          const smoothTime = baseSmooth + index * smoothIncrement;



          // 使用目标颜色进行平滑过渡

          const currentColor = this.lights[index].object.color;

          const targetColor = this.lights[index].targetColor;



          this.dampC(currentColor, targetColor, smoothTime, delta);



          // 检查是否还在过渡

          if (!this.isColorClose(currentColor, targetColor)) {

            allTransitioned = false;

          }

        }



        // 如果所有颜色都已完成过渡，停止更新

        if (allTransitioned) {

          this.colorTransition = false;

        }

    }

  }

3.后处理完善场景

在完成了场景的基本构建之后，我们已经实现了大约 80% 的内容。即使现在加上 UI，效果也不会太差。不过，为了让场景更具视觉冲击力和艺术感，我们可以通过后处理（Post Processing）技术来进一步提升质感。

使用 UnrealBloomPass 和 FilmPass

在本文中，我们将使用 UnrealBloomPass（辉光效果）和 FilmPass（电影滤镜）来增强场景的视觉效果。以下是具体的实现步骤：

这里的具体参数需要看个人品味进行调试。同款参数可以从这里看我的源码。具体路径位于src\js\world\effect.js

    this.composer = new EffectComposer(this.renderer);

    this.composer.addPass(this.renderPass);

    this.composer.addPass(this.bloomPass);

	this.composer.addPass(this.filmPass);

此时页面的质感是不是一下就上来了呢？

最后我们需要添加最关键的一部，就是画面扭曲。

这里我们需要用到 Threejs 的 ShaderPass,让我们来创建一个初始的ShaderPass,仅将 EffectComposer 的读取缓冲区的图像内容复制到其写入缓冲区，而不应用任何效果。

具体内容你可以从 Threejs 后处理中了解到更多

import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';



const BaseShader = {



	name: 'BaseShader',



	uniforms: {



		'tDiffuse': { value: null },

		'opacity': { value: 1.0 }



	},



	vertexShader: /* glsl */`



		varying vec2 vUv;



		void main() {



			vUv = uv;

			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );



		}`,



	fragmentShader: /* glsl */`



		uniform float opacity;



		uniform sampler2D tDiffuse;



		varying vec2 vUv;



		void main() {



			vec4 texel = texture2D( tDiffuse, vUv );

			gl_FragColor = opacity * texel;





		}`



};



const BasePass = new ShaderPass( BaseShader );

此时画面不会有任何变化

让我们对uv进行简单操纵,让其读取tDiffuse时可以发生扭曲

      vec2 uv = vUv;

      uv.y += sin(uv.x * frequency + offset) * amplitude;

      gl_FragColor = texture2D(tDiffuse, uv);

最后得到效果

4.最后一些话

技术的未来与前端迁移

随着 AI 技术的快速发展，各类技术的门槛正在大幅降低，以往被视为高门槛的 3D 技术也不例外。与此同时，过去困扰开发者的数字资产构建成本问题，也正在被最新的 3D generation 技术所攻克。这意味着，在不久的将来，前端开发将迎来一次技术迁移，开发者需要掌握更新颖的交互方式和更出色的视觉效果。

为什么选择 Three.js？

Three.js 作为最流行的 WebGL 库之一，不仅简化了三维图形的开发流程，还提供了丰富的功能和强大的扩展性。无论是创建复杂的 3D 场景，还是实现炫酷的视觉效果，Three.js 都能帮助开发者快速实现目标。

本专栏的愿景

本专栏的愿景是通过分享 Three.js 的中高级应用和实战技巧，帮助开发者更好地将 3D 技术应用到实际项目中，打造令人印象深刻的 Hero Section。我们希望通过本专栏的内容，能够激发开发者的创造力，推动 Web3D 技术的普及和应用。

加入社区，共同成长

如果您对 Threejs 这个 3D 图像框架很感兴趣，或者您也深信未来国内会涌现越来越多 3D 设计风格的网站，欢迎加入 ice 图形学社区。这里是国内 Web 图形学最全的知识库，致力于打造一个全新的图形学生态体系！您可以在认证达人里找到我这个 Threejs 爱好者和其他大佬。

此外，如果您很喜欢 Threejs 又在烦恼其原生开发的繁琐，那么我诚邀您尝试 Tresjs 和 TvTjs, 他们都是基于 Vue 的 Threejs 框架。 TvTjs 也为您提供了大量的可使用案例，并且拥有较为活跃的开发社区，在这里你能碰到志同道合的朋友一起做开源！

5.下期预告

未来科技？机器人概念官网来袭 ！！！

6. 往期回顾

2025 年了，我不允许有前端不会用 Trae 让页面 Hero Section 变得高级！！！(Threejs)

2024年了，前端人是时候给予页面一点 Hero Section 魔法了！！！ (Three.js)

2023 年了，还有前端人不知道 commit 规范 ？

前言

老板：新的需求不是上线了嘛，怎么用户看到的还是老的页面呀
窝囊废：让用户刷新一下页面，或者清一下缓存
老板：那我得告诉用户，刷新一下页面，或者清一下缓存，才能看到新的页面呀，感觉用户体验不好啊，不能直接刷新页面嘛？
窝囊废：可以解决（OS：一点改的必要没有，用户全是大聪明）

产品介绍

c端需要经常进行一些文案调整，一些老版的文字字眼可能会导致一些舆论问题，所以就需要更新之后刷新页面，让用户看到新的页面。

思考问题为什么产生

项目是基于vue的spa应用，通过nginx代理静态资源，配置了index.html协商缓存，js、css等静态文件Cache-Control,按正常前端重新部署后， 用户重新访问系统，已经是最新的页面。

但是绝大部份用户都是访问页面之后一直停留在此页面，这时候前端部署后，用户就无法看到新的页面，需要用户刷新页面。

产生问题

• 如果后端接口有更新，前端重新部署后，用户访问老的页面，可能会导致接口报错。
• 如果前端部署后，用户访问老的页面，可能无法看到新的页面，需要用户刷新页面，用户体验不好。
• 出现线上bug，修复完后，用户依旧访问老的页面，仍会遇到bug。

解决方案

1. 前后端配合解决

• WebSocket
• SSE(Server-Send-Event)

2. 纯前端方案 以下示例均以vite+vue3为例；

• 轮询html Etag/Last-Modified

在App.vue中添加如下代码

const oldHtmlEtag = ref();

const timer = ref();

const getHtmlEtag = async () => {

  const { protocol, host } = window.location;

  const res = await fetch(`${protocol}//${host}`, {

    headers: {

      "Cache-Control": "no-cache",

    },

  });

  return res.headers.get("Etag");

};



  oldHtmlEtag.value = await getHtmlEtag();

  clearInterval(timer.value);

  timer.value = setInterval(async () => {

    const newHtmlEtag = await getHtmlEtag();

    console.log("---new---", newHtmlEtag);

    if (newHtmlEtag !== oldHtmlEtag.value) {

      Modal.destroyAll();

      Modal.confirm({

        title: "检测到新版本，是否更新？",

        content: "新版本内容：",

        okText: "更新",

        cancelText: "取消",

        onOk: () => {

          window.location.reload();

        },

      });

    }

  }, 30000);

• versionData.json

自定义plugin，项目根目录创建/plugins/vitePluginCheckVersion.ts

import path from "path";

import fs from "fs";

export function checkVersion(version: string) {

  return {

    name: "vite-plugin-check-version",

    buildStart() {

      const now = new Date().getTime();

      const version = {

        version: now,

      };

      const versionPath = path.join(__dirname, "../public/versionData.json");

      fs.writeFileSync(versionPath, JSON.stringify(version), "utf8", (err) => {

        if (err) {

          console.log("写入失败");

        } else {

          console.log("写入成功");

        }

      });

    },

  };

}

在vite.config.ts中引入插件

import { checkVersion } from "./plugins/vitePluginCheckVersion";

plugins: [

  vue(),

  checkVersion(),

]

在App.vue中添加如下代码

const timer = ref()

const checkUpdate = async () => {

  let res = await fetch('/versionData.json', {

    headers: {

      'Cache-Control': 'no-cache',

    },

  }).then((r) => r.json())

  if (!localStorage.getItem('demo_version')) {

    localStorage.setItem('demo_version', res.version)

  } else {

    if (res.version !== localStorage.getItem('demo_version')) {

      localStorage.setItem('demo_version', res.version)

      Modal.confirm({

        title: '检测到新版本，是否更新？',

        content: '新版本内容：' + res.content,

        okText: '更新',

        cancelText: '取消',

        onOk: () => {

          window.location.reload()

        },

      })

    }

  }

}



onMounted(()=>{

  clearInterval(timer.value)

  timer.value = setInterval(async () => {

   checkUpdate()

  }, 30000)

})

• plugin-web-update-notification

Use

// vite.config.ts

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { webUpdateNotice } from '@plugin-web-update-notification/vite'



// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    vue(),

    webUpdateNotice({

      logVersion: true,

    }),

  ]

})

作者：李暖阳啊
来源：juejin.cn/post/7439905609312403483

console.log的弊端

1. 影响性能（轻微但可优化）

console.log 会占用 内存 和 CPU 资源，尤其是在循环或高频触发的地方（如 mousemove 事件）。
虽然现代浏览器优化了 console，但大量日志仍可能导致 轻微性能下降。

2. 暴露敏感信息（安全风险）

可能会 泄露 API 接口、Token、用户数据 等敏感信息，容易被恶意利用。

3. 干扰调试（影响开发者体验）

生产环境日志过多，可能会 掩盖真正的错误信息，增加调试难度。
开发者可能会误以为某些 console.log 是 预期行为，而忽略真正的 Bug。

4. 增加代码体积（影响加载速度）

即使 console.log 本身很小，但 大量日志 会增加打包后的文件体积，影响 首屏加载速度。

解决方案：移除生产环境的 console.log

1. 使用 Babel 插件

在 babel.config.js 中配置：

module.exports = {

  presets: [

    '@vue/cli-plugin-babel/preset',

  ],

  plugins: [

    ['@babel/plugin-proposal-optional-chaining'],

    ...process.env.NODE_ENV === 'production' ? [['transform-remove-console', { exclude: ['info', 'error', 'warn'] }]] : []

  ]

}

特点：

• 不影响源码，仅在生产环境生效，开发环境保留完整 console。


• 配置简单直接，适合快速实现基本需求。


• 依赖 Babel 插件

2. 使用 Terser 压缩时移除（Webpack/Vite 默认支持）

在 vite.config.js 或 webpack.config.js 中配置：

module.exports = {

  chainWebpack: (config) => {

    config.optimization.minimizer("terser").tap((args) => {

      args[0].terserOptions.compress = {

        ...args[0].terserOptions.compress,

        drop_console: true,       // 移除所有 console

        pure_funcs: ["console.log"], // 只移除 console.log，保留其他

      };

      return args;

    });

  },

};

特点：

• 不影响源码，仅在生产环境生效，开发环境保留完整 console。


• 避免 Babel 插件兼容性问题


• 需要额外配置

3. 自定义 console 包装函数（按需控制）

// utils/logger.js

const logger = {

  log: (...args) => {

    if (process.env.NODE_ENV !== "production") {

      console.log("[LOG]", ...args);

    }

  },

  warn: (...args) => {

    console.warn("[WARN]", ...args);

  },

  error: (...args) => {

    console.error("[ERROR]", ...args);

  },

};



export default logger;

使用方式

import logger from "./utils/logger";



logger.log("Debug info"); // 生产环境自动不打印

logger.error("Critical error"); // 始终打印

特点：

• 可以精细控制日志，可控性强，可以自定义日志级别。


• 不影响 console.warn 和 console.error。


• 需要手动替换 console.log

于水增

故事背景

事情起源于之前做的海报编辑器，自己调试时无意中发现字体渲染好慢，第一反应就是网怎么变慢了，断网了？仔细一看才发现，淦！这几个字体资源咋这么大，难怪网速变慢了呢😁😁。

图片中的海报包含6种字体，其中最大的字体文件超过20M，而最长的网络加载时长已接近20s。所以海报实际效果图展示耗时太久，很影响用户体验。那就趁此机会跟大家聊聊 字体 这件小事。

字体文件为什么那么大？

🙋 DeepSeek同学来回答下大家：

这里所说的大体积的字体资源多数是指中文主要原因下边两点

• 中文字符数量庞大，英文仅 26 个字母 + 符号，中文（全字符集）包含 70,000+ 字符


• 字形结构复杂，字体文件需为每个字符存储独立的矢量轮廓数据，而汉字笔画复杂，每个字符需存储数百个控制点坐标（例如「龍」字的轮廓点数量可能是「A」的 10 倍以上）

总结下来就是咱们不光汉字多，书法也是五花八门，它是真小不了。如果你硬要压缩，我们只能从第一点入手，将字符数量进行缩减，比如保留 1000 个常用汉字。

web网站中常见字体格式

由于我司物料部门提供的为TTF格式，所以这里通过 思源黑体 给一个直观的对比：

• TTF 文件：16.9 MB


• WOFF2 文件：7.4 MB（压缩率约 60%）

两者为什么会差这么多，其实WOFF2 只是在 TTF/OTF 基础上添加了压缩和 Web 专用元数据，且WOFF2支持增量解码，也就是边下载边解析，文本可更快显示（即使字体未完全加载，不过有待考证）。

TTF有办法优化吗？

回归问题本身

首先来简单回顾下我们自定义的字体是如何在浏览器中完成渲染的

一般情况下我们对字体文件的引用方式为下边三种

• 通过绝对路径来引用，这种就是将字体文件打包在工程内，所以带来的结果就是工程打包文件体积太大

@font-face {

  font-family: 'xxx';

  src: url('../../assets/fonts.woff2')

}

• 第二种就是 CDN 中存放的字体文件，一般是通过这种方式来减少工程的编译后体积

@font-face {

  font-family: 'xxx';

  src: url('https://xxx.woff2')

}

• 通过 FontFace 构造一个字体对象

前两种一般是在浏览器构建 CSSOM 时，当遇到**<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(243, 243, 243);">url()</font>** 引用时会发起资源请求。第三种则是通过 js 来控制字体的加载流程，所以归根结底就是字体文件太大，导致网络资源下载速度慢，我们只能从优化字体大小的方向入手

确定解决方向

下面汇总下查到的具体几个优化方案，诸如提高网络传输效率，增加缓存之类的就不讲了，能够立竿见影的主要下边这两个方案

简单来说，字体子集化可单独食用，按需加载则必须要将字体前置子集化。才能完美实现按需加载。就我的这个项目而言，动态子集化方案不要太完美，毕竟一张海报本身就没几个字儿！所以我们这次将抛弃 CDN，通过动态的将服务本地中的字体资源子集化来实现字体的压缩效果。

这里我们使用python中的一个字体工具库 fontTools 来实现一个动态子集化，类似于 Google Fonts 的实现。核心思路就是将字符传给服务端，通过工具将传入的字符在本地字体文件中提取并返回给客户端，通过fontTools 还可以将TTF格式转化为和Web更搭的WOFF2格式。实现细节如下述代码所示

@app.route('/font/<font_name>', methods=['GET'])

def get_font_subset(font_name):

    # 获取本地字体文件路径

    font_path = os.path.join(FONTS_DIR, f"{font_name}.ttf")

    # 获取子集字符

    chars = request.args.get('text', '')

    # 字体文件格式

    format = request.args.get('format', 'woff2').lower()



    # 处理字符，去重

    unique_chars = ''.join(sorted(set(chars)))

    try:

        # 配置子集化选项

        options = Options()

        options.flavor = format if format in {'woff', 'woff2'} else 

        options.desubroutinize = True  # 增强兼容性

        subsetter = Subsetter(options=options)

        

        # 加载字体并生成子集

        font = TTFont(font_path)

        subsetter.populate(text=unique_chars)

        subsetter.subset(font)



        # 保存为指定格式

        buffer = io.BytesIO()

        font.save(buffer)

        buffer.seek(0)



        # 确定MIME类型

        mime_type = {

            'woff2': 'font/woff2',

            'woff': 'font/woff',

        }[format]



        # 创建响应并设置

        response = Response(buffer.read(), mimetype=mime_type)

        # 其他设置...

        return response



    except Exception as e:

        # 子集化失败...

前端代码中增加了一些字符提取的工作，我本身就是通过 FontFace Api 来请求字体资源的，所以我仅需将资源链接替换为子集化字体的接口就可以了，下面代码来描述字体的加载过程

// ...其他逻辑

Toast.loading('字体加载中')

// 遍历海报中的字体对象

[...new Set(fontFamilies)].forEach((fontName) => {

  // 在字体库中找到对应字体详细信息

  const obj = fontLibrary.find((el) => el?.value === fontName) ?? {};



  if (obj.value && obj.src) {

    // 处理海报中提取的文案集合

    const text = textMap[obj.value].join('');

    // 构建字体对象

    const font = new FontFace(

      obj.value,

      `url(http://127.0.0.1:5000/font/${obj.value}?text=${text}&format=woff2)`

    );

    // 加载字体

    font.load();

    // 添加到文档字体集中

    document.fonts.add(font);

  }

});

// 文档所有字体加载完毕后返回成功的 Promise

return document.fonts.ready.finally(() => Toast.destory());

好了，刷新下浏览器，来看看最终的效果：

这这 真立竿见影（主要是基数大😁😁），最终得到的结果就是，实际 22.4M 的字体文件，子集化后缩减到 3.6KB。实际效果图生成的时间由 20s+ 缩减到毫秒级（300ms 以内）。这下就无惧网速了吧！

结语

总的来说，优化字体加载的方案有很多，我们需要结合自己的实际业务场景来进行选型，字体子集化确实是一种高效且实用的优化手段，更多的实践思路可以参考下 Google fonts。

Electron实现静默打印小票

静默打印流程

1.渲染进程通知主进程打印

//渲染进程 data是打印需要的数据

window.electron.ipcRenderer.send('handlePrint', data)

2.主进程接收消息,创建打印页面

//main.ts

/* 打印页面 */

let printWindow: BrowserWindow | undefined

/**

 * @Author: yaoyaolei

 * @Date: 2024-06-07 09:27:22

 * @LastEditors: yaoyaolei

 * @description: 创建打印页面

 */

const createPrintWindow = () => {

  return new Promise<void>((resolve) => {

    printWindow = new BrowserWindow({

      ...BASE_WINDOW_CONFIG,

      title: 'printWindow',

      webPreferences: {

        preload: join(__dirname, '../preload/index.js'),

        sandbox: false,

        nodeIntegration: true,

        contextIsolation: false

      }

    })



    printWindow.on('ready-to-show', () => {

      //打印页面创建完成后不需要显示,测试时可以调用show查看页面样式(下面有我处理的样式图片)

      // printWindow?.show()

      resolve()

    })



    printWindow.webContents.setWindowOpenHandler((details: { url: string }) => {

      shell.openExternal(details.url)

      return { action: 'deny' }

    })



    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {

      printWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/print.html`)

    } else {

      printWindow.loadFile(join(__dirname, `../renderer/print.html`))

    }

  })

}



ipcMain.on('handlePrint', (_, obj) => {

   //主进程接受渲染进程消息,向打印页面传递数据

  if (printWindow) {

    printWindow!.webContents.send('data', obj)

  } else {

    createPrintWindow().then(() => {

      printWindow!.webContents.send('data', obj)

    })

  }

})

3.打印页面接收消息，拿到数据渲染页面完成后通知主进程开始打印

<!doctype html>

<html>

<head>

  <meta charset="UTF-8" />

  <title>打印</title>

  <style>

  </style>

</head>



<body>



</body>

<script>

  window.electron.ipcRenderer.on('data', (_, obj) => {

  //这里是接受的消息,处理完成后将html片段放在body里面完成后就可以开始打印了

  //样式可以写在style里,也可以内联

    console.log('event, data: ', obj);

  //这里自由发挥

    document.body.innerHTML = '处理的数据'

  //通知主进程开始打印

    window.electron.ipcRenderer.send('startPrint')

  })

</script>

</html>

这个是我处理完的数据样式,这个就是print.html

4,5.主进程接收消息开始打印,并且通知渲染进程打印状态

ipcMain.on('startPrint', () => {

  //这里如果不指定打印机使用的是系统默认打印机,如果需要指定打印机,

  //可以在初始化的时候使用webContents.getPrintersAsync()获取打印机列表,

  //然后让用户选择一个打印机,打印的时候将打印机名称传过来

  printWindow!.webContents.print(

    {

      silent: true,

      margins: { marginType: 'none' }

      //deviceName:如果要指定打印机传入打印机名称

    },

    (success) => {

      //通知渲染进程打印状态

      if (success) {

        mainWindow.webContents.send('printStatus', 'success')

      } else {

        mainWindow.webContents.send('printStatus', 'error')

      }

    }

  )

})

完毕~

前言

在管理平台中，富文本编辑器是信息输入和内容编辑的重要工具，几乎是必不可少的功能模块。它不仅能帮助用户轻松创建和格式化文档、邮件、模版等内容，还支持多样化的输入方式，提升了内容管理的便捷性和效率。

遇事不决扔个富文本，随心所欲不逾矩

富文本编辑器的实现虽然为用户提供了极大的便利，但其背后的技术复杂度也不容小觑。实现一个全面且高效的富文本编辑器，涉及到跨浏览器兼容性、复杂的格式化操作、多媒体支持等多个技术难题，往往需要花费大量的人力物力。即便如此，富文本编辑器也不可能满足所有用户的需求。不同的用户对功能有着各自的偏好.对于用户来说，选择富文本编辑器时，也需要在功能性与操作便捷性之间进行取舍，找到最适合自己需求的解决方案。

碰到说做一个和word相同功能的富文本的领导，直接上砖头

我认为选择富文本要考虑以下这些重要的功能：

你很难想象竟然有不会英文的客户，强烈要求我们更换富文本编辑器

富文本测评

Tinymce

Tinymce是一个老牌做富文本的公司，文档和插件配置的自由度都不错，也支持自定义拓展。功能强大，可以完全作为用户的首选

免费版如下图所示：

评测一下Tinymce的优缺点：

优点:

缺点:

我司从5.X开始使用，目前已迭代到7.X（UI好看了好多）

不知道怎么选的情况下，选Tinymce肯定没错，当然也不能对Tinymce有太大要求，你会失望的

CKEditor

CKEditor也是一个老牌做富文本的公司， 5.0版本无论是功能还是UI做的相当不错，毫不夸张的说，这是我见过插件最丰富的富文本了

完整版如下图所示:

评测一下CKEditor的优缺点：

优点：

缺点：

最基础的免费版如下：

基于CKEditor的优缺点，推荐复杂文档编辑及格式化的业务使用

白嫖党不推荐，适合人民币玩家

Tiptap

Tiptap是一个模块化的编辑器, 官方解释是tipTap是一个无头编辑器，无头特征决定了完全自由。
自由扩展，自由定义。

它基于Prosemirror，完全可扩展且无渲染。可以轻松地将自定义外观、样式、位置等等

可以像这样:

也可以像这样：

灵活的API，不仅可以让你进行天马行空的布局，各种事件也可以让你用到飞起。作为一个后起之秀，迅速占领市场，赢得了大量客户的好评。真心推荐大家去使用一下！

下面评测一下Tiptap富文本

优点：

缺点:

经查阅资料，tiptap插件支持markdown格式，感谢 李里_lexy 和 imber的指正

想要多人协作的，不要考虑了：用它，用它，用它！

Quill

我司最开始使用的一款富文本。配置简单，UI也还不错。中文文档丰富，一天的时间就可以集成到项目中。

评测一下Quill的优缺点

优点:

缺点：

全局改样式的时候，从控制台中取一下html代码，然后全局替换一下忍忍也就算了。随着图片上传后，文档排版越来越麻烦，真的不能忍了。只能宣布这个富文本的倒计时了！

适合对图片没有太多需求，并且对文档没有太大格式需求的公司

个人开发蛮推荐的

wangEditor

国产之光，个人能做成这个样子，我还是由衷的佩服的。

有兴趣的掘友们可以看下为什么都说富文本编辑器是天坑?。觉得自己还可以的掘友可以试着做做下面这两个小功能？

不要小看这个小功能，我敢打赌，95%的程序员至少一周的时间或者压根做不出来

赌一包辣条，立贴为证

好了，回到正题。我们评测一下wangEditor富文本

优点:

缺点:

首先向wangEditor开源作者双越老师表示敬意，因为开源想盈利太不容易了，基本都是为爱发电

不考虑移动端的，并且不介意暂停维护的可以使用

否则直接pass吧，用Jodit或者wangEditor-next替代吧

wangEditor-next

wangEditor-next的作者cycleccc在简介中这样写道：

wangeditor 因作者个人原因短期不再维护，wangEditor-next为fork版本,将在尽量不 Breaking change 的前提下继续维护。

此外，wangEditor-next也不再是个人单打独斗了，开始多人团队协作。最近几个月更新也很频繁，近3000次commit也能看出该团队的活跃度和持续产出，这种高频次的更新不仅反映了团队对用户反馈的响应速度，确保项目能够持续迭代并满足用户需求。

期待wangEditor-next能够在开源和盈利中找到平衡点，期待国人的产品能够获得广泛认可，为用户提供优质的体验。

Jodit

免费版功能如下:

白嫖党的福音

大招:收费版来了

在原有的基础上又增加了以下实用的功能

一次性付费99$（一个项目），399$（无限项目）即可解锁，我觉得超值

相比于wangEditor，我更推荐Jodit。无论是免费版，还是付费版，都值得拥有和尝试

Editor.js

Editor也是一个模块化编辑器。与Tiptap有很多相似之处，如模块化设计，可拓展性等等。这里不详细展开了，主要说一下两个编辑器的不同点:

Editor默认使用JSON格式的数据，更易于展示和分析，除非有强烈需求，否则慎选

Slate

引用一下原文:

Slate是一个 完全 可定制的富文本编辑器框架。

Slate 让你构建像 Medium, Dropbox Paper或者是 Google Docs(它们正成为web应用的标杆)这样丰富，直观的编辑器，而不会让你在代码实现上深陷复杂度的泥潭。

文档介绍的很酷，但目前是beta版本，且仍没有计划发布正式版。我没有用过，不做过多的评价，有兴趣的可以自己去体验一下

开源项目，没有大公司的支持，完全是自愿奉献。30k的star用户默默的支持，期待早日发布

很酷的架构设计，推荐大家去体验一下，期待Slate的早日发布

medium-editor

一款轻量级的编辑器，压缩后约为28KB, 除了工具栏可以显示在文本上方，支持内联编辑外，我没有找到其他的优点。4年没有更新, 插件拓展非常不友好。对不起这16K的star

如果你喜欢这种编辑方式，还可以体验一下。除此外，直接Pass

Squire

又是一款轻量级的编辑器，压缩完才11.5kb，相对于其它的富文本来说是非常的小了，推荐功能不复杂的场景使用

轻量级的编辑器，相较于medium-editor更符合用户习惯，推荐功能不复杂的场景使用

UEditor

看到上面这个图片，估计很多用户直接就断绝了使用的想法吧。确实，UI设计的真不好看，不符合当今的审美。可是在小10年前，用百度UEditor的比比皆是，只能说此一时彼一时。

我们评测一下UEditor富文本

优点:

缺点:

不吐槽了，直接用省略号吧。祭奠我的青春

久远的富文本，官方已经不维护了，不推荐使用

UEditor Plus

UEditor Plus 是基于 UEditor 二次开发的富文本编辑器

让人诟病的UI风格终于焕新了，还算在我的审美点上了，简单评测一下

优点：

缺点：

试用了1天，总给我不踏实的感觉，担心某一天又不维护了

编辑器的功能体验不是很好，有些功能是为了功能而功能，真心希望提升一下用户体验

Summernote

一款韩国人做的开源编辑器。基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项，乍一看，页面挺清新简洁的。但使用下来非常让人之气愤。用户提的bug和优化项目完全不理，格式化也是做的很差劲。搞不懂11k的star是怎么出来的

不推荐用。除非你喜欢用hook去擦屁股

lexical

Facebook出品的编辑器，大厂出品，值得信赖。

lexical是draft-js的升级版。由于draft-js只作维护，不做开发。整体功能已迁移到Lexical新框架。

github这样写道：

该项目目前处于维护模式。它不会收到任何功能更新，只会收到关键的安全漏洞补丁。2022 年 12 月 31 日，该仓库将完全归档。

对于寻找开源替代方案的用户，Meta 一直致力于迁移到一个名为Lexical的新框架。它仍处于实验阶段，我们正在努力添加迁移指南，但我们相信，它提供了一种更高效、更易于访问的替代方案。

样式见上图，很清爽，很漂亮。多而不乱，我蛮喜欢的。

功能上也很强大，图片拖拽、表格拖拽、导入导出，分享，还能进行涂鸦，绘图。还可以选中文本设置文本样式，同时还能对文本进行评论...功能上没得说，由于React是 Facebook的亲儿子，lexical也是基于React的编辑器 。虽然可以在vue上用，但官方支持主要集中在 React 上，因此在 Vue 中的集成需要额外处理一些兼容性问题。违背了我们选择不依赖框架语言的初衷。因此将lexical放在最后，不做过多的评价，也不会放在简评中。只是让我们多了解一下，尤其是React用户，可以作为备选方案

但要注意：Lexical 不支持 Internet Explorer 或旧版本的 Edge。需要兼容IE以及Edge浏览器的业务就不要选了

Facebook出品，可以作为React全家桶使用

简评

强烈推荐

Tinymce: 不知道怎么去选的时候，就用Tinymce！不求有功，但求无过

CKEditor: 文档格式化内容众多，追求使用效率，并且土豪公司或者人民币玩家就用它

Tiptap: 喜欢diy样式的，追求美观和别具一格的开发者首选

Jodit: 一次性付款，你值得拥有

比较推荐

Quill: 集成简单，小项目够用，大项目不推荐

wangEditor: 国人之光

wangEditor-next: wangEditor的升级版，持续迭代，持续为您服务

Editor: 存储，解析JSON数据的首选，其他慎选

Slate: 很棒的架构设计，期待早上发布

UEditor Plus: 基于 UEditor 二次开发的富文本编辑器，UI和功能都做了升级，初步体验还是蛮不错的，个人建议还是要慎用

不推荐

UEditor: 百度的烂尾项目，不够打了

Squire: 轻量级编辑器，格式文本还是可以的

Summernote: 韩国佬开发的项目，大爷级别的，反人类，还不搭理你

medium-editor 除了在文档上方显示，找不到其他的优点

总结

优秀的富文本编辑器不仅要页面美观，而且要格式化功能强大，使用方便快捷。非技术用户也能轻松排版、编辑、上传多媒体内容，从而提升管理平台的整体易用性和用户体验。因此，选择合适的富文本编辑器，不仅关系到内容生产的效率，更直接影响到平台的用户满意度和运营效果。

同时，我们也要认识到，不可能有一个编辑器能百分百满足我们的需求，理解开发富文本编辑器是一个巨难，且很难盈利的项目。只能尽可能的满足我们的痛点，在使用体验和需求功能上找到一个平衡点，权衡选择。

最后，祝开发找到适合自己公司的编辑器，早日脱坑

参考资料

大家好，我是徐徐。今天我们来认识认识 Electron。

前言

其实一直想系统的写一写 Electron 相关的文章，之前在掘金上写过，但是现在来看那些文章都写得挺粗糙的，所以现在我决定系统整理相关的知识，输出自己更多 Electron 开发相关的经验。这一节我们主要是来认识一下 Electron，这个已经有 10 年历史的跨端开发框架。我将从诞生背景，优劣势，生态，案例以及和其他框架的对比这几个方面带大家来认识 Electron。

Electron 诞生背景

Electron 的背景还是很强劲的，下面我们就来看看它是如何诞生的。

起源

Electron 的前身 Atom Shell，由 GitHub 的开发者在 2013 年创建的，当时 Atom 需要一个能够在桌面环境中运行的跨平台框架，同时能够利用 web 技术构建现代化的用户界面，于是就有了 Electron 的雏形。

需求 & Web 技术的发展

互联网的兴起使得桌面端的需求日益增长，传统的桌面应用开发需要针对每个操作系统（Windows、macOS、Linux）分别编写代码，这增加了开发和维护成本，所以非常需要可以通过一次开发实现多平台支持的框架。

随着 HTML5、CSS3 和 JavaScript 的快速发展，web 技术变得越来越强大和灵活。开发者希望能够利用这些技术构建现代化的用户界面，并且享受 web 开发工具和框架带来的便利。这使得更加需要一款跨端大杀器架来支持开发者，Electron 应运而生。

发展历程

• 2013 年：Atom Shell 诞生，最初用于 GitHub 的 Atom 编辑器。


• 2014 年 2 月：Atom 编辑器对外发布，Atom Shell 作为其核心技术。


• 2015 年 4 月：Atom Shell 更名为 Electron，并作为一个独立项目发布。随着时间的推移，Electron 的功能和社区支持不断增强。


• 2016 年：Electron 的应用开始广泛传播，许多公司和开发者开始使用 Electron 构建跨平台桌面应用。


• 2020 年：Electron 发布 10.0 版本，进一步增强了稳定性和性能。


• 2023 年：Electron 10 周年

更多可以参考：

http://www.electronjs.org/blog/electr…

Electron 优势

Electron 的优势非常的明显，大概总结为下面四个方面。

跨平台支持

Electron 的最大优势在于其跨平台特性。开发者可以编写一次代码，Electron 会处理不同操作系统之间的差异，使应用能够在 Windows、macOS 和 Linux 上无缝运行。

前端技术栈

Electron 应用使用 HTML、CSS 和 JavaScript 构建界面。开发者可以使用流行的前端框架和工具（如 React、Vue.js、Angular）来开发应用，提高开发效率和代码质量。

Node.js 集成

Electron 将 Chromium 和 Node.js 集成在一起，这使得应用不仅可以使用 web 技术构建界面，还可以使用 Node.js 访问底层系统资源，如文件系统、网络、进程等。

强大社区

Electron 拥有丰富的文档、教程、示例和强大的社区支持。开发者可以很容易地找到解决问题的方法和最佳实践，从而加快开发速度。

Electron 劣势

当然，一个东西都有两面性，有优势肯定也有劣势，劣势大概总结为以下几个方面。

性能问题

Electron 应用由于需要运行一个完整的 Chromium 实例，通常会占用较高的内存和 CPU 资源，性能相对较差。这在资源有限的设备上（如老旧计算机）尤为明显。

打包体积大

由于需要包含 Chromium 和 Node.js 运行时，Electron 应用的打包体积较大。一个简单的 Electron 应用的打包体积可能达到几十到上百 MB，这对于一些应用场景来说是不小的负担。

安全性

Electron 应用需要处理 web 技术带来的安全问题，如跨站脚本（XSS）攻击和远程代码执行（RCE）漏洞。开发者需要特别注意安全性，采取适当的防护措施（如使用 contextIsolation、sandbox、Content Security Policy 等）。

生态

上面谈到了 Electron 的优势和劣势，下面我们来看看 Electron 的生态。对于一款开源框架，生态是非常关键的，社区活跃度以及相应的配套工具非常影响框架的生态，如果有众多的开发者支持和维护这个框架，那么它的生态才会越来越好。Electron 的生态依托于 Node.js 发展出了很多很多开源工具，其生态是相当的繁荣。下面可以看看两张图就知道其生态的繁荣之处。

• GitHub 情况

• NPM 情况

下面是一些常见的相关生态工具。

打包和分发工具

• electron-packager：用于将 Electron 应用打包成可执行文件。支持多平台打包，简单易用。


• electron-builder：一个功能强大的打包工具，支持自动更新、多平台打包和安装程序制作。

测试工具

• Spectron：基于 WebDriver，用于 Electron 应用的端到端测试。支持模拟用户操作和验证应用行为。


• electron-mocha：用于在 Electron 环境中运行 Mocha 测试，适合进行单元测试和集成测试。

开发工具

• Electron Forge：一个集成开发工具，简化了 Electron 应用的开发、打包和分发流程。支持脚手架、插件系统和自动更新。


• Electron DevTools：调试和分析 Electron 应用性能的工具，帮助开发者优化应用性能。

案例

用 Electron开发的软件非常多，国内外都有很多知名的软件，有了成功的案例才会吸引更多的开发者使用它，下面是一些举例。

国内

• QQ


• 微信开发者工具


• 百度网盘


• 语雀


• 网易灵犀办公


• 网易云音乐

国外

• Visual Studio Code


• Slack


• Discord


• GitHub Desktop


• Postman


• WhatsApp

其他更多可参考：http://www.electronjs.org/apps

一个小技巧，Mac 电脑检测应用是否是 Electron 框架，在命令行运行如下代码：

for app in /Applications/*; do;[ -d  $app/Contents/Frameworks/Electron\ Framework.framework ] && echo $app; done

和其他跨端框架的对比

一个框架的诞生避免不了与同类型的框架对比，下面是一个对比表格，展示了 Electron 与其他流行的跨端桌面应用开发框架（如 NW.js、Proton Native、Tauri 和 Flutter Desktop）的优缺点和特性：

结语

Electron 是一个强大的跨平台开发框架，其诞生对前端开发者的意义非常大，让很多从事前端的开发者也有机会开发桌面客户端，扩大了前端开发工程师的岗位需求。当然，它不一定是最好的框架，因为适合自己的才是最好的，主要还是看自己的业务场景和技术需要，优势和劣势都是需要考虑的，仁者见仁，智者见智。

AI应用已经渗透到我们生活的方方面面。其中，AI对话系统因其自然、流畅的交流方式而备受瞩目。前段时间有人在交流群中问到，如何实现AI对话中那种逐字输出的效果，这背后，流式返回技术发挥了关键作用。

欢迎加入前端筱园交流群：点击加入交流群

​ 其实这背后并不是前端做了什么特效，而是采用的流式返回，而不是一次性返回完整的响应。流式返回允许服务器在一次连接中逐步发送数据，而不是一次性返回全部结果。这种方式使得前端可以在等待完整响应的过程中，逐步展示生成的内容，从而极大地提升了用户体验。

​ 那么，前端接收流式返回具体有哪些方式呢？接下来，本文将详细探讨几种常见的技术手段，帮助读者更好地理解并应用流式返回技术。

使用 Axios

大多数场景下，前端用的最多的就是axios来发送请求，但是axios 只有在在Node.js环境中支持设置 responseType: 'stream' 来接收流式响应。

const axios = require('axios');

const fs = require('fs');



axios.get('http://localhost:3000/stream', {

    responseType: 'stream', // 设置响应类型为流

})

    .then((response) => {

        // 将响应流写入文件

        response.data.pipe(fs.createWriteStream('output.txt'));

    })

    .catch((error) => {

        console.error('Stream error:', error);

    });

特点

• 仅限 Node.js：浏览器中的 axios 不支持 responseType: 'stream'。


• 适合文件下载：适合处理大文件下载。

使用 WebSocket

WebSocket 是一种全双工通信协议，适合需要双向实时通信的场景。

前端代码：

const socket = new WebSocket('ws://localhost:3000');



socket.onopen = () => {

    console.log('WebSocket connected');

};

socket.onmessage = (event) => {

    console.log('Received data:', event.data);

};

socket.onerror = (error) => {

    console.error('WebSocket error:', error);

};

socket.onclose = () => {

    console.log('WebSocket closed');

};

服务器代码

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });



wss.on('connection', (ws) => {

    console.log('Client connected');



    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ws.send(JSON.stringify({ message: 'Hello', counter }));



        if (counter >= 5) {

            clearInterval(intervalId);

            ws.close();

        }

    }, 1000);



    ws.on('close', () => {

        console.log('Client disconnected');

        clearInterval(intervalId);

    });

});

虽然WebSocket作为一种在单个TCP连接上进行全双工通信的协议，具有实时双向数据传输的能力，但AI对话情况下可能并不选择它进行通信。主要有以下几点原因：

• 在AI对话场景中，通常是用户向AI模型发送消息，模型回复消息的单向通信模式，WebSocket的双向通信能力在此场景下并未被充分利用


• 使用WebSocket可能会引入不必要的复杂性，如处理双向数据流、管理连接状态等，也会增加额外的部署与维护工作

特点

• 双向通信：适合实时双向数据传输


• 低延迟：基于 TCP 协议，延迟低


• 复杂场景：适合聊天、实时游戏等复杂场景

使用 XMLHttpRequest

虽然 XMLHttpRequest 不能直接支持流式返回，但可以通过监听 progress 事件模拟逐块接收数据

const xhr = new XMLHttpRequest();

xhr.open('GET', '/stream', true);



xhr.onprogress = (event) => {

    const chunk = xhr.responseText; // 获取当前接收到的数据

    console.log(chunk);

};



xhr.onload = () => {

    console.log('Request complete');

};



xhr.send();

服务器代码（Koa 示例）：

router.get("/XMLHttpRequest", async (ctx, next) => {

    ctx.set({

        "Content-Type": "text/event-stream",

        "Cache-Control": "no-cache",

        Connection: "keep-alive",

    });

    // 创建一个 PassThrough 流

    const stream = new PassThrough();

    ctx.body = stream;

    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ctx.res.write(

            JSON.stringify({ message: "Hello", counter })

        );



        if (counter >= 5) {

            clearInterval(intervalId);

            ctx.res.end();

        }

    }, 1000);



    ctx.req.on("close", () => {

        clearInterval(intervalId);

        ctx.res.end();

    });

});

可以看到以下的输出结果，在onprogress中每次可以拿到当前已经接收到的数据。它并不支持真正的流式响应，用于AI对话场景中，每次都需要将以显示的内容全部替换，或者需要做一些额外的处理。

如果想提前终止请求，可以使用 xhr.abort() 方法；

setTimeout(() => {

    xhr.abort();

}, 3000);

特点

• 兼容性好：支持所有浏览器。


• 非真正流式：XMLHttpRequest 仍然需要等待整个响应完成，progress 事件只是提供了部分数据的访问能力。


• 内存占用高：不适合处理大文件。

使用 Server-Sent Events (SSE)

SSE 是一种服务器向客户端推送事件的协议，基于 HTTP 长连接。它适合服务器向客户端单向推送实时数据

前端代码：

const eventSource = new EventSource('/sse');



eventSource.onmessage = (event) => {

    console.log('Received data:', event.data);

};



eventSource.onerror = (event) => {

    console.error('EventSource failed:', event);

};

服务器代码（Koa 示例）：

router.get('/sse', (ctx) => {

    ctx.set({

        'Content-Type': 'text/event-stream',

        'Cache-Control': 'no-cache',

        'Connection': 'keep-alive',

    });



    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ctx.res.write(`data: ${JSON.stringify({ message: 'Hello', counter })}\n\n`);



        if (counter >= 5) {

            clearInterval(intervalId);

            ctx.res.end();

        }

    }, 1000);



    ctx.req.on('close', () => {

        clearInterval(intervalId);

        ctx.res.end();

    });

});

EventSource 也具有主动关闭请求的能力，在结果没有完全返回前，用户可以提前终止内容的返回。

// 在需要时中止请求

setTimeout(() => {

    eventSource.close(); // 主动关闭请求

}, 3000); // 3 秒后中止请求

虽然EventSource支持流式请求，但AI对话场景不使用它有以下几点原因：

• 单向通信


• 仅支持 get 请求：在 AI 对话场景中，通常需要发送用户输入（如文本、文件等），这需要使用 POST 请求


• 无法自定义请求头：EventSource 不支持自定义请求头（如 Authorization、Content-Type 等），在 AI 对话场景中，通常需要设置认证信息（如 API 密钥）或指定请求内容类型

注意点

返回给 EventSource 的值必须遵循 data: 开头并以 \n\n 结尾的格式，这是因为 Server-Sent Events (SSE) 协议规定了这种格式。SSE 是一种基于 HTTP 的轻量级协议，用于服务器向客户端推送事件。为了确保客户端能够正确解析服务器发送的数据，SSE 协议定义了一套严格的格式规范。SSE 协议规定，服务器发送的每条消息必须遵循以下格式：

field: value\n

其中 field 是字段名，value 是对应的值。常见的字段包括：

• data:：消息的内容（必须）。


• event:：事件类型（可选）。


• id:：消息的唯一标识符（可选）。


• retry:：客户端重连的时间间隔（可选）。

每条消息必须以 两个换行符 (\n\n) 结尾，表示消息结束

以下是一个完整的 SSE 消息示例：

id: 1\n

event: update\n

data: {"message": "Hello", "counter": 1}\n\n

特点

• 单向通信：适合服务器向客户端推送数据。


• 简单易用：基于 HTTP 协议，无需额外协议支持。


• 自动重连：EventSource 会自动处理连接断开和重连

使用 fetch API

fetch API 是现代浏览器提供的原生方法，支持流式响应。通过 response.body，可以获取一个 ReadableStream，然后逐块读取数据。

前端代码：

// 发送流式请求

fetch("http://localhost:3000/stream/fetch", {

    method: "POST",

    signal,

})

    .then(async (response: any) => {

        const reader = response.body.getReader();

        while (true) {

            const { done, value } = await reader.read();

            if (done) break;

            console.log(new TextDecoder().decode(value));

        }

    })

    .catch((error) => {

        console.error("Fetch error:", error);

    });

服务器代码（Koa 示例）：

router.post("/fetch", async (ctx) => {

    ctx.set({

        "Content-Type": "text/event-stream",

        "Cache-Control": "no-cache",

        Connection: "keep-alive",

    });

    // 创建一个 PassThrough 流

    const stream = new PassThrough();

    ctx.body = stream;

    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ctx.res.write(JSON.stringify({ message: "Hello", counter }));



        if (counter >= 5) {

            clearInterval(intervalId);

            ctx.res.end();

        }

    }, 1000);



    ctx.req.on("close", () => {

        clearInterval(intervalId);

        ctx.res.end();

    });

});

fetch也同样可以在客户端主动关闭请求。

// 创建一个 AbortController 实例

const controller = new AbortController();

const { signal } = controller;

// 发送流式请求

fetch("http://localhost:3000/stream/fetch", {

    method: "POST",

    signal,

})

    .then(async (response: any) => {

        const reader = response.body.getReader();

        while (true) {

            const { done, value } = await reader.read();

            if (done) break;

            console.log(new TextDecoder().decode(value));

        }

    })

    .catch((error) => {

        console.error("Fetch error:", error);

    });



// 在需要时中止请求

setTimeout(() => {

    controller.abort(); // 主动关闭请求

}, 3000); // 3 秒后中止请求

打开控制台，可以看到在Response中可以看到返回的全部数据，在EventStream中没有任何内容。

这是由于返回的信息SSE协议规范，具体规范见上文的 Server-Sent Events 模块中有介绍到

ctx.res.write(

    `data: ${JSON.stringify({ message: "Hello", counter })}\n\n`

);

但是客户端fetch请求中接收到的数据也包含了规范中的内容，需要前端对数据进一步的处理一下

特点

• 原生支持：现代浏览器均支持 fetch 和 ReadableStream。


• 逐块处理：可以实时处理每个数据块，而不需要等待整个响应完成。


• 内存效率高：适合处理大文件或实时数据。

总结

综上所述，在 AI 对话场景中，fetch 请求 是主流的技术选择，而不是 XMLHttpRequest 或 EventSource。以下是原因和详细分析：

• fetch 是现代浏览器提供的原生 API，基于 Promise，代码更简洁、易读


• fetch 支持 ReadableStream，可以实现流式请求和响应


• fetch 支持自定义请求头、请求方法（GET、POST 等）和请求体


• fetch 结合 AbortController 可以方便地中止请求


• fetch 的响应对象提供了 response.ok 和 response.status，可以更方便地处理错误

最后来看一个接入deekseek的完整例子：

resource.dengzhanyong.com/mp4/7823928…

服务器代码（Koa 示例）：

const openai = new OpenAI({

    baseURL: "https://api.deepseek.com",

    apiKey: "这里是你申请的deepseek的apiKey",

});





// 流式请求 DeepSeek 接口并流式返回

router.post("/fetchStream", async (ctx) => {

    // 设置响应头

    ctx.set({

        "Content-Type": "text/event-stream",

        "Cache-Control": "no-cache",

        Connection: "keep-alive",

    });



    try {

        // 创建一个 PassThrough 流

        const stream = new PassThrough();

        ctx.body = stream;



        // 调用 OpenAI API，启用流式输出

        const completion = await openai.chat.completions.create({

            model: "deepseek-chat", // 或 'gpt-3.5-turbo'

            messages: [{ role: "user", content: "请用 100 字介绍 OpenAI" }],

            stream: true, // 启用流式输出

        });

        // 逐块处理流式数据

        for await (const chunk of completion) {

            const content = chunk.choices[0]?.delta?.content || ""; // 获取当前块的内容

            ctx.res.write(content);

            process.stdout.write(content); // 将内容输出到控制台

        }

        ctx.res.end();

    } catch (err) {

        console.error("Request failed:", err);

        ctx.status = 500;

        ctx.res.write({ error: "Failed to stream data" });

    }

});

前端代码：

const controller = new AbortController();

const { signal } = controller;

const Chat = () => {

    const [text, setText] = useState<string>("");

    const [message, setMessage] = useState<string>("");

    const [loading, setLoading] = useState<boolean>(false);



    function send() {

        if (!message) return;

        setText(""); // 创建一个 AbortController 实例

        setLoading(true);



        // 发送流式请求

        fetch("http://localhost:3000/deepseek/fetchStream", {

            method: "POST",

            headers: {

                "Content-Type": "application/json",

            },

            body: JSON.stringify({

                message,

            }),

            signal,

        })

            .then(async (response: any) => {

                const reader = response.body.getReader();

                while (true) {

                    const { done, value } = await reader.read();

                    if (done) break;

                    const data = new TextDecoder().decode(value);

                    console.log(data);

                    setText((t) => t + data);

                }

            })

            .catch((error) => {

                console.error("Fetch error:", error);

            })

            .finally(() => {

                setLoading(false);

            });

    }



    function stop() {

        controller.abort();

        setLoading(false);

    }



    return (

        <div>

            <Input

                value={message}

                onChange={(e) => setMessage(e.target.value)}

            />

            <Button

                onClick={send}

                type="primary"

                loading={loading}

                disabled={loading}

            >

                发送

            </Button>

            <Button onClick={stop} danger>

                停止回答

            </Button>

            <div>{text}</div>

        </div>

    );

};

写在最后

欢迎加入前端筱园交流群：点击加入交流群

关注我的公众号【前端筱园】，不错过每一篇推送

electron+node-serialport串口通信

公司项目需求给客户开发一个能与电子秤硬件通信的Win7客户端，提供数据读取、处理和显示功能。项目为了兼容win7使用了electron 22.0.0版本,串口通信使用了serialport 12.0.0版本

serialport文档 electron文档

 //serialport的基本使用方法

 //安装 npm i serialport

 import { SerialPort } from 'serialport'

 SerialPort.list()//获取串口列表

 /** 创建一个串口连接

     path（必需）：串口设备的路径。例如，'/dev/robot' 或 'COM1'。

     baudRate（必需）：波特率，即每秒传输的比特数。常见值有 9600、19200、38400、57600、115200 等。

     autoOpen（可选）：是否在创建对象时自动打开串口。默认为 true。如果设置为 false，你需要手动调用 port.open() 来打开串口。

     dataBits（可选）：每字节的数据位数。可以是 5、6、7、8。默认值是 8。

     stopBits（可选）：停止位的位数。可以是 1 或 2。默认值是 1。

     parity（可选）：校验位类型。可以是 'none'、'even'、'odd'、'mark'、'space'。默认值是 'none'。

     rtscts（可选）：是否启用硬件流控制（RTS/CTS）。布尔值，默认值是 false。

     xon（可选）：是否启用软件流控制（XON）。布尔值，默认值是 false。

     xoff（可选）：是否启用软件流控制（XOFF）。布尔值，默认值是 false。

     xany（可选）：是否启用软件流控制（XANY）。布尔值，默认值是 false。

     highWaterMark（可选）：用于流控制的高水位标记。默认值是 16384（16KB）。

     lock（可选）：是否锁定设备文件，防止其他进程访问。布尔值，默认值是 true。

 **/

 const serialport = new SerialPort({ path: '/dev/example', baudRate: 9600 })

 

 serialport.open()//打开串口

 serialport.write('ROBOT POWER ON')//向串口发送数据

 serialport.on('data', (data) => {//接收数据

    //data为串口接收到的数据

 })

获取串口列表

 //主进程main.ts

 import { SerialPort, SerialPortOpenOptions } from 'serialport'

 //初始化先获取串口列表,提供给页面选择

 ipcMain.on('initData', async () => {

   const portList = await SerialPort.list()

   mainWindow.webContents.send('initData', {portList})

 })

 //渲染进程

 window.electron.ipcRenderer.once('initData', (_,{portList}) => {

   //获取串口列表后存入本地,登录页直接做弹窗给客户选择串口,配置波特率

   window.localStorage.setItem('portList', JSON.stringify(portList))

 })

串口选择

波特率配置

读取数据

公司秤和客户的秤串口配置不一样,所以做了model1和model2区分

 //主进程main.ts

 let P: SerialPort | undefined

 ipcMain.on('beginSerialPort', (_, { path, baudRate }) => {

   //区分配置

   const portConfig: SerialPortOpenOptions<AutoDetectTypes> =

     import.meta.env.VITE_MODE == 'model1'

       ? {

           path: path || 'COM1',

           baudRate: +baudRate || 9600, //波特率

           autoOpen: true,

           dataBits: 8

         }

       : {

           path: path || 'COM1',

           baudRate: +baudRate || 115200, //波特率

           autoOpen: true,

           dataBits: 8,

           stopBits: 1,

           parity: undefined

         }

   if (P) {

     P.close((error) => {

       if (error) {

         console.log('关闭失败：', error)

       } else {

         P = new SerialPort(portConfig)

         P?.write('SIR\r\n', 'ascii')//告诉秤端开始发送信息,具体看每个秤的配置,有的不需要

         P.on('data', (data) => {

           //接收到的data为Buffer类型,直接转为字符串就可以使用了

           mainWindow.webContents.send('readingData', data.toString())

         })

       }

     })

   } else {

     P = new SerialPort(portConfig)

     P?.write('SIR\r\n', 'ascii')

     P.on('data', (data) => {

       mainWindow.webContents.send('readingData', data.toString())

     })

   }

 })

解析数据

 <!--渲染进程解析数据-->

 <template>

   <div class="weight-con">

     <div class="weight-con-main">

       <div>

         <el-text class="wei-title" type="primary">毛<br />重</el-text>

       </div>

       <div class="weight-panel">

         <el-text id="wei-num">{{ weightNum!.toFixed(2) }}</el-text>

         <div class="weight-con-footer">当前最大称重：600公斤</div>

       </div>

       <div>

         <el-text class="wei-title" type="primary">公<br />斤</el-text>

       </div>

     </div>

   </div>

 </template>

 ​

 <script setup lang="ts">

 import { weightModel } from '@/utils/WeightReader'

 const emits = defineEmits(['zeroChange'])

 const weightNum = defineModel<number>()

 window.electron.ipcRenderer.on('readingData', (_, data: string) => {

   //渲染进程接收到主进程数据,根据环境变量解析数据

   weightNum.value = weightModel[import.meta.env.VITE_MODE](data)

   if (weightNum.value == 0) {

     emits('zeroChange')

   }

 })

 </script>

 //weightReader.ts 解析配置

 export type Mode = 'model1' | 'model2'

 let str = ''

 export const weightModel = {

   model1: (weightStr: string) => {

     const rev = weightStr.split('').reverse().join('')

     return +rev.replace('=', '')

   },

   module2: (weightStr: string) => {

     str += weightStr

     if (str.match(/S\s+[A-Za-z]\s*(-?\d*.?\d+)\s*kg/g)) {

       const num = str.match(/S\s+[A-Za-z]\s*(-?\d*.?\d+)\s*kg/m)![1]

       str = ''

       return Number(num)

     } else {

       return 0

     }

   }

 }

完活~下班!

相信大家都跟我一样有这样一个疑问：之前都说虚拟DOM是为了性能，怎么现在又反向宣传了？无虚拟DOM怎么又逆流而上成为了性能的标杆了呢？

下篇文章我们会仔细分析无虚拟DOM与虚拟DOM之间的区别，本篇文章我们先看数据。首先是体积，由于没有了虚拟DOM以及vDOM diff算法，所以体积肯定能小不少。当然不是说无虚拟DOM就彻底不需要diff算法了，我看过同为无虚拟DOM框架的Svelte和Solid源码，无虚拟DOM只是不需要vDOM间的Diff算法，列表之间还是需要diff的。毕竟再怎么编译，你从后端获取到的数组，编译器也不可能预测得到。

那么官方给出的数据是：

虽然没有想象中的那么多，但33.6%也算是小不少了。当然这个数据指的是纯Vapor模式，如果你把虚拟DOM和Vapor混着用的话，体积不仅不会减小反而还会增加。毕竟会同时加载Vapor模式的runtime和虚拟DOM模式的runtime，二者一相加就大了。

Vapor模式指的就是无虚拟DOM模式，如果你不太清楚二者之间有何关联的话，可以看一眼这篇：《无虚拟DOM版Vue为什么叫Vapor》

那性能呢？很多人对体积其实并不敏感，觉得多10K少10k都无所谓，毕竟现在都是5G时代了。所以我们就来看一眼官方公布的性能数据：

从左到右依次为：

• 原生JS：1.01


• Solid：1.09


• Svelte：1.11


• 无虚拟DOM版Vue：1.24


• 虚拟DOM版Vue：1.32


• React：1.55

数字越小代表性能越高，但无论再怎么高都不可能高的过手动优化过的原生JS，毕竟无论什么框架最终打包编译出来的还是JS。不过框架的性能其实已经挺接近原生的了，尤其是以无虚拟DOM著称的Solid和Svelte。但无虚拟DOM版Vue和虚拟DOM版Vue之间并没有拉开什么很大的差距，1.24和1.32这两个数字证明了其实二者的性能差距并不明显，这又是怎么一回事呢？

一个原因是Vue3本来就做了许多编译优化，包括但不限于静态提升、大段静态片段将采用innerHTML渲染、编译时打标记以帮助虚拟DOM走捷径等… 由于本来的性能就已经不错了，所以可提升的空间自然也没多少。

看完上述原因肯定有人会说：可提升的空间没多少可以理解，那为什么还比同为无虚拟DOM的Solid和Svelte差那么多？如果Vapor和Solid性能差不多的话，那可提升空间小倒是说得过去。但要是像现在这样差的还挺多的话，那这个理由是不是就有点站不住脚了？之所以会出现这样的情况是因为Vue Vapor的作者在性能优化和快速实现之间选择了后者，毕竟尤雨溪第一次公布要开始做无虚拟DOM版Vue的时间是在2020年：

而如今已经是2025年了。也就是说如果一个大一新生第一次满心欢喜的听到无虚拟DOM版Vue的消息后，那么他现在大概率已经开始毕业工作了都没能等到无虚拟DOM版Vue的发布。这个时间拖的有点太长了，甚至从Vue2到Vue3都没用这么久。

可以看到Vue3从立项到发布也就不到两年的时间，而Vapor呢？从立项到现在已经将近5年的光阴了，已经比Vue3所花费的时间多出一倍还多了。所以现在的首要目标是先实现出来一版能用的，后面再慢慢进行优化。我们工作不也是这样么？先优先把功能做出来，优化的事以后再说。那么具体该怎么优化呢：

现在的很多渲染逻辑继承自原版Vue3，但无虚拟DOM版Vue可以采用更优的渲染逻辑。而且现在的Vapor是跟着原版Vue的测试集来做的，这也是为了实现和原版Vue一样的行为。但这可能并不是最优解，之后会慢慢去掉一些不必要的功能，尤其是对性能产生较大影响的功能。

往期精彩文章：

• 《尤雨溪：从Vue1到Vue3.6》


• 《无虚拟DOM版Vue为什么叫Vapor？》

先弄清楚leaflet和天地图充当的角色

• leaflet是用来在绘制、交互地图的


• 天地图是纯粹用来当个底图的，相当于在leaflet中底部的一个图层而已


• 进行Marker打点、geojson绘制等操作都是使用leaflet实现

1. 使用天地图当底图

• 在token处填自己的token


• 我这里用的是天地图的影像底图，如果需要可自行更换或添加底图


• 天地图底图网址：lbs.tianditu.gov.cn/server/MapS…


• 只用替换我代码里的天地图链接里的http://{s}.tianditu.com/img_c/里的img_c为我图中圈起来的编号，其他不用动

const token = "填自己的天地图token";

// 底图

const VEC_C ="http://{s}.tianditu.com/img_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";

// 文字标注

// const CVA_C = "http://{s}.tianditu.com/cia_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";

let map = L.map("map", {

  minZoom: 3,

  maxZoom: 17,

  center: [34.33213, 109.00945],

  zoomSnap: 0.1,

  zoom: 3.5,

  zoomControl: false,

  attributionControl: false,

  crs: L.CRS.EPSG4326,

});

L.tileLayer(VEC_C + token, {

  zoomOffset: 1,

  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],

  opacity: 0.2,

}).addTo(map);

// 添加文字标注

// L.tileLayer(CVA_C + token, {

//   tileSize: 256,

//   zoomOffset: 1,

//   subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],

// }).addTo(map);

2. 绘制中国地图geojson

• 这里我需要国的边界和省的边界线颜色不一样，所以用了一个国的geojson和另一个包含省的geojson叠加来实现


• 获取geojson数据网站：datav.aliyun.com/portal/scho…

L.geoJson(sheng, {

 style: {

    color: "#0c9fb8",

    weight: 1,

    fillColor: "#028297",

    fillOpacity: 0.1,

  },

}).addTo(map);

L.geoJson(guo, {

  style: {

    color: "#b8c3c8",

    weight: 2,

    fillOpacity: 0,

  },

}).addTo(map);

3. 更换背景主题色

我的实现思路比较简单粗暴，直接给天地图的图层设置透明度，对div元素设置背景色，如果UI配合，可以叫UI给个遮罩层的背景图，比如我这里就是用了四周有黑边渐变阴影，中间是透明的背景图。

<div id="map"></div>

<div class="mask"></div>



#map {

  height: 100vh;

  width: 100vw;

  background: #082941;

  z-index: 2;

}



.mask {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

  background: url("./mask.png") no-repeat;

  background-size: 100% 100%;

  z-index: 1;

}

4. 完整代码

• 写自己天地图的token


• 自己下载geojson文件


• 自己看需要搞个遮罩层背景图，不需要就注释掉mask