插件系统是一种软件架构模式，允许开发者通过添加外部模块或组件来扩展和定制软件应用的功能，而无需修改其核心代码。这种方式为软件提供了高度的可扩展性、灵活性和可定制性。

用过构建工具的同学都知道，grunt, webpack, gulp 都支持插件开发。后端框架比如 egg koa 都支持插件机制拓展，前端页面也有许多可拓展性的要求。插件化无处不在，所有的框架都希望自身拥有最强大的可拓展能力，可维护性，而且都选择了插件化的方式达到目标。

什么是插件系统

插件系统主要由三个关键部分组成：

插件的执行流程和实现方式

插件的执行流程是指从插件被加载到执行其功能直至卸载的一系列步骤。

通过这个流程，插件系统提供了一个灵活、可扩展的方式来增强和定制核心系统的功能。插件的开发者可以专注于插件逻辑的实现，而无需修改核心系统的代码。同时，核心系统能够保持稳定性和安全性，因为插件的执行是在明确定义的接口和约束条件下进行的。

插件的几种形式

插件的主要形式主要分为以下几种形式：

约定式插件

约定式插件通常在那些采用“约定优于配置”理念的框架或工具中很常见。以 Webpack 为例，它过各种加载器（Loaders）和插件（Plugins）提供强大的扩展性，而这些扩展往往遵循一定的约定，以简化配置的复杂性。

在 Webpack 配置中使用插件时，通常不需要指定插件工作的具体点，只需要将插件加入到配置的 plugins 数组中。Webpack 根据内部的运行机制和生命周期事件，自动调用这些插件，执行相关的任务。

例如，使用 HtmlWebpackPlugin 可以自动生成一个 HTML 文件，并自动将打包后的 JS 文件注入到这个 HTML 文件中。开发者只需要按照约定将 HtmlWebpackPlugin 加入到 plugins 数组中，无需指定具体的注入点或方式，Webpack 就会自动完成这些任务。

const HtmlWebpackPlugin = require("html-webpack-plugin");



module.exports = {

  // 其他配置...

  plugins: [

    new HtmlWebpackPlugin({

      template: "./src/template.html",

    }),

  ],

};

通过这种约定式的插件机制，Webpack 极大地简化了开发者的配置工作，同时保持了强大的灵活性和扩展性。用户只需遵循简单的约定，如将插件实例添加到 plugins 数组，Webpack 便能自动完成复杂的集成工作，如资源打包、文件处理等，从而提高了开发效率和项目的可维护性。这正体现了约定式插件的主要优势：通过遵循一套预定义的规则，减少配置的需求，同时提供强大的功能扩展能力。

注入式插件

注入式插件通过在应用程序的运行时或编译时将插件的功能注入到应用程序中，从而扩展应用程序的功能。这种方式往往依赖于一种中间件或框架来实现插件的动态加载和执行。一个典型的例子就是 NestJs 世界中广泛使用的依赖注入（DI）功能。

除此之外，尽管 Webpack 更常被人们提及其约定式插件机制，但我们可以从一个角度将 Loaders 视为一种注入式插件，在 Webpack 配置中，Loaders 允许你在模块被添加到依赖图中时，预处理文件。可以看作是在编译过程中“注入”了额外的处理步骤。这些处理步骤可以包括将 TypeScript 转换为 JavaScript、将 SASS 转换为 CSS，或者将图片和字体文件转换为 Webpack 可以处理的格式。

module.exports = {

  // ...其他配置

  module: {

    rules: [

      {

        test: /\.js$/, // 使用正则表达式匹配文件路径，处理.js文件

        exclude: /node_modules/, // 排除node_modules目录

        use: {

          loader: "babel-loader", // 指定使用babel-loader

          options: {

            presets: ["@babel/preset-env"], // 使用预设配置转换ES6+代码

          },

        },

      },

    ],

  },

  // ...其他配置

};

通过 loader 的配置，Webpack 实现了一种灵活的“注入式”扩展机制，允许开发者根据需要为构建过程注入各种预处理步骤。

事件插件化

事件插件化是一种基于事件驱动编程模式的插件化机制，其中插件通过监听和响应系统中发生的特定事件来工作。这种机制允许插件在不直接修改主程序代码的情况下增加或改变程序的行为。

Node.js 的 EventEmitter 类是实现事件插件化的一个很好的例子。假设我们正在开发一个应用程序，该程序需要在完成某个任务后执行一系列的操作，这些操作由不同的插件来实现。

首先，创建一个基于 EventEmitter 的任务执行器，它在完成任务时会发出一个事件：

const EventEmitter = require("events");



class TaskExecutor extends EventEmitter {

  execute(taskFunc) {

    console.log("Executing task...");

    taskFunc();

    this.emit("taskCompleted", "Task execution finished");

  }

}

接着，我们可以开发插件来监听 taskCompleted 事件。每个插件都可以注册自己的监听器来响应事件：

// Plugin A

executor.on("taskCompleted", (message) => {

  console.log(`Plugin A responding to event: ${message}`);

});



// Plugin B

executor.on("taskCompleted", (message) => {

  console.log(`Plugin B responding to event: ${message}`);

});

最后，创建 TaskExecutor 的实例，并执行一个任务，看看插件如何响应：

const executor = new TaskExecutor();



// 注册插件

// ...此处省略插件注册代码...



executor.execute(() => {

  console.log("Task is done.");

});

运行上述代码时，TaskExecutor 执行一个任务，并在任务完成后发出 taskCompleted 事件。注册监听该事件的所有插件（在这个例子中是插件 A 和插件 B）都会接到通知，并执行相应的响应操作。这种模式使得开发者可以很容易地通过添加更多的事件监听器来扩展应用程序的功能，而无需修改 TaskExecutor 或其他插件的代码，实现了高度的解耦和可扩展性。

插槽插件化

在 React 中，插槽插件化的概念可以通过组件的 children 属性或使用特定的插槽来实现。这种模式允许开发者定义一个组件框架，其中一些部分可以通过传入的子组件来填充，从而实现自定义内容的注入。这类似于 Vue 中的插槽（slots）功能，但在 React 中，它通过 props.children 或通过特定的 props 来传递组件来实现。

function Card({ children }) {

  return <div className="card">{children}</div>;

}



function App() {

  return (

    <Card>

      <h2>标题</h2>

      <p>这是一段文本</p>

    </Card>

  );

}

通过这种方式，React 支持了组件的插槽化，使组件的复用和自定义变得更加容易。这种模式在构建可扩展和可复用的 UI 组件库时尤其有用。

代码实现

接下来我们通过插件来实现一个计算器，可以实现加减乘除

插件核心实现

class Calculator {

  constructor(options = {}) {

    const { initialValue = 0 } = options;

    this.currentValue = initialValue;

  }

  getCurrentValue() {

    return this.currentValue;

  }

  setValue(value) {

    this.currentValue = value;

  }

  plus(addend) {

    this.setValue(this.currentValue + addend);

  }

  minus(subtrahend) {

    this.setValue(this.currentValue - subtrahend);

  }

  multiply(multiplicand) {

    this.setValue(this.currentValue * multiplicand);

  }

  division(divisor) {

    if (divisor === 0) {

      console.error("不允许除零。");

      return;

    }

    this.setValue(this.currentValue / divisor);

  }

}



// test

const calculator = new Calculator();

calculator.plus(10);

console.log(calculator.getCurrentValue()); // 10

calculator.minus(5);

console.log(calculator.getCurrentValue()); // 5

calculator.multiply(2);

console.log(calculator.getCurrentValue()); // 10

calculator.division(2);

console.log(calculator.getCurrentValue()); // 5

实现 hooks

核心系统想要对外提供生命周期钩子，就需要一个事件机制。

class Hooks {

  constructor() {

    this.listeners = {};

  }

  on(eventName, handler) {

    let listeners = this.listeners[eventName];

    if (!listeners) {

      this.listeners[eventName] = listeners = [];

    }

    listeners.push(handler);

  }

  off(eventName, handler) {

    const listeners = this.listeners[eventName];

    if (listeners) {

      this.listeners[eventName] = listeners.filter((l) => l !== handler);

    }

  }

  trigger(eventName, ...args) {

    const listeners = this.listeners[eventName];

    const results = [];

    if (listeners) {

      for (const listener of listeners) {

        const result = listener.call(null, ...args);

        results.push(result);

      }

    }

    return results;

  }

  destroy() {

    this.listeners = {};

  }

}

这个 Hooks 类是一个事件监听器或事件钩子的简单实现，它允许你在应用程序的不同部分之间传递消息或事件，而不必直接引用那些部分。

暴露生命周期（通过 Hooks）

然后将 hooks 运用在核心系统中 -- JavaScript 计算器。

每个钩子对应的事件：

• pressedPlus 做加法操作


• pressedMinus 做减法操作


• pressedMultiply 做乘法操作


• pressedDivision 做乘法操作


• valueWillChanged 即将赋值 currentValue，如果执行此钩子后返回值为 false，则中断赋值。


• valueChanged 已经赋值 currentValue

class Calculator {

  constructor(options = {}) {

    this.hooks = new Hooks();

    const { initialValue = 0, plugins = [] } = options;

    this.currentValue = initialValue;

    plugins.forEach((plugin) => plugin.apply(this.hooks));

  }



  getCurrentValue() {

    return this.currentValue;

  }



  setValue(value) {

    const result = this.hooks.trigger("valueWillChanged", value);

    if (result.length !== 0 && result.some((_) => !_)) {

    } else {

      this.currentValue = value;

      this.hooks.trigger("valueChanged", this.currentValue);

    }

  }



  plus(addend) {

    this.hooks.trigger("pressedPlus", this.currentValue, addend);

    this.setValue(this.currentValue + addend);

  }



  minus(subtrahend) {

    this.hooks.trigger("pressedMinus", this.currentValue, subtrahend);

    this.setValue(this.currentValue - subtrahend);

  }



  multiply(factor) {

    this.hooks.trigger("pressedMultiply", this.currentValue, factor);

    this.setValue(this.currentValue * factor);

  }



  division(divisor) {

    if (divisor === 0) {

      console.error("Division by zero is not allowed.");

      return;

    }

    this.hooks.trigger("pressedDivision", this.currentValue, divisor);

    this.setValue(this.currentValue / divisor);

  }

}

插件实现

插件要实现 apply 方法，在 Calculator 的 constructor 调用时，才能确保插件 apply 执行后会绑定（插件内的）处理函数到生命周期。

apply 的入参是 this.hooks，通过 this.hooks 来监听生命周期并添加处理器。

class LogPlugins {

  apply(hooks) {

    hooks.on("pressedPlus", (currentVal, addend) =>

      console.log(`${currentVal} + ${addend}`)

    );

    hooks.on("pressedMinus", (currentVal, subtrahend) =>

      console.log(`${currentVal} - ${subtrahend}`)

    );

    hooks.on("pressedMultiply", (currentVal, factor) =>

      console.log(`${currentVal} * ${factor}`)

    );

    hooks.on("pressedDivision", (currentVal, divisor) =>

      console.log(`${currentVal} / ${divisor}`)

    );

    hooks.on("valueChanged", (currentVal) =>

      console.log(`结果： ${currentVal}`)

    );

  }

}



class LimitPlugins {

  apply(hooks) {

    hooks.on("valueWillChanged", (newVal) => {

      if (100 < newVal) {

        console.log("result is too large");

        return false;

      }

      return true;

    });

  }

}

LogPlugins 的目的是记录计算器操作的详细日志。通过监听 Calculator 类中定义的事件（如加、减、乘、除操作和值变化时的事件），这个插件在这些操作执行时打印出相应的操作和结果。

LimitPlugins 的目的是在值变更前进行检查，以确保计算器的结果不会超出预设的限制（在这个例子中是 100）。如果预计的新值超出了限制，这个插件会阻止值的更改并打印一条警告消息。

通过这两个插件，Calculator 类获得了额外的功能，而无需直接在其代码中加入日志记录和值限制检查的逻辑。

完整代码

最后我们应该贴上全部代码：

class Hooks {

  constructor() {

    this.listener = {};

  }



  on(eventName, handler) {

    if (!this.listener[eventName]) {

      this.listener[eventName] = [];

    }

    this.listener[eventName].push(handler);

  }



  trigger(eventName, ...args) {

    const handlers = this.listener[eventName];

    const results = [];

    if (handlers) {

      for (const handler of handlers) {

        const result = handler(...args);

        results.push(result);

      }

    }

    return results;

  }



  off(eventName, handler) {

    const handlers = this.listener[eventName];

    if (handlers) {

      this.listener[eventName] = handlers.filter((cb) => cb !== handler);

    }

  }



  destroy() {

    this.listener = {};

  }

}



class Calculator {

  constructor(options = {}) {

    this.hooks = new Hooks();

    const { initialValue = 0, plugins = [] } = options;

    this.currentValue = initialValue;

    plugins.forEach((plugin) => plugin.apply(this.hooks));

  }



  getCurrentValue() {

    return this.currentValue;

  }



  setValue(value) {

    const result = this.hooks.trigger("valueWillChanged", value);

    if (result.length !== 0 && result.some((_) => !_)) {

    } else {

      this.currentValue = value;

      this.hooks.trigger("valueChanged", this.currentValue);

    }

  }



  plus(addend) {

    this.hooks.trigger("pressedPlus", this.currentValue, addend);

    this.setValue(this.currentValue + addend);

  }



  minus(subtrahend) {

    this.hooks.trigger("pressedMinus", this.currentValue, subtrahend);

    this.setValue(this.currentValue - subtrahend);

  }



  multiply(factor) {

    this.hooks.trigger("pressedMultiply", this.currentValue, factor);

    this.setValue(this.currentValue * factor);

  }



  division(divisor) {

    if (divisor === 0) {

      console.error("Division by zero is not allowed.");

      return;

    }

    this.hooks.trigger("pressedDivision", this.currentValue, divisor);

    this.setValue(this.currentValue / divisor);

  }

}



class LogPlugins {

  apply(hooks) {

    hooks.on("pressedPlus", (currentVal, addend) =>

      console.log(`${currentVal} + ${addend}`)

    );

    hooks.on("pressedMinus", (currentVal, subtrahend) =>

      console.log(`${currentVal} - ${subtrahend}`)

    );

    hooks.on("pressedMultiply", (currentVal, factor) =>

      console.log(`${currentVal} * ${factor}`)

    );

    hooks.on("pressedDivision", (currentVal, divisor) =>

      console.log(`${currentVal} / ${divisor}`)

    );

    hooks.on("valueChanged", (currentVal) =>

      console.log(`结果： ${currentVal}`)

    );

  }

}



class LimitPlugins {

  apply(hooks) {

    hooks.on("valueWillChanged", (newVal) => {

      if (100 < newVal) {

        console.log("result is too large");

        return false;

      }

      return true;

    });

  }

}



// 运行测试

const calculator = new Calculator({

  initialValue: 0,

  plugins: [new LogPlugins(), new LimitPlugins()],

});

calculator.plus(10);

calculator.minus(5);

calculator.multiply(2);

calculator.division(5);

calculator.plus(1000); // 尝试加到超过限制的值

最终输出结果如下图所示：

参考资料

-简单实现一个插件系统（不引入任何库），学会插件化思维

-当我们说插件系统的时候，我们在说什么

总结

通过这两个插件的例子，我们可以看到插件化设计模式在软件开发中的强大之处。它允许开发者在不修改原有代码基础上扩展功能、增加新的处理逻辑，使得应用更加模块化和易于维护。这种模式特别适用于那些需要高度可扩展性和可定制性的应用程序。

最后分享两个我的两个开源项目,它们分别是:

• 前端脚手架 create-neat


• 在线代码协同编辑器

这两个项目都会一直维护的,如果你也喜欢,欢迎 star 🚗🚗🚗

如果你对开源项目感兴趣的，可以加我微信 yunmz777

一. 前言

随着 Web 技术的不断发展，用户体验成为了设计和开发过程中越来越重要的因素之一。为了更好地适应用户的视觉偏好，CSS 在 2024 年正式引入了一项新的功能 —— light-dark() 函数。

这项功能的加入主要在于简化网页对于浅色模式（Light Mode）与深色模式（Dark Mode）的支持，使得我们能够更快更轻松轻松地实现不同的主题切换。

接下来，我们就来详细了解一下我们在开发网页是如何实现主题切换的！

以下 Demo 示例，支持跟随系统模式和自定义切换主题，先一睹为快吧！

二. 传统方式

在 light-dark() 函数出现之前，开发者通常需要通过 JavaScript 或者 CSS 变量配合媒体查询来实现主题切换。例如：

使用 CSS 变量 + 媒体查询：

开发者会定义一套 CSS 变量，然后基于用户的偏好设置（如：prefers-color-scheme: dark 或 prefers-color-schema: light）来改变这些变量的值。

/* 默认模式 */

:root {

  --background-color: white;

  --text-color: black;

}



/* dark模式 */

@media (prefers-color-scheme: dark) {

  :root {

    --background-color: #333;

    --text-color: #fff;

  }

}

也可以使用 JavaScript 监听主题切换：

JavaScript 可以监听用户更改其操作系统级别的主题设置，并相应地更新网页中的类名或样式表链接。

// 检测是否启用了dark模式

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {

  document.body.classList.add('dark-mode')

} else {

  document.body.classList.remove('dark-mode')

}

以上这种方法虽然有效，但增加了代码复杂度，特别是当需要处理多个元素的颜色变化时，我们可能需要更多的代码来支持主题。

接下来我们看一下 light-dark 是如何实现的？

三. 什么是 light-dark？

light-dark() 是在 2024 年新加入的一种新的 CSS 函数，它允许我们根据用户的系统颜色方案（浅色或深色模式）来自动选择合适的颜色值。这个函数的引入简化了创建响应用户偏好主题的应用程序和网站的过程，而无需使用媒体查询或其他复杂的逻辑。

1. 基本用法

具体的说，light-dark() 函数接受两个参数，分别对应于浅色模式下的颜色值和深色模式下的颜色值。

• 第一个参数是在浅色模式下使用的颜色。


• 第二个参数是在深色模式下使用的颜色。

当用户的设备设置为浅色模式时，light-dark() 会返回第一个参数的颜色；当用户的设备设置为深色模式时，则返回第二个参数的颜色。

基本语法如下：

color: light-dark(浅色模式颜色, 深色模式颜色);

因此，light-dark() 提供了一种更简洁的方式来直接在 CSS 中指定两种模式下的颜色，而不需要额外的脚本或复杂的 CSS 结构。例如：

body {

  background-color: light-dark(white, #333);

  color: light-dark(black, #fff);

}

这里的 light-dark(白色, 深灰色) 表示如果用户处于浅色模式下，则背景色为白色；如果是深色模式，则背景色为深灰色。同样适用于文本颜色等其他属性。

2. 结合其他 CSS 特性

light-dark() 可以很好地与其他 CSS 特性结合使用，如变量、渐变等，以创造更加丰富多样的效果。当结合其他 CSS 特性使用 light-dark() 将更加灵活的创造页面的效果。

(1) 结合 CSS 变量

你可以利用 CSS 变量来存储颜色值，然后在 light-dark() 内引用这些变量，这样就能够在一处更改颜色方案并影响整个站点。

CSS 变量（也称为自定义属性）允许你存储可重复使用的值，这使得在不同的主题之间切换变得非常方便。你可以设置基础颜色变量，然后利用 light-dark() 来决定这些变量的具体值。

:root {

  --primary-color: light-dark(#007bff, #6c757d);

  --background-color: light-dark(white, #212529);

  --text-color: light-dark(black, white);

}



body {

  background-color: var(--background-color);

  color: var(--text-color);

}

(2) 结合媒体查询

虽然 light-dark() 本身就可以根据系统偏好自动调整颜色，但有时候你可能还需要针对特定的屏幕尺寸或分辨率进行额外的样式调整。这时可以将 light-dark() 与媒体查询结合使用。

@media (max-width: 600px) {

  body {

    --button-bg: light-dark(#f8f9fa, #343a40); /* 更小的屏幕上按钮背景色 */

    --button-text: light-dark(black, white);

  }

  button {

    background-color: var(--button-bg);

    color: var(--button-text);

  }

}

(3) 结合伪类

light-dark() 也可以与伪类一起工作，比如 :hover, :focus 等，以实现不同状态下的颜色变化。

button {

  background-color: light-dark(#007bff, #6c757d);

  color: light-dark(white, black);

}



button:hover,

button:focus {

  background-color: light-dark(#0056b3, #5a6268);

}

(4) 结合渐变

如果你希望在浅色模式和深色模式下使用不同的渐变效果，同样可以通过 light-dark() 来实现。

.header {

  background: linear-gradient(light-dark(#e9ecef, #343a40), light-dark(#dee2e6, #495057));

}

(5) 结合阴影

对于元素的阴影效果，你也可以根据不同主题设置不同的阴影颜色和强度。

.box-shadow {

  box-shadow: 0 4px 8px rgba(light-dark(0, 255), light-dark(0, 255), light-dark(0, 255), 0.1);

}

通过上述方法，你可以充分利用 light-dark() 函数的优势，并与其他 CSS 特性结合，创造出既美观又具有高度适应性的网页设计。这样不仅提高了用户体验，还简化了开发过程中的复杂度。

四. 兼容性

在 2024 年初时，light-dark() 函数作为 CSS 的一个新特性被加入到规范中，并且开始得到一些现代浏览器的支持。

其实，通过上图我们可以看到，light-dark() 在主流浏览器在大部分版本下都是支持了，所以我们可以放心的使用它。

但是同时我们也要注意，在一些较低的浏览器版本上仍然不被支持，比如 IE。因此，为了确保兼容性，在生产环境中使用该功能前需要检查目标浏览器是否支持这一特性。

如果浏览器不支持 light-dark()，可能需要提供回退方案，比如使用传统的媒体查询 @media (prefers-color-scheme: dark) 或者通过 JavaScript 来动态设置颜色。

五. 总结

通过本文，我们了解到，light-dark() 函数是 CSS 中的一个新特性，它允许开发者根据用户的系统偏好（浅色或深色模式）来自动切换颜色。

通过与传统模式开发深浅主题的比较，我们可以总结出 light-dark() 的优势应该包括：

• 使用简洁：不需要编写额外的媒体查询，简洁高效。


• 自动响应：能够随着系统的颜色方案改变而自动切换颜色。


• 易于维护：所有与颜色相关的样式可以在同一处定义。


• 减少代码量：相比使用多个媒体查询，可以显著减少 CSS 代码量。

light-dark() 函数是 CSS 领域的一项进步，它不仅简化了响应式设计的过程，也体现了对终端用户个性化体验的重视。随着越来越多的现代浏览器开始支持这一特性，我们未来可以在更多的应用场景中使用这一特性！

文档链接

light-dark

码上掘金演示

可以点击按钮切换主题，也可以切换系统的暗黑模式跟随：

🔥 我正在参加2024年度人气创作者评选，每投2票可以抽奖！ 点击链接投票

2024年12月19日，vant仓库新增一条issue，vant 2.13.5 被投毒，挖矿。

具体原因

可能是团队一名成员的 token 被盗用

与本次事件关联的攻击

攻击者在利用 @landluck 的 token 进行攻击后，进一步拿到了同个 GitHub 组织下的维护者 @chenjiahan 的 token，并发布了带有相同恶意代码的 Rspack 1.1.7 版本。

Rspack 团队已经在一小时内完成该版本的废弃处理，并发布了 1.1.8 修复版本，参考 web-infra-dev/rspack#8767 (comment)

目前相关 token 已经全部清理。

相关版本

以下异常版本被盗号者注入了脚本，已经全部标记为废弃，请勿使用！

有使用的大家可以升级版本，降低影响。

写在前面

这两天突然想看看文心一言的http通信请求接口，于是想着用F12看看。

谁知道刚打开开发者工具，居然被动debugger了。

直接被JS写死的debugger关键字下了断点。行吧，不让调试就不让调试吧，关闭开发者工具之后，直接跳到了空白页。

其实几年之前就碰到过类似的情况，不过当时才学疏浅，也没当回事，就没研究过。这次又碰到了，毕竟已经不是当年的我了，于是便来研究研究。

分析

大家都知道浏览器的开发者工具能干啥，正经的用法：开发时调试代码逻辑，修改布局样式；不正经的用法：改改元素骗骗人，找找网站接口写爬虫，逆向js破解加密等等，所以说前端不安全，永远不要相信用户的输入。

而这次碰到的这个情况确实可以在用户端做一些防御操作，但是也可以绕过。 （PS：感谢评论区大佬指教：开发者工具Ctrl+F8可以禁用断点调试，学到了）

先做一波分析。

首先，防止你用F12调试，先用debugger关键字阻止你进行任何操作。随后，在你关闭之后，又直接跳转到空白页，不让你接着操作。

这就需要一个开发者工具检测的机制了，发现你打开了开发者工具，就给你跳走到空白页。

所以，关键就是要实现开发者工具的检测。

实现

经过查阅一番，发现原来这个debugger可能并不仅仅是阻止你进行调试的功能，同时还兼具判断开发者工具是否打开的作用。怎么实现？

debugger本身只是调试，阻止你继续对前端进行调试，但是代码中并不知道用户是否打开了开发者工具，所以就无法进行更进一步的操作，例如文心一言的跳转到空白页。

但是，有一点，你打开开发者工具之后，debugger下了断点，程序就停到那里了，如果你不打开开发者工具，程序是不会停止到断点的。没错，这就是我们可以判断的方式，时间间隔。正常情况下debugger前后的时间间隔可以忽略不计。但是，当你打开开发者工具之后，这个时间间隔就产生了，判断这个时间间隔，就可以知道是否打开了开发者工具。

直接上示例代码

<!DOCTYPE html>

<html>

    <header>

        <title>test</title>

    </header>

    <body>

        <h1>test</h1>

    </body>

    <script>

        setInterval(function() {



            var startTime = performance.now();

          	// 设置断点

            debugger; 

            var endTime = performance.now();

           	// 设置一个阈值，例如100毫秒

            if (endTime - startTime > 100) {

                window.location.href = 'about:blank';

            } 

            

        }, 100);



    </script>



</html>

通过设置一个定时循环任务来进行检测。

在不打开发者工具的情况下，debugger是不会执行将页面卡住，而恰恰是利用debugger的这一点，如果你打开开发者工具一定会被debugger卡住，那么上下文时间间隔就会增加，在对时间间隔进行判断，就能巧妙的知道绝对开了开发者工具，随后直接跳转到空白页，一气呵成。

测试

现在来进行测试，打开F12

关闭开发者工具。

完美！

写在后面

这样确实可以阻挡住通过在开发者工具上获取信息，但是仅仅是浏览器场景。我想要拿到对话的api接口也不是只有这一种方法。

感谢评论区大佬指教：开发者工具Ctrl+F8可以禁用断点调试

或者说，开个代理抓包不好吗？hhh

大扎好，我系渣渣辉，斯一扔，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款js裤

Cesium 概述

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，支持3D，2D，2.5D形式的地图展示，也是目前最流行的三维数字地球渲染引擎。

Cesium 基础介绍

首先我们需要登录上Cesium的官网，网址是 cesium.com/ ，获取源代码可以在Platform菜单项的Downloads中下载 。
接下来，第一个比较重要的事情就是我们需要注册一个免费账户以获取Cesium世界地形资产所需的访问令牌，而这个账户的token决定了哪些资产咱们可以使用；而第二个比较重要的事情就是Cesium的文档中心（ cesium.com/learn/cesiu… ），我们在实际使用的过程中会经常来查阅这些API。

Cesium 的使用

由于我是使用的vue-cli生成的项目，所以直接安装vite-plugin-cesium依赖项，当然你也可以使用直接下载源码，在HTML中引入的方式。如果使用的是vite-plugin-cesium，你还需要在vite.config.ts中添加一下Cesium的引用。

import { fileURLToPath, URL } from 'node:url'



import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

import VueDevTools from 'vite-plugin-vue-devtools'

// add this line

import cesium from 'vite-plugin-cesium';



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

export default defineConfig({

  plugins: [

    vue(),

    vueJsx(),

    VueDevTools(),

    // add this line

    cesium()

  ],

  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  }

})

初始化地球

<script setup lang="ts">

import { onMounted } from 'vue'

import * as Cesium from 'cesium'

onMounted(() => {

  const defaultToken = 'your access token'

  Cesium.Ion.defaultAccessToken = defaultToken

  const viewer = new Cesium.Viewer('cesiumContainer', {

    //这里是配置项

  })

})

</script>



<template>

  <div id="cesiumContainer" class="cesium-container"></div>

</template>



<style scoped>

#cesiumContainer {

  width: 100vw;

  height: 100vh;

}

</style>

效果如下：

现在我们就可以看到Cesium生成的地球了，可以对其进行二维和三维状态的切换，也可以用其自带的播放器，对时间轴进行一个播放，支持正放和倒放，Cesium还自带了搜索地理位置组件，并且兼容了中文。

Cesium 常用的类

1. Viewer

它是Cesium展示三维要素内容的主要窗口，不仅仅包含了三维地球的视窗，还包含了一些基础控件，在定义Viewer对象的时候需要设定基础部件、图层等的初始化状态，下面演示一下部分属性的使用。

  const viewer = new Cesium.Viewer('cesiumContainer', {

    // 这里是配置项

    // 动画播放控件

    animation: false,

    // 时间轴控件

    timeline: false,

    // 全屏按钮

    fullscreenButton: true,

    // 搜索位置按钮

    geocoder: true,

    // 帮助按钮

    navigationHelpButton: false,

    // VR按钮

    vrButton: true

  })

除了上述的控件属性之外，还有entities这种实体合集属性，主要用于加载实体模型，几何图形并对其进行样式设置，动效修改等，我们可以通过下述代码生成一个绿色的圆点。

const entity = viewer.entities.add({

  position: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 400),

  point: {

    pixelSize: 100,

    color: new Cesium.Color(0, 1, 0, 1)

  }

})

viewer.trackedEntity = entity

效果如下：

当然，我们也可以用entities来加载模型文件，下面我们用飞机模型试试

  /** 通过entities加载一个飞机模型 */

  const orientation = Cesium.Transforms.headingPitchRollQuaternion(

    position,

    new Cesium.HeadingPitchRoll(-90, 0, 0)

  )

  const entity = viewer.entities.add({

    position: position,

    orientation: orientation,

    model: {

      uri: '/Cesium_Air.glb',

      minimumPixelSize: 100,

      maximumScale: 10000,

      show: true

    }

  })

  viewer.trackedEntity = entity

效果如下：

2. Camera

Cesium中可以通过相机来描述和操作场景的视角，而通过相机Camera操作场景的视角还有下面的几种方法

• 飞行fly，比如flyTo，flyHome，flyToBoundingSphere


• 缩放zoom，比如zoomIn，zoomOut


• 移动move，比如moveBackward，moveDown，moveForward，moveLeft，moveRight，moveUp


• 视角look，比如lookDown，lookLeft，lookRight，lookUp


• 扭转twist，比如twistLeft，twistRight


• 旋转rotate，比如rotateDown，rotateLeft，rotateRight，rotateUp


• 其他方法，比如setView，lookAt

viewer.scene.camera.setView({

    // 设定相机的目的地

    destination: position,

    // 设定相机视口的方向

    orientation: {

      // 控制视口方向的水平旋转，即沿着Y轴旋转

      heading: Cesium.Math.toRadians(0),

      // 控制视口方向的上下旋转，即沿着X轴旋转

      pitch: Cesium.Math.toRadians(-20),

      // 控制视口的翻转角度，即沿着Z轴旋转

      roll: 0

    }

})

我们尝试使用setView后可以发现，相机视角直接被定位到了下图的位置

3. DataSourceCollection

DataSourceCollection是Cesium中加载矢量数据的主要方式之一，它最大的特点是支持加载矢量数据集和外部文件的调用，主要有三种调用方法，分别为 CzmlDataSource，KmlDataSource，GeoJsonDataSource，分别对应加载Czml，Kml，GeoJSON格式的数据，在使用过程中我们只需要将矢量数据转换为以上任意一种格式就可以在Cesium中实现矢量数据的加载和存取。

  viewer.dataSources.add(Cesium.GeoJsonDataSource.load('/ne_10m_us_states.topojson'))

效果如下：

这时候我们看到图层已经被加载上去了~

Cesium的坐标体系

通过上面的示例我们可以得知Cesium具有真实地理坐标的三维球体，但是用户是通过二维屏幕与Cesium进行操作的，假设我们需要将一个三维模型绘制到三维球体上，我们就需要再地理坐标和屏幕坐标之间做转换，而这就需要涉及到Cesium的坐标体系。

Cesium主要有5种坐标系：

• WGS84经纬度坐标系


• WGS84弧度坐标系


• 笛卡尔空间直角坐标系


• 平面坐标系


• 4D笛卡尔坐标系

他们的基础概念大家感兴趣的可以百度查阅一下，我也说不太清楚，问我他们的区别我也只能用 恰特鸡屁踢 敷衍你，下面我们演示一下怎么将WGS84左边西转换为笛卡尔空间直角坐标系：

const cartesian3 = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)

我们可以通过经纬度进行转换，当然我们还有其他的方式，比如Cesium.Cartesian3.fromDegreesArray(coordinates)，这里的coordinates格式为不带高度的数组。

Cesium加载地图和地形

加载地图

我们使用ArcGis地图服务来加载新地图，Cesium也给其提供了相关的加载方法：

  const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl(

    'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'

  )

    /** 这里是配置项 */

  const viewer = new Cesium.Viewer('cesiumContainer', {

    baseLayerPicker: false,

  })

  // 加载ArcGis地图

  viewer.imageryLayers.addImageryProvider(esri)

效果如下：

我们再来看一下之前的地球效果来对比对比：

可以明显看出来ArcGisMapServer提供的地图更加的清晰和立体。

注：加载ArcGis地图服务请使用我上述提供的代码，从Cesium中文网看到的示例代码可能很久没更新了，使用会报错~

当然我们还可以加载一些特定场景的地图，比如夜晚的地球，官网上直接给出了示例代码：

// addImageryProvider方法用于添加一个新的图层

viewer.imageryLayers.addImageryProvider(await Cesium.IonImageryProvider.fromAssetId(3812))

效果如下：

加载地形

我们回到刚刚的ArcGis地图，我们进入到地球内部查看一些山脉，会发现从俯视角度来看山脉是有轮廓的，但是当我们旋转相机后会发现，实际上地球表面是平的，并没有显示出地形，效果如下：

这时候我们就需要加载出地形数据了

const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl(

'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'

)

/** 这里是配置项 */

const viewer = new Cesium.Viewer('cesiumContainer', {

    baseLayerPicker: false,

    terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1, {

      // 可以增加法线，用于提高光照效果

      requestVertexNormals: true,

      // 可以增加水面特效

      requestWaterMask: true

    })

})

// 加载ArcGis地图

viewer.imageryLayers.addImageryProvider(esri)

效果如下：

可以看到原先的平面通过加载了地形数据，已经有了山势起伏，河流湖泊~

Cesium加载建筑体

我们在实际开发中，比如搭建一个智慧城市，光有地图和地形是远远不够的，还需要加载城市中的建筑模型信息，这时候我们就需要用到Cesium中建筑体的添加和使用的相关功能了，我们以官网的纽约市的模型数据为例：

  /** 添加建筑物 */

  const tileset = viewer.scene.primitives.add(await Cesium.Cesium3DTileset.fromIonAssetId(75343))

    /** 添加相机信息 */

  const position = Cesium.Cartesian3.fromDegrees(-74.006, 40.7128, 100)

  viewer.camera.setView({

    destination: position,

    orientation: {

      heading: 0,

      pitch: 0,

      roll: 0.0

    }

  })

效果如下：

我们看到纽约市建筑物的数据已经加载出来了，但是看起来都是白白的过于单调，我们还可以通过style来修改建筑物的样式

tileset.style = new Cesium.Cesium3DTileStyle({

    color: {

      conditions: [

        ['${Height} >= 300', 'rgba(45,0,75,0.5)'],

        ['${Height} >= 100', 'rgb(170,162,204)'],

        ['${Height} >= 50', 'rgb(102,71,151)'],

        ['true', 'rgb(127,59,8)']

      ]

    },

    show: '${Height} > 0',

    meta: {

      description: '"Building id ${id} has height ${Height}."'

    }

  })

现在我们再来看一下效果：

可以看出我们根据建筑物的不同高度，设定了不同的颜色，比如超过300米的建筑就带有透明效果了，比较上图的效果更有层次感。

最后

关于Cesium我也是初窥门径，具体的学习和使用大家还是要以 英文官网 为准，中文网上很多都过时了，使用的时候可能会报错，我已经帮大家踩好坑了😭，也欢迎大家在评论区里多沟通交流，互相学习~

hi, 大家好, 我是徐小夕. 

5年前就开始着手设计和研发可视化大屏编辑器, 当时低代码在国内还没有现在那么火, 有人欢喜有人哀, 那个时候我就比较坚定的认为无码化搭建未来一定是个趋势, 能极大的帮助企业提高研发效率和降低研发成本, 所以 all in 做了2年, 上线了一个相对闭环的MVP可视化大屏搭建平台——V6.Dooring.

通过在技术社区不断的分享可视化搭建的技术实践和设计思路, 也参与了很多线上线下的技术分享, 慢慢市场终于“热了”起来.(机缘巧合)

从V6.Dooring的技术架构的设计, 到团队组建, 再到帮助企业做解决方案, 当时几乎所有的周末都花在这上面了, 想想收获还是挺大的, 接触到了形形色色的企业需求, 也不断完整着可视化大屏编辑器的功能, 最后推出了一个还算通用的解决方案:

当然上面介绍的还都不是这篇文章的重点.

重点是, 时隔4年, 我们打算把通用的可视化大屏解决方案, 开源! 

一方面是供大家学习参考, 更好的解决企业自身的业务需求, 另一方面可以提供一个技术交流的平台, 大家可以对可视化搭建领域的技术实践, 提出自己的想法和观点, 共同打造智能化, 体验更好的搭建产品.

先上github地址: github.com/MrXujiang/v…

V6.Dooring开源大屏编辑器演示

其实最近几年我在掘金专栏分享了很多零代码和可视化搭建的技术实现和产品设计:

可视化低代码技术精粹

 这里为了让大家更近一步了解V6-Dooring可视化大屏编辑器, 我还是会从技术设计到产品解决方案设计的角度, 和大家详细分享一下, 让大家在学习我们可视化大屏开源方案的过程中, 对可视化搭建技术产品, 有更深入的理解.

如果大家觉得有帮助, 不要忘记点赞 + 收藏哦, 后面我会持续分享最干的互联网干货.

你将收获

• 可视化大屏产品设计思路


• 主流可视化图表库技术选型


• 大屏编辑器设计思路


• 大屏可视化编辑器Schema设计


• 用户数据自治探索

方案实现

1.可视化大屏产品设计思路

目前很多企业或多或少的面临“信息孤岛”问题，各个系统平台之间的数据无法实现互通共享，难以实现一体化的数据分析和实时呈现。

相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控，动态一目了然。

针对以上需求, 我们设计了一套可视化大屏解决方案, 具体包含如下几点:

上图是笔者4个月前设计的基本草图, 后期会持续更新. 通过以上的设计分解, 我们基本可以搭建一个可自己定制的数据大屏.

2.主流可视化图表库技术选型

目前我调研的已知主流可视化库有:

• echart 一个基于 JavaScript 的老牌开源可视化图表库


• D3.js 一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作


• antv 包含一套完整的可视化组件体系


• Chart.js 基于 HTML5 的 简单易用的 JavaScript 图表库


• metrics-graphics 建立在D3之上的可视化库, 针对可视化和布置时间序列数据进行了优化


• C3.js 通过包装构造整个图表所需的代码，使生成基于D3的图表变得容易

我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 各位可以根据喜好来选择.

3.大屏编辑器设计思路

在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分:

• 组件库


• 拖拽(自由拖拽, 参考线, 自动提示)


• 画布渲染器


• 属性编辑器

如下图所示:

组件库我们可以用任何组件封装方式(react/vue等), 这里沿用H5-Dooring的可视化组件设计方式, 对组件模型进行优化和设计.

类似的代码如下:

import { Chart } from '@antv/f2';

import React, { memo, useEffect, useRef } from 'react';



import styles from './index.less';

import { IChartConfig } from './schema';



const XChart = (props:IChartConfig) => {

  const { data, color, size, paddingTop, title } = props;

  const chartRef = useRef(null);

  useEffect(() => {

      const chart = new Chart({

        el: chartRef.current || undefined,

        pixelRatio: window.devicePixelRatio, // 指定分辨率

      });



      // step 2: 处理数据

      const dataX = data.map(item => ({ ...item, value: Number(item.value) }));



      // Step 2: 载入数据源

      chart.source(dataX);



      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴

      chart

        .interval()

        .position('name*value')

        .color('name');



      // Step 4: 渲染图表

      chart.render();

  }, [data]);

  return (

    <div className={styles.chartWrap}>

      <div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>

        {title}

      </div>

      <canvas ref={chartRef}></canvas>

    </div>

  );

};



export default memo(XChart);

以上只是一个简单的例子, 更具业务需求的复杂度我们往往会做更多的控制, 比如动画(animation), 事件(event), 数据获取(data inject)等.

当然实际应用中大屏展现的内容和形式远比这复杂， 我们从上图可以提炼出大屏页面的2个直观特征:

• 可视化组件集


• 空间坐标关系

因为我们可视化大屏载体是页面， 是html， 所以还有另外一个特征: 事件/交互。综上我们总结出了可视化大屏的必备要素:

我们只要充分的理解了可视化大屏的组成和特征， 我们才能更好的设计可视化大屏搭建引擎， 基于以上分析， 我设计了一张基础引擎的架构图:

接下来我就带大家一起来拆解并实现上面的搭建引擎。

大屏搭建引擎核心功能实现

俗话说: “好的拆解是成功的一半”， 任何一个复杂任务或者系统， 我们只要能将其拆解成很多细小的子模块， 就能很好的解决并实现它. (学习也是一样)

接下来我们就逐一解决上述基础引擎的几个核心子模块:

• 拖拽器实现


• 物料中心设计


• 动态渲染器实现


• 配置面板设计


• 控制中心概述


• 功能辅助设计

1.拖拽器实现

拖拽器是可视化搭建引擎的核心模块， 也是用来解决上述提到的大屏页面特征中的“空间坐标关系”这一问题。我们先来看一下实现效果:

组件拖拽可以采用市面已有的 Dragable 等插件, 也可以采用 H5-Dooring 的智能网格拖拽. 这里笔者选择自由拖拽来实现. 已有的有:

• rc-drag


• sortablejs


• react-dnd


• react-dragable


• vue-dragable

等等. 具体拖拽呈现流程如下:

具体拖拽流程就是:

组件的schema参考H5-Dooring DSL设计.

2.物料中心设计

物料中心主要为大屏页面提供 “原材料”。为了设计健壮且通用的物料， 我们需要设计一套标准组件结构和属性协议。并且为了方便物料管理和查询， 我们还需要对物料进行分类， 我的分类如下:

• 可视化组件 (柱状图， 饼图， 条形图， 地图可视化等)


• 修饰型组件 (图片， 轮播图， 修饰素材等)


• 文字类组件 (文本， 文本跑马灯， 文字看板)

具体的物料库演示如下:

这里我拿一个可视化组件的实现来举例说明:

import React， { memo， useEffect } from 'react'

import { Chart } from '@antv/g2'



import { colors } from '@/components/BasicShop/common'



import { ChartConfigType } from './schema'



interface ChartComponentProps extends ChartConfigType {

  id: string

}



const ChartComponent: React.FC<ChartComponentProps> = ({

  id, data, width, height,

  toggle, legendPosition, legendLayout, legendShape,

  labelColor, axisColor, multiColor, tipEvent, titleEvent,

  dataType, apiAddress, apiMethod, apiData, refreshTime,

}) => {

  useEffect(() => {

    let timer:any = null;

    const chart = new Chart({

      container: `chart-${id}`,

      autoFit: true,

      width,

      height

    })



    // 数据过滤， 接入

    const dataX = data.map(item => ({ ...item, value: Number(item.value) }))

    chart.data(dataX)

    

    // 图表属性组装

    chart.legend(

      toggle

        ? {

          position: legendPosition,

          layout: legendLayout,

          marker: {

            symbol: legendShape

          },

        }

        : false,

    )



    chart.tooltip({

      showTitle: false,

      showMarkers: false,

    })



    // 其他图表信息源配置， 方法雷同， 此处省略

    // ...



    chart.render()



  }, [])



  return <div id={`chart-${id}`} />

}



export default memo(ChartComponent)

以上就是我们的基础物料的实现模式， 可视化组件采用了g2， 当然大家也可以使用熟悉的echart， D3.js等. 不同物料既有通用的 props ， 也有专有的 props， 取决于我们如何定义物料的Schema。

在设计 Schema 前我们需要明确组件的属性划分， 为了满足组件配置的灵活性和通用性， 我做了如下划分:

• 外观属性 (组件宽高， 颜色， 标签， 展现模式等)


• 数据配置 (静态数据， 动态数据)


• 事件/交互 (如单击， 跳转等)

有了以上划分， 我们就可以轻松设计想要的通用Schema了。我们先来看看实现后的配置面板:

这些属性项都是基于我们定义的schema配置项， 通过 解析引擎 动态渲染出来的， 有关 解析引擎 和配置面板， 我会在下面的章节和大家介绍。我们先看看组件的 schema 结构:

const Chart: ChartSchema = {

  editAttrs: [

    {

      key: 'layerName',

      type: 'Text',

      cate: 'base'，

    },

    {

      key: 'y',

      type: 'Number',

      cate: 'base',

    },

    ...DataConfig, // 数据配置项

    ...eventConfig, // 事件配置项

    

  ]，

  config: {

    width: 200,

    height: 200,

    zIndex: 1,

    layerName: '柱状图',

    labelColor: 'rgba(188，200，212，1)',

    // ... 其他配置初始值

    multiColor: ['rgba(91, 143, 249, 1)', 'rgba(91, 143, 249, 1)', 'rgba(91, 143, 249，,1)', 'rgba(91, 143, 249, 1)'],

    data: [

      {

        name: 'A',

        value: 25,

      }，

      {

        name: 'B',

        value: 66,

      }

    ],

  },

}

其中 editAttrs 表示可编辑的属性列表， config 为属性的初始值， 当然大家也可以根据自己的喜好， 设计类似的通用schema。

我们通过以上设计的标准组件和标准schema， 就可以批量且高效的生产各种物料， 还可以轻松集成任何第三方可视化组件库。

3.动态渲染器实现

我们都知道， 一个页面中元素很多时会影响页面整体的加载速度， 因为浏览器渲染页面需要消耗CPU / GPU。对于可视化页面来说， 每一个可视化组件都需要渲染大量的信息元， 这无疑会对页面性能造成不小的影响， 所以我们需要设计一种机制， 让组件异步加载到画布上， 而不是一次性加载几十个几百个组件(这样的话页面会有大量的白屏时间， 用户体验极度下降)。

动态加载器就是提供了这样一种机制， 保证组件的加载都是异步的， 一方面可以减少页面体积， 另一方面用户可以更早的看到页面元素。目前我们熟的动态加载机制也有很多， Vue 和 React 生态都提供了开箱即用的解决方案(虽然我们可以用 webpack 自行设计这样的动态模型， 此处为了提高行文效率， 我们直接基于现成方案封装)。我们先看一下动态渲染组件的过程:

上面的演示可以细微的看出从左侧组件菜单拖动某个组件图标到画布上后， 真正的组件才开始加载渲染。

这里我们以 umi3.0 提供的 dynamic 函数来最小化实现一个动态渲染器. 如果不熟悉 umi 生态的朋友， 也不用着急， 看完我的实现过程和原理之后， 就可以利用任何熟悉的动态加载机制实现它了。实现如下:

import React, { useMemo, memo, FC } from 'react'

import { dynamic } from 'umi'



import LoadingComponent from '@/components/LoadingComponent'





const DynamicFunc = (cpName: string, category: string) => {

  return dynamic({

    async loader() {

      //  动态加载组件

      const { default: Graph } = await import(`@/components/materies/${cpName}`)



      return (props: DynamicType) => {

        const { config， id } = props

        return <Graph {...config} id={id} />

      }

    },

    loading: () => <LoadingComponent />

  })

}



const DynamicRenderEngine: FC<DynamicType> = memo((props) => {

  const { 

  type, 

  config, 

  // 其他配置... 

  } = props

  const Dynamic = useMemo(() => {

    return DynamicFunc(config)

  }, [config])



  return <Dynamic {...props} />

})



export default DynamicRenderEngine

是不是很简单? 当然我们也可以根据自身业务需要， 设计更复杂强大的动态渲染器。

4.配置面板设计

实现配置面板的前提是对组件 Schema 结构有一个系统的设计， 在介绍组件库实现中我们介绍了通用组件 schema 的一个设计案例， 我们基于这样的案例结构， 来实现 动态配置面板。

由上图可以知道， 动态配置面板的一个核心要素就是 表单渲染器。表单渲染器的目的就是基于属性配置列表 attrs 来动态渲染出对应的表单项。我之前写了一篇文章详细的介绍了表单设计器的技术实现的文章， 大家感兴趣也可以参考一下: Dooring可视化之从零实现动态表单设计器。

我这里来简单实现一个基础的表单渲染器模型:

const FormEditor = (props: FormEditorProps) => {

  const { attrs, defaultValue, onSave } = props;



  const onFinish = (values: Store) => {

    // 保存配置项数据

    onSave && onSave(values);

  };

  

  const handlechange = (value) => {

    // 更新逻辑

  }



  const [form] = Form.useForm();



  return (

    <Form

      form={form}

      {...formItemLayout}

      onFinish={onFinish}

      initialValues={defaultValue}

      onValuesChange={handlechange}

    >

      {

        attrs.map((item, i) => {

        return (

          <React.Fragment key={i}>

            {item.type === 'Number' && (

              <Form.Item label={item.name} name={item.key}>

                <InputNumber />

              </Form.Item>

            )}

            {item.type === 'Text' && (

              <Form.Item label={item.name} name={item.key}>

                <Input placeholder={item.placeholder} />

              </Form.Item>

            )}

            {item.type === 'TextArea' && (

              <Form.Item label={item.name} name={item.key}>

                <TextArea rows={4} />

              </Form.Item>

            )}

            // 其他配置类型

          </React.Fragment>

        );

      })}

    </Form>

  );

};

如果大家想看更完整的配置面板实现， 可以参考开源项目 H5-Dooring | H5可视化编辑器

我们可以看看最终的配置面板实现效果:

5.控制中心概述 & 功能辅助设计

控制中心的实现主要是业务层的， 没有涉及太多复杂的技术， 所以这里我简单介绍一下。因为可视化大屏页面展示的信息有些可能是私密数据， 只希望一部分人看到， 所以我们需要对页面的访问进行控制。其次由于企业内部业务战略需求， 可能会对页面进行各种验证， 状态校验， 数据更新频率等， 所以我们需要设计一套控制中心来管理。最基本的就是访问控制， 如下:

功能辅助设计 主要是一些用户操作上的优化， 比如快捷键， 画布缩放， 大屏快捷导航， 撤销重做等操作， 这块可以根据具体的产品需求来完善。大家后期设计搭建产品时也可以参考实现。

可视化大屏数据自治探索

目前我们实现的搭建平台可以静态的设计数据源, 也可以注入第三方接口, 如下:

我们可以调用内部接口来实时获取数据, 这块在可视化监控平台用的场景比较多, 方式如下:

参数(params)编辑区可以自定义接口参数. 代码编辑器笔者这里推荐两款, 大家可以选用:

• react-monaco-editor


• react-codemirror2

使用以上之一可以实现mini版vscode, 大家也可以尝试一下.

辅助功能

可视化大屏一键截图 一键截图功能还是沿用H5-Dooring 的快捷截图方案, 主要用于对大屏的分享, 海报制作等需求, 我们可以使用以下任何一个组件实现:

• dom-to-image


• html2canvas

撤销重做撤销重做功能我们可以使用已有的库比如react-undo, 也可以自己实现, 实现原理:有点链表的意思, 我们将每一个状态存储到数组中, 通过指针来实现撤销重做的功能, 如果要想更健壮一点, 我们可以设计一套“状态淘汰机制”, 设置可保留的最大状态数, 之前的自动淘汰(删除, 更高大上一点的叫出栈). 这样可以避免复杂操作中的大量状态存储, 节约浏览器内存.

标尺参考线 标尺和参考线这里我们自己实现, 通过动态dom渲染来实现参考线在缩放后的动态收缩, 实现方案核心如下:

arr.forEach(el => {

  let dom = [...Array.from(el.querySelectorAll('.calibrationNumber'))][0] as HTMLElement;

  if (dom) {

    dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(

      1,

    )})`;

  }

});

详细源码可参考: H5-Dooring | 参考线设计源码

如果大家有好的建议也欢迎随时交流反馈, 开源不易, 别忘了star哦~

github地址: github.com/MrXujiang/v…

今年大部分时间都是在编码上和写文章上，但是也不知道自己都学到了啥，那就写篇文章来盘点一下目前的技术栈吧，也作为下一年的参考目标，方便知道每一年都学了些啥。

我的技术栈

首先我先来对整体的技术做一个简单的介绍吧，然后后面再对当前的一些技术进行细分吧。

React、Typescript、React Native、mysql、prisma、NestJs、Redis、前端工程化。

React

React 这个框架我花的时间应该是比较多的了，在校期间已经读了一遍源码了，对这些原理已经基本了解了。在随着技术的继续深入，今年毕业后又重新开始阅读了一遍源码，对之前的认知有了更深一步的了解。

也写了比较多跟 React 相关的文章，包括设计模式，原理，配套生态的使用等等都有一些涉及。

在状态管理方面，redux，zustand 我都用过，尤其在 Zustand 的使用上，我特别喜欢 Zustand，它使得我能够快速实现全局状态管理，同时避免了传统 Redux 中繁琐的样板代码，且性能更优。也对 Zustand 有比较深入的了解，也对其源码有过研究。

NextJs

Next.js 是一个基于 React 的现代 Web 开发框架，它为开发者提供了一系列强大的功能和工具，旨在优化应用的性能、提高开发效率，并简化部署流程。Next.js 支持多种渲染模式，包括服务器端渲染（SSR）、静态生成（SSG）和增量静态生成（ISR），使得开发者可以根据不同的需求选择合适的渲染方式，从而在提升页面加载速度的同时优化 SEO。

在路由管理方面，Next.js 采用了基于文件系统的路由机制，这意味着开发者只需通过创建文件和文件夹来自动生成页面路由，无需手动配置。这种约定优于配置的方式让路由管理变得直观且高效。此外，Next.js 提供了动态路由支持，使得开发者可以轻松实现复杂的 URL 结构和参数化路径。

Next.js 还内置了 API 路由，允许开发者在同一个项目中编写后端 API，而无需独立配置服务器。通过这种方式，前后端开发可以在同一个代码库中协作，大大简化了全栈开发流程。同时，Next.js 对 TypeScript 提供了原生支持，帮助开发者提高代码的可维护性和可靠性。

Typescript

今年所有的项目都是在用 ts 写了，真的要频繁修改的项目就知道用 ts 好处了，有时候用 js 写的函数修改了都不知道怎么回事，而用了 ts 之后，哪里引用到的都报红了，修改真的非常方便。

今年花了一点时间深入学习了一下 Ts 类型，对一些高级类型以及其实现原理也基本知道了，明年还是多花点时间在类型体操上，除了算法之外，感觉类型体操也可以算得上是前端程序员的内功心法了。

React Native

不得不说，React Native 不愧是接活神器啊，刚学完之后就来了个安卓和 ios 的私活，虽然没有谈成。

React Native 和 Expo 是构建跨平台移动应用的两大热门工具，它们都基于 React，但在功能、开发体验和配置方式上存在一些差异。React Native 是一个开放源代码的框架，允许开发者使用 JavaScript 和 React 来构建 iOS 和 Android 原生应用。Expo 则是一个构建在 React Native 之上的开发平台，它提供了一套工具和服务，旨在简化 React Native 开发过程。

React Native 的核心优势在于其高效的跨平台开发能力。通过使用 React 语法和组件，开发者能够一次编写应用的 UI 和逻辑，然后部署到 iOS 和 Android 平台。React Native 提供了对原生模块的访问，使开发者能够使用原生 API 来扩展应用的功能，确保性能和用户体验能够接近原生应用。

Expo 在此基础上进一步简化了开发流程。作为一个开发工具，Expo 提供了许多内置的 API 和组件，使得开发者无需在项目中进行繁琐的原生模块配置，就能够快速实现设备的硬件访问功能（如摄像头、位置、推送通知等）。Expo 还内置了一个开发客户端，使得开发者可以实时预览应用，无需每次都进行完整的构建和部署。

另外，Expo 提供了一个完全托管的构建服务，开发者只需将应用推送到 Expo 服务器，Expo 就会自动处理 iOS 和 Android 应用的构建和发布。这大大简化了应用的构建和发布流程，尤其适合不想处理复杂原生配置的开发者。

然而，React Native 和 Expo 也有各自的局限性。React Native 提供更大的灵活性和自由度，开发者可以更自由地集成原生代码或使用第三方原生库，但这也意味着需要更多的配置和维护。Expo 则封装了很多功能，简化了开发，但在需要使用某些特定原生功能时，开发者可能需要“弹出”Expo 的托管环境，进行额外的原生开发。

样式方案的话我使用的是 twrnc，大部分组件都是手撸，因为有 cursor 和 chatgpt 的加持，开发效果还是杠杠的。

rn 原理也争取明年能多花点时间去研究研究，不然对着盲盒开发还是不好玩。

Nestjs

NestJs 的话没啥好说的，之前也都写过很多篇文章了，感兴趣的可以直接观看：

• 面试官：为什么选择学习 Nestjs，而不是 Express？🧐🧐🧐


• NestJS 的生命周期钩子以及它们在不同阶段的都适合做什么？

对 Nodejs 的底层也有了比较深的理解了：

• 探究 CPU 密集型与 IO 密集型任务：提升对 Node.js 中 libuv 库的理解

Prisma & mysql

Prisma 是一个现代化的 ORM（对象关系映射）工具，旨在简化数据库操作并提高开发效率。它支持 MySQL 等关系型数据库，并为 Node.js 提供了类型安全的数据库客户端。在 NestJS 中使用 Prisma，可以让开发者轻松定义数据库模型，并通过自动生成的 Prisma Client 执行类型安全的查询操作。与 MySQL 配合时，Prisma 提供了一种简单、直观的方式来操作数据库，而无需手动编写复杂的 SQL 查询。

Prisma 的核心优势在于其强大的类型安全功能，所有的数据库操作都能通过 Prisma Client 提供的自动生成的类型来进行，这大大减少了代码中的错误，提升了开发的效率。它还包含数据库迁移工具 Prisma Migrate，能够帮助开发者方便地管理数据库结构的变化。此外，Prisma Client 的查询 API 具有很好的性能，能够高效地执行复杂的数据库查询，支持包括关系查询、聚合查询等高级功能。

与传统的 ORM 相比，Prisma 使得数据库交互更加简洁且高效，减少了配置和手动操作的复杂性，特别适合在 NestJS 项目中使用，能够与 NestJS 提供的依赖注入和模块化架构很好地结合，提升整体开发体验。

Redis

Redis 和 mysql 都仅仅是会用的阶段，目前都是直接在 NestJs 项目中使用，都是已经封装好了的，直接传参调用就好了：

import { Injectable, Inject, OnModuleDestroy, Logger } from "@nestjs/common";

import Redis, { ClientContext, Result } from "ioredis";



import { ObjectType } from "../types";



import { isObject } from "@/utils";



@Injectable()

export class RedisService implements OnModuleDestroy {

  private readonly logger = new Logger(RedisService.name);



  constructor(@Inject("REDIS_CLIENT") private readonly redisClient: Redis) {}



  onModuleDestroy(): void {

    this.redisClient.disconnect();

  }



  /**

   * @Description: 设置值到redis中

   * @param {string} key

   * @param {any} value

   * @return {*}

   */

  public async set(

    key: string,

    value: unknown,

    second?: number

  ): Promise<Result<"OK", ClientContext> | null> {

    try {

      const formattedValue = isObject(value)

        ? JSON.stringify(value)

        : String(value);



      if (!second) {

        return await this.redisClient.set(key, formattedValue);

      } else {

        return await this.redisClient.set(key, formattedValue, "EX", second);

      }

    } catch (error) {

      this.logger.error(`Error setting key ${key} in Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 获取redis缓存中的值

   * @param key {String}

   */

  public async get(key: string): Promise<string | null> {

    try {

      const data = await this.redisClient.get(key);



      return data ? data : null;

    } catch (error) {

      this.logger.error(`Error getting key ${key} from Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 设置自动 +1

   * @param {string} key

   * @return {*}

   */

  public async incr(

    key: string

  ): Promise<Result<number, ClientContext> | null> {

    try {

      return await this.redisClient.incr(key);

    } catch (error) {

      this.logger.error(`Error incrementing key ${key} in Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 删除redis缓存数据

   * @param {string} key

   * @return {*}

   */

  public async del(key: string): Promise<Result<number, ClientContext> | null> {

    try {

      return await this.redisClient.del(key);

    } catch (error) {

      this.logger.error(`Error deleting key ${key} from Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 设置hash结构

   * @param {string} key

   * @param {ObjectType} field

   * @return {*}

   */

  public async hset(

    key: string,

    field: ObjectType

  ): Promise<Result<number, ClientContext> | null> {

    try {

      return await this.redisClient.hset(key, field);

    } catch (error) {

      this.logger.error(`Error setting hash for key ${key} in Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 获取单个hash值

   * @param {string} key

   * @param {string} field

   * @return {*}

   */

  public async hget(key: string, field: string): Promise<string | null> {

    try {

      return await this.redisClient.hget(key, field);

    } catch (error) {

      this.logger.error(

        `Error getting hash field ${field} from key ${key} in Redis`,

        error

      );



      return null;

    }

  }



  /**

   * @Description: 获取所有hash值

   * @param {string} key

   * @return {*}

   */

  public async hgetall(key: string): Promise<Record<string, string> | null> {

    try {

      return await this.redisClient.hgetall(key);

    } catch (error) {

      this.logger.error(

        `Error getting all hash fields from key ${key} in Redis`,

        error

      );



      return null;

    }

  }



  /**

   * @Description: 清空redis缓存

   * @return {*}

   */

  public async flushall(): Promise<Result<"OK", ClientContext> | null> {

    try {

      return await this.redisClient.flushall();

    } catch (error) {

      this.logger.error("Error flushing all Redis data", error);



      return null;

    }

  }



  /**

   * @Description: 保存离线通知

   * @param {string} userId

   * @param {any} notification

   */

  public async saveOfflineNotification(

    userId: string,

    notification: any

  ): Promise<void> {

    try {

      await this.redisClient.lpush(

        `offline_notifications:${userId}`,

        JSON.stringify(notification)

      );

    } catch (error) {

      this.logger.error(

        `Error saving offline notification for user ${userId}`,

        error

      );

    }

  }



  /**

   * @Description: 获取离线通知

   * @param {string} userId

   * @return {*}

   */

  public async getOfflineNotifications(userId: string): Promise<any[]> {

    try {

      const notifications = await this.redisClient.lrange(

        `offline_notifications:${userId}`,

        0,

        -1

      );

      await this.redisClient.del(`offline_notifications:${userId}`);



      return notifications.map((notification) => JSON.parse(notification));

    } catch (error) {

      this.logger.error(

        `Error getting offline notifications for user ${userId}`,

        error

      );



      return [];

    }

  }



  /**

   * 获取指定 key 的剩余生存时间

   * @param key Redis key

   * @returns 剩余生存时间（秒）

   */

  public async getTTL(key: string): Promise<number> {

    return await this.redisClient.ttl(key);

  }

}

前端工程化

前端工程化这块花了很多信息在 eslint、prettier、husky、commitlint、github action 上，现在很多项目都是直接复制之前写好的过来就直接用。

后续应该是投入更多的时间在性能优化、埋点、自动化部署上了，如果有机会的也去研究一下 k8s 了。

全栈性价比最高的一套技术

最近刷到一个帖子，讲到了

我目前也算是一个小全栈了吧，我也来分享一下我的技术吧：

剩下的描述也是和他下面那句话一样了（毕业后对技术态度的转变就是什么能让我投入最小，让我最快赚到钱的就是好技术）

总结

学无止境，任重道远。

最后再来提一下这两个开源项目，它们都是我们目前正在维护的开源项目：

• 在线代码协同编辑器


• 前端脚手架 create-neat

如果你想参与进来开发或者想进群学习，可以添加我微信 yunmz777，后面还会有很多需求，等这个项目完成之后还会有很多新的并且很有趣的开源项目等着你。