现状

现在最流行的大屏自适应手法： scale缩放

为了解决2d/3d的点击交互问题，通常设计成了2个层容器。图表层和2d/3d层。图表层负责缩放，2d/3d层保持100%显示，避免缩放引起的交互事件event问题。

下图是一个1920*1080的大屏示意图

使用常规的缩放方法，让大屏在窗口内最大化显示。大屏在不同的窗口中出现了空白区域，并没有充满整个屏幕。

新的方法 

在缩放的基础上，对指定的要素进行贴边处理。我们希望上下吸附到窗口最上面和最下面。左右图表吸附到窗口的最左边和最右边。

这里面需要简单的计算，其中a是图表层 scale属性

var halftop = (window.innerHeight- (1080*a.scaleY))/2/a.scaleY;

var halfleft = (window.innerWidth- (1920*a.scaleX))/2/a.scaleX; 

对指定id的容器，在resize事件中设置上下左右浮动。如下图

实战项目效果

注，下面图片中的数据指标、城市名、姓名、图像均为虚拟数据。

在实际应用中，一般1920*1080设计稿已宽屏为主，如果是竖屏大屏（下图6），需要设计竖屏UI。

你也可以下载该项目demo, 对窗口进行缩放查看效果 pan.baidu.com/s/1hE_C9x9i…

前言

前端：芜湖~静态页面写完，起飞

前端：接口能不能搞快点

后端：没空

前端：emmmmmm

迭代结束.....

老板：前端你怎么回事？搞这么慢

前端：

A：跳起来打老板

B：跳起来打后端

C：不干了

D：自己全干

E：继续挨骂

CABABABABABBABABABABBABD

当然是选择Mock.js啦（骗你的，我自己也不用）

Mock.js 的使用教程

一、什么是 Mock.js？

Mock.js 是一个用于生成随机数据的 JavaScript 库，它可以帮助开发者快速模拟后台接口返回的数据，常用于前端开发中的接口调试和数据展示。通过使用 Mock.js，前端开发者无需依赖后端接口就可以模拟真实的接口数据，提升开发效率。

Mock.js 支持的数据类型非常丰富，包括字符串、数字、日期、图片等，并且可以对数据进行自定义设置，模拟出不同的场景。

二、安装 Mock.js

Mock.js 是一个轻量级的库，可以通过 npm 或 yarn 安装：

# 使用 npm 安装

npm install mockjs --save



# 使用 yarn 安装

yarn add mockjs

如果你没有使用包管理工具，也可以直接在 HTML 页面中通过 <script> 标签引入 Mock.js：

<script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock.min.js"></script>

三、Mock.js 的基本使用

Mock.js 提供了一个全局的 Mock 对象，使用 Mock 对象，你可以轻松地创建模拟数据。

1. 使用 Mock.mock() 方法

Mock.mock() 是 Mock.js 的核心方法，用于创建模拟数据。它接受一个模板作为参数，根据这个模板生成相应的模拟数据。

示例：生成简单的随机数据

const Mock = require('mockjs');



// 模拟一个简单的用户数据对象

const userData = Mock.mock({

  'name': '@name',         // 随机生成姓名

  'age|18-60': 25,         // 随机生成 18-60 之间的年龄

  'email': '@email',       // 随机生成邮箱地址

});



console.log(userData);

在这个例子中，@name、@email 等是 Mock.js 内置的随机数据生成规则，'age|18-60': 25 是一种范围随机生成规则，它会生成 18 到 60 之间的随机数。

模拟输出：

{

  "name": "张三",

  "age": 34,

  "email": "example@example.com"

}

2. 模拟数组数据

Mock.js 还可以生成数组数据，支持定义数组长度以及每个元素的生成规则。

const Mock = require('mockjs');



// 模拟一个包含多个用户的数组

const userList = Mock.mock({

  'users|3-5': [{          // 随机生成 3 到 5 个用户对象

    'name': '@name',

    'age|20-30': 25,

    'email': '@email'

  }]

});



console.log(userList);

模拟输出：

{

  "users": [

    { "name": "李四", "age": 22, "email": "user1@example.com" },

    { "name": "王五", "age": 28, "email": "user2@example.com" },

    { "name": "赵六", "age": 25, "email": "user3@example.com" }

  ]

}

3. 使用自定义规则生成数据

Mock.js 还支持自定义规则，你可以定义数据生成的规则，或者通过函数来生成特定的数据。

const Mock = require('mockjs');



// 使用自定义函数生成随机数据

const customData = Mock.mock({

  'customField': () => {

    return Math.random().toString(36).substr(2, 8);  // 返回一个随机的 8 位字符串

  }

});



console.log(customData);

模拟输出：

{

  "customField": "rkf7hbw8"

}

四、常用的 Mock.js 模板规则

Mock.js 提供了丰富的数据生成规则，下面列出一些常用的规则。

1. 字符串相关规则

• @name：生成一个随机的中文名字。


• @cname：生成一个随机的中文全名。


• @word(min, max)：生成一个随机的单词，min 和 max 控制长度。


• @sentence(min, max)：生成一个随机的句子，min 和 max 控制单词数量。


• @email：生成一个随机的邮箱地址。


• @url：生成一个随机的 URL 地址。

2. 数字相关规则

• @integer(min, max)：生成一个随机整数，min 和 max 控制范围。


• @float(min, max, dmin, dmax)：生成一个随机浮点数，min 和 max 控制范围，dmin 和 dmax 控制小数点位数。


• @boolean：生成一个随机布尔值。


• @date(format)：生成一个随机日期，format 为日期格式，默认是 yyyy-MM-dd。


• @time(format)：生成一个随机时间。

3. 其他类型

• @image(size, background, foreground)：生成一张图片，size 控制图片大小，background 控制背景色，foreground 控制前景色。


• @guid：生成一个 GUID。


• @id：生成一个随机的身-份-证号。


• @province、@city、@county：生成随机的省、市、区名称。

五、Mock.js 用于模拟接口数据

Mock.js 常用于前端开发中模拟接口数据，帮助前端开发人员在没有后端接口的情况下进行开发和调试。可以通过 Mock.mock() 来拦截 HTTP 请求，并返回模拟的数据。

示例：模拟一个接口请求

假设我们有一个接口需要返回用户数据，我们可以使用 Mock.js 来模拟这个接口。

const Mock = require('mockjs');



// 模拟接口请求

Mock.mock('/api/users', 'get', {

  'users|5-10': [{    // 随机生成 5 到 10 个用户数据

    'id|+1': 1,       // id 从 1 开始递增

    'name': '@name',

    'email': '@email',

    'age|18-60': 25,

  }]

});



console.log('接口已模拟，发送请求查看结果');

在上面的代码中，Mock.mock() 拦截了对 /api/users 的 GET 请求，并返回一个包含随机用户数据的对象。当前端代码请求 /api/users 时，Mock.js 会自动返回模拟的数据。

六、Mock.js 高级用法

1. 延迟模拟

有时你可能希望模拟网络延迟，Mock.js 支持使用 timeout 配置来延迟接口响应。

Mock.mock('/api/data', 'get', {

  'message': '成功获取数据'

}).timeout = 2000;  // 设置延迟时间为 2000ms (2秒)

2. 使用正则表达式生成数据

Mock.js 还支持通过正则表达式来生成数据。例如，生成一个特定格式的电话号码。

const phoneData = Mock.mock({

  'phone': /^1[3-9]\d{9}$/   // 正则表达式生成一个中国大陆手机号

});



console.log(phoneData);

3. 动态修改数据

Mock.js 还允许你在数据生成后对其进行动态修改，可以通过调用 Mock.Random 对象来获取随机数据，并进一步自定义。

const random = Mock.Random;

const customData = {

  name: random.name(),

  email: random.email(),

  phone: random.phone(),

};



console.log(customData);

七、总结

Mock.js 是一个强大的工具，可以帮助你快速生成模拟数据，尤其适用于前后端分离的开发模式，前端开发人员可以独立于后端接口进行开发和调试。Mock.js 提供了灵活的数据生成规则，支持随机数、日期、图片等多种类型，并且能够模拟 HTTP 接口请求，极大地提高了开发效率。

掌握 Mock.js 的基本用法，可以帮助你在开发过程中更加高效，减少对后端开发的依赖，提升整个项目的开发速度。

各位彦祖亦菲再见ヾ(￣▽￣)ByeBye

说在前面

😶‍🌫️国庆过后，金价就大跳水，一直往下跌，看样子暂时是停不下来了，女朋友之前也入手了一点黄金，因此对黄金价格的变化比较关心，为了让她不用整天盯着实时金价，所以就搞了一个金价监控工具，超出设置的阈值就会发送邮件提醒✉。

一、金价信息获取方案

金价实时信息有两种方案可以获取到：

1、网页信息爬取

我们可以先找到一些官方的金价信息网站，然后直接利用爬虫直接爬取，比如：quote.cngold.org/gjs/jjs.htm…

2、通过接口获取

例如nowapi中就有黄金数据信息接口，我们可以直接通过接口来获取：

二、提醒阈值设置

1、创建数据库

2、监控页面编写

简单编写一个页面用于添加和调整提醒内容。

三、修改配置信息

1、邮箱配置

这里我使用的qq邮箱作为发件账号，需要开启邮箱授权，获取授权码。

{

  host: "smtp.qq.com", // 主机

  secureConnection: true, // 使用 SSL

  port: 465, // SMTP 端口

  auth: {

    user: "jyeontu@qq.com", // 自己用于发送邮件的账号

    pass: "jyeontu", // 授权码(这个是假的,改成自己账号对应即可,获取方法: QQ邮箱-->设置-->账户-->POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务-->IMAP/SMTP开启 复制授权码)

  }

}

• （1）打开pc端qq邮箱，点击设置，再点击帐户

• （2）往下拉 可开启POP3/SMTP服务 根据提示即可获取qq邮箱授权码

• （3）将获取到的授权码复制到配置信息里即可

2、数据库配置

填写数据库对应的配置信息。

{

  host: "localhost",

  user: "root", //数据库账号

  password: "jyeontu", //数据库密码

  database: "test", //数据库名称

}

3、nowapi配置

免费开通后将AppKey和Sign替换成自己的就可以了。

{

  AppKey: AppKey,

  Sign: "Sign",

}

四、脚本功能编写

1、获取金价信息

我直接使用nowapi的免费试用套餐，配额是10 次/小时。

const { nowapiConfig } = require("./config.js");

async function getGoldPrice() {

  const result = await axios.get(

    `https://sapi.k780.com/?app=finance.gold_price&goldid=1053&appkey=${nowapiConfig.AppKey}&sign=${nowapiConfig.Sign}&format=json`

  );

  return result.data.result.dtList["1053"];

}

获取到的数据如下：

2、获取消息提醒阈值

（1）连接数据库

使用填写好的数据库配置信息连接数据库

const mysql = require("mysql");

const { dbConfig } = require("./config.js");



const connection = mysql.createConnection(dbConfig);



function connectDatabase() {

  return new Promise((resolve) => {

    connection.connect((error) => {

      if (error) throw error;

      console.log("成功连接数据库！");

      resolve("成功连接数据库！");

    });

  });

}

（2）查询数据

function mysqlQuery(sqlStr) {

  return new Promise((resolve) => {

    connection.query(sqlStr, (error, results) => {

      if (error) throw error;

      resolve(results);

    });

  });

}



async function getMessage() {

  const sqlStr =

    "select * from t_message where isShow = 1 and isActive = 1 and type = '金价监控';";

  const res = await mysqlQuery(sqlStr);

  return { ...res[0] };

}

获取到的数据如下：

3、发送提醒邮件

（1）创建邮件传输对象

使用填写好的邮箱配置信息，创建邮件传输对象

const nodemailer = require("nodemailer");

const { mail } = require("./config.js");



const smtpTransport = nodemailer.createTransport(mail);

const sendMail = (options) => {

  return new Promise((resolve) => {

    const mailOptions = {

      from: mail.auth.user,

      ...options,

    };

    // 发送邮件

    smtpTransport.sendMail(mailOptions, function (error, response) {

      if (error) {

        console.error("发送邮件失败：", error);

      } else {

        console.log("邮件发送成功");

      }

      smtpTransport.close(); // 发送完成关闭连接池

      resolve(true);

    });

  });

};

module.exports = sendMail;

（2）阈值判断

判断获取到的金价信息是否超出阈值范围来决定是否发送邮件提醒

async function mail(messageInfo, goldInfo) {

  let { minVal = -Infinity, maxVal = Infinity } = messageInfo;

  let { buy_price } = goldInfo;

  minVal = parseFloat(minVal);

  maxVal = parseFloat(maxVal);

  buy_price = parseFloat(buy_price);

  if (minVal < buy_price && maxVal > buy_price) {

    return;

  }

  const mailOptions = {

    to: messageInfo.mail.replaceAll("、", ","), // 接收人列表,多人用','隔开

    subject: "金价监控",

    text: `当前金价为${buy_price.toFixed(2)}`,

  };

  await sendMail(mailOptions);

}

五、定时执行脚本

可以使用corn编写一个定时任务来定时执行脚本即可。

• * * * * * *分别对应：秒、分钟、小时、日、月、星期。


• 每个字段可以是具体的值、范围、通配符（*表示每一个）或一些特殊的表达式。

例如：

0 0 * * *：每天午夜 0 点执行。

0 30 9 * * 1-5：周一到周五上午 9:30 执行。

你可以根据自己的需求设置合适的 cron 表达式来定时执行特定的任务。

六、效果展示

如果金价不在我们设置的阈值内时，我们就会收到邮件告知当前金价：

七、脚本使用

1、源码下载

git clone https://gitee.com/zheng_yongtao/node-scripting-tool.git

• 源码已经上传到gitee仓库

gitee.com/zheng_yongt…

• 具体目录如下：

2、依赖下载

npm install

3、配置数据填写

这里的配置信息需要修改为你自己的信息，数据库、gitee仓库、nowapi配置。

4、脚本运行

node index.js

更多脚本

该脚本仓库里还有很多有趣的脚本工具，有兴趣的也可以看看其他的：gitee.com/zheng_yongt…

🌟觉得有帮助的可以点个star~

🖊有什么问题或错误可以指出，欢迎pr~

📬有什么想要实现的工具或想法可以联系我~

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

大家好，我是双越，也是 wangEditor 作者。

今年我致力于开发一个 Node 全栈 AIGC 知识库 划水AI，包括 AI 写作、多人协同编辑。复杂业务，真实上线，大家可以去注册试用。

本文分享一下前端实用的 AI 工具 v0.dev 以及我在 划水AI 中的实际应用经验，非常推荐这款工具。

不同 AI 工具写代码

ChatGPT 不好直接写代码

去年 ChatGPT 发布，但它一直是一个聊天工具，直接让它来写代码，用一问一答的形式，体验其实并不是非常友好。

可以让它来生成一些单一的代码或工具，例如 生成一个 nodejs 发送 Email 的函数 。然后我们把生成的代码复制粘贴过来，自己调整一下。

它可以作为一个导师或助理，指导你如何写代码，但它没法直接帮你写，尤其是在一个项目环境中。

PS. 这里只是说 ChatGPT 这种问答方式不适合直接写代码，但 ChatGPT 背后的 LLM 却未后面各种 AI 写代码工具提供了支持。

Cursor 非专业程序员

Cursor 其实去年我就试用过，它算是 AI 工具 + VSCode ，付费试用。没办法，AI 接口服务现在都是收费的。

前段时间 Cursor 突然在社区中很火爆，国内外都有看过它的宣传资料，我记得看过一个国外的 8 岁小女孩，用 Cursor 写 AI 聊天工具的视频，非常有意思，我全程看完了。

Cursor 可能会更加针对于非专业编程人员，去做一些简单的 demo ，主要体验编程的逻辑和过程，不用关心其中的 bug 。

例如，对于公司的 PM UI 人员，或者创业公司的老板。它真的可以产生价值，所以它也可以收费。

Copilot 针对专业程序员

我们是专业程序员，我更加推荐 Copilot ，直接在 vscode 安装插件即可。

我一直在使用 Copilot ，而且我现在都感觉自己有点依赖它了，每次写代码的时候都会停顿下来等待它帮我生成。

在一些比较明确的问题上，它的生成是非常精准的，可以大大节省人力，提高效率。

如果你遇到 Copilot 收费的问题，可以试试 Amazon CodeWhisper ，同样的功能，目前是免费的，未来不知道是否收费。

UI 很重要！！！

对于一个前端人员，有 UI 设计稿让他去还原开发这并不难，但你让他从 0 设计一个精美的 UI 页面，这有点困难。别说精美，能做到 UI 的基本美观就已经很不容易了。

举个例子，这是我偶遇一个笔记软件，这个 UI 真的是一言难尽：左上角无端的空白，左侧不对齐，icon 间距过大，字号不统一，tab 间距过小 …… 这种比较随性的 UI 设计，让人看了就没有任何试用的欲望。

可以在对比看一下 划水AI 的 UI 界面，看颜色、字号、艰巨、icon 等这些基础的 UI ，会否更加舒适一些？专业一些？

PS. 无意攻击谁（所以打了马赛克），只是做一个对比，强调 UI 的重要性。

V0 专业生成 UI 代码

V0 也是专业写代码的，不过它更加专注于一个方向 —— 生成 UI 代码 ，能做到基本的美观、舒适、甚至专业。

给一个指令 a home page like notion.com 生成了右侧的 UI 界面，我觉得已经非常不错了。要让我自己设计，我可设计不出来。

这一点对于很多人来说都是极具价值的，例如中小公司、创业公司的前端人员，他们负责开发 UI 但是没有专业的 UI 设计师，或者说他们开发的是一些 toB 的产品，也不需要招聘一个专职的 UI 设计师。

你可以直接拷贝 React 代码，也可以使用 npx 命令一键将代码转移到你自己的项目中。

它甚至还会考虑到响应式布局和黑白主题，这一点很惊艳

再让 V0 生成一个登录页，看看能做到啥效果。在首页输入指令 A login form like Github login page

等待 1-2 分钟，生成了如下效果，我个人还是挺满意的。如果让我自己写，我还得去翻阅一些 UI 组件库文档，看 form 表单怎么写，怎么对齐，宽度多少合适 …… 光写 UI 也得搞半天。

划水AI 中“我的首页” 就是 V0 生成的，虽然这个页面很简洁，但是我个人对 UI 要求很高，没有工具帮助，我无法短时间做到满意。

最后

任何行业和领域，看它是否成熟、是否能发展壮大，一个很重要的特点就是：是否有庞大的细分领域。例如现代医学、现代制造业、计算机领域…… 专业细分及其周密，大家各司其职，整个领域才能欣欣向荣。

AI 领域也是一样，AI 编程将是一个细分领域，再往下还有更多细分领域，像针对 UI 的、针对数据库的、针对云服务的，未来会有更多这方面的发展。

用 vue 写了个直播助手，榜一大哥爱上了她，她爱上了我

这是一个什么样的程序？这是一个使用 sys-shim/vue3/vite 开发的一个 windows 程序。用于向网站注入自己的代码以实现一些自动化功能。

sys-shim 是什么？它是一个我开发的个人工具，力求前端人员无需了解其他语言的情况下快速制作轻量的 windows 程序，详情请移步 electron 和 tauri 都不想用，那就自己写个想用的吧 。

为什么要开发这样的程序

虽然已经过去了很久，但那天的场景还是历历在目。

那天是在周五晚上 23 点过，大楼的中央空调都关了，我搓了搓手，看着还未完成的工作，想了想再不回去公车就没了，到家的话饭店也关门了。

然后按了一下显示器的电源按钮，让电脑继续工作着，准备回家吃饭后远程继续工作。

在大楼电梯遇到一个长得很挺好看的女生，由于这一层我们公司，然后看样子好像是直播部门的同事，虽然平时也都不怎么遇见，更没什么交集，只是公司偶尔让大家去主播间刷下人气，有点印象，猜想应该是直播部门的吧啦吧啦**蕾。

虽然是同事，却不熟悉，想打个招呼都不知道说啥，有点尴尬。然后我索性无所是事刷微信列表去了，虽然微信列表里一条消息也没有。。。

突然她给我来了句：“小哥哥你是我们公司的吧，你们平时下班都这么晚的吗？”一边哈气搓手。

我礼貌性笑了一下：“嗯，不是每天都这么晚。”，然后继续低头无所是事的刷微信列表。

大约一两秒之后，她说：“哦”。然后再停顿一会，好像又找到了什么话题：“那你们最近工作也很忙吗？但是我前两几天也没基本没遇到我们公司这么晚下班的人”。

这句话听起来好像传达了很多信息。但时间可不允许我慢慢思考每个信息应该如何正确应对，就像领导给的项目开发时间根据来不及完善好每一个细节一样。

我只能粗略回答：“没有特别忙，只是有时候我喜欢弄些小工具啥的，一不小心就已很晚了”。我心里想：感觉有点像面试，没有说公司不好，又显得自己爱学习，是一个能沉浸于思考的人，应该没问题吧。

“真好，看得出来你还十分热爱你这份职业。能够愿意花自己的时候去研究它们。”听语气好像是有一点羡慕我，感觉还有一点就是她不太喜欢她现在的工作。是呀，我也经常在想，做直播的那些人，有多少是喜欢整蛊自己，取悦别人，有多少是喜欢见人就哥哥好，哥哥帅，哥哥真的好可爱？

“只是觉得，能有一些工具，能帮助减少些重复劳动，就挺好”。

“对对对，小哥哥你说得太对了，就是因为有工具，减少了很多像机器一样的工作，人才可以去做更多有意义的，不像是机器那样的事情。”

当她说这句话的时候，我想，有一种不知道是不是错觉的错觉，真是个有想法的人！还有，这难道是在夸我们这些做工具的人吗？但是她说这句时的微笑，一下子就让人感到了她的热情和礼貌。

我心想，竟然这么有亲和力，很想有愿意继续沟通的想法。对！不然人家怎么能做主播？要换我上去做主播，绝对场也冷了，人也散了。

我一边告诉自己，因为能做主播，所以她本身就很有亲和力，所以你感觉她很热情，是因为这个热情是固有属性，并不是对于你热情。

一边竟开始好奇，这么漂亮又有亲和力的妹子，谁的下属？忍心让她上班这么晚？谁的女朋友？忍心让她上班这么晚？

好奇心害死猫。我竟然还是问出那句话：

“为什么你这么晚才下班呢？”

“最近销售量有点下滑，我想保住我销售额前一至少前二名的位置。”听到这句话的时候，我有点惊讶。我靠，居然是销冠。然后我不温不火的说到：“是啊，快过年了，得拿年终奖。”

“不是，就是想着让成绩保持着，马上快一年了。”尴尬，人家只是想保持成绩。是我肤浅了。等等！保持快一年？没记错的话她好像也才在公司直播一年不到吧！这就是传说中的入职即巅峰吗？我突然觉得我好菜！好想快点自觉走开，奈何地铁还没到！

“原来是销冠，这么厉害！我以为是年底为了冲年终奖，是我肤浅了~”我简单表达一下敬意和歉意。有颜值有能力，突然人与人之间的距离一下就拉开了。

“没有没有！钱也重要，钱也重要！”她噗呲一笑。然后用期盼的眼神看着我，“对了，你喜欢研究小工具来着，你有没有知道哪种可以在直播时做一些辅助的小工具？我网上找了好多，都是只能用在抖音斗鱼这些大公司的辅助工具，我们公司的这个直播平台的一直没有找到。哎呀！好烦~”

完犊子了，这题我不会。看着她好像是工具花了很久没有找到，焦急得好像就要跺脚的样子，我只感觉头皮发麻，要掉头发了！怎么办？怎么办？哪里有这种工具？

但话题还是要接着啊！我开始答非所问：“到没关注过这方面的小工具，但我听说现在有些自动直播的工具，可以克隆人像和声音二十四小时直播。”

“不需要不需要，我不需要这么高端的工具，而且那些自动播的很缺少粉丝互动的。我只要可以帮我定时上下架商品啥的就好。”

我心想，这不搞个脚本 setInterval 一下就行？虽然但是要做得方便他们使用的形式还是得折腾下。我们这个直播平台又不是大平台，网上肯定也没有现成的，不过要做一个没什么难度。

我回答说：“那我帮你找找。”

“谢谢谢谢小哥哥！你人真好！”看着她一边开心的笑着一边双手拜托的样子，我既感觉完犊子了入坑了，又恨不得现在就给她做一个出来！

车来了。她转头看了一下，然后又转过头来问我“小哥哥可以加下你微信吗？你有消息的话随随时通知我，我都在的。”

我：“行的。”

她：“我加你我加你~”

我竟然一下子没有找到我的微信二维码名片在哪，确实，从来就没有其他女生加过我，没什么经验倒也正常，是吧？她又转头看了看停车的车，我知道她是她的车，可她还告诉我没事的慢慢来。

她加上了我的微信，然后蹦上滴滴滴快要关门的列车，在窗口笑着向我挥手告别。在转角那一刻她指了指手机，示意我看微信。

“我叫李蕾^_^”。

“收到”。

功能设计

在上一节为什么要开发这样的程序花费了一定量的与技术无关的笔墨，可能有些读者会反感。对此我表示：你以为呢？接到一个项目哪那么容易？手动狗头。

在功能方面，主要考虑以下特性：

开发时方便

不方便肯定会影响开发进度啦。热更新热部署啥的，如果没有这些开发体验那可是一点都不快乐~

使用时点开就能用

解压、下一步下一步安装了都不要了。

多设备下多平台下多配置支持

如果不做设备隔离，万一主播把这软件发给别人用，岂不是乱套了。多平台的考虑是因为反正都是注入脚本，就统一实现。多配置主要实现每个配置是不同的浏览器配置和数据隔离。

便于更新

减少文件发来发去、版本混乱等问题。

便于风控

如果改天主播说这软件不想用了，那我远程关闭就行。

看下总体界面

一个设备支持多个主配置，每个主配置可以绑定密钥进行验证。

主配置验证通过之后，才是平台配置，平台配置表示系统已支持自动化的平台，例如疼训、筷手这些平台。这些每个平台对应自己的 logo、自动化脚本文件和状态。

自动化脚本文件在开发过程中可以修改，用户侧不可见，直接使用即可。

每个平台下有多个配置，比如疼训这个平台下，创建配置A作为账号A的自动化程序，配置B作为账号B的自动化程序。因为每个配置启动的是不同的浏览器实例，所以疼训理论上不会认为多个账号在同一浏览器下交叉使用。反正我司的平台肯定不会认为~

然后配置下有一些通用的功能：例如智能客服可以按关键字进行文字或语音回复。

例如假设你配置了一个关键字列表为

keys = [`小*姐姐`, `漂亮`]

reply = [`谢谢大哥`, `大哥你好呀`, `你也好帅`]

当你进入直播间，发了一句小*姐姐真漂亮时，就可能会自动收到小*姐姐的语音谢谢大哥, 你也好帅。

在场控助手这边，根据场控需求，直播间可以按指定规则进行自动发言，自动高亮评论（就是某个评论或系统设定的内容以很抢眼的形式展示在屏幕上），这是防止直播间被粉丝门把话题逐渐带偏的操作方法之一。

商品助手这边，有一些按指定规则、时间或顺序等配置展示商品的功能。

技术选型

• 使用 vue3/vite 进行界面开发。这部分众所周知是热更新的，并且可以在浏览器中进行调试。


• 使用 sys-shim 提供的 js api 进行浏览器窗口创建、读写操作系统的文件。当创建浏览器窗口后，需要关闭窗口。


• 使用 mockm 进行接口开发，自动实现多设备、平台、配置的 crud 逻辑支持。

在 vue3 进行界面开发的过程中，这个过程可以在浏览器里面也可以 sys-shim 的 app 容器中。因为界面与 sys-shim 进行通信主要是通过 websocket 。前端调用某个函数，例如打开计算器，然后这个函数在内部构造成 websocket 的消息体传给 sys-shim 去调用操作系统的 api 打开计算器。就像是前端调用后端提供的 api 让后端调用数据库查询数据，返回数据给前端。

在界面完成之后，把界面部署在服务器上，这样如果有更新的话，就像普通的前端项目一样上传 dist 中内容在服务器上即可。发给主播的 app 读取服务器内容进行界面展示和功能调用。

计划安排

• 周五加加班，用两小时完成数据模型、API实现


• 周六完成主要功能界面、交互开发


• 周日上午进行体验完善、发布测试

开发过程

由于我只是个做前端的，并且只是个实习生。所以用到的技术都很简单，下面是具体实现：

数据模型、API实现

由于是多设备、多平台、多配置，所以数据模型如下：

const db = util.libObj.mockjs.mock({

  // 设备

  'device|3-5': [

    {

      'id|+1': 1,

      电脑名: `@cname`,

    },

  ],

  // 主配置

  'config|10': [

    {

      'id|+1': 1,

      deviceId() {

        const max = 3

        return this.id % max || 3

      },

      名称: `@ctitle`,

      卡密: `@uuid`,

      激活时间: `@date`,

      过期时间: `@date`,

    },

  ],

  // 平台

  platform: [

    {

      id: 1,

      封面: [

        {

          label: `@ctitle`,

          value: `@image().jpg`,

        },

      ],

      网址: `https://example.com/`,

      状态: `可使用`,

      脚本文件: [

        {

          label: `@ctitle().js`,

          value: `@url().js`,

        },

      ],

      名称: `豆印`,

    },

  ],

  'devicePlatformConfig|1-3': [

    {

      'id|+1': 1,

      名称: `默认`,

      deviceId() {

        const max = 3

        return this.id % max || 3

      },

      platformId() {

        const max = 3

        return this.id % max || 3

      },

      configId() {

        const max = 3

        return this.id % max || 3

      },

      数据目录() {

        return `data/${this.id}`

      },

      // 功能配置

      action: {

        智能客服: {

          文字回复: {

            频率: `@integer(1, 5)-@integer(6, 10)`,

            启用: `@boolean`,

            '配置|1-5': [

              {

                关键词: `@ctitle`,

                回复: `@ctitle`,

              },

            ],

          },

          // ... 省略更多配置

        },

        // ... 省略更多配置

      },

    },

  ],

}),

观察上面的数据模型, 例如主配置中有一个 deviceId，由于这个字段是以驼峰后缀的 Id 结尾，所以会自动与 device 表进行关联。

platform 这张表由于没有与其他表有关联关系，所以无需添加含有 ...Id 的字段。

devicePlatformConfig 平台设备配置这张表，是某设备创建的针对于某一主配置下的某平台下的某一配置，所以会有 deviceId / platformId / configId 。

这样如何要查某设备下的所有平台的配置，直接 /devicePlatformConfig?deviceId=查某设备ID 即可。

由于上面这些表声明关联关系之后，模拟数据和接口都是自动生成的，所以这一块并没有其他步骤。

在 api 层面，有一个需要处理的小地方，就是类似于登录（token/用户标识）的功能。由于这个程序并不需要登录功能，所以使用设备ID作为用户标记。

const api = {

  async 'use /'(req, res, next) {

    // 不用自动注入用户信息的接口, 一般是系统接口, 例如公用字典

    const publicList = [`/platform`]

    const defaultObj =

      !publicList.includes(req.path) &&

      Object.entries({ ...req.headers }).reduce((acc, [key, value]) => {

        const [, name] = key.match(/^default-(.*)$/) || []

        if (name) {

          const k2 = name.replace(/-([a-z])/g, (match, group) => group.toUpperCase())

          acc[k2] = value

        }

        return acc

      }, {})

    if (req.method !== `GET`) {

      req.body = {

        ...defaultObj,

        ...req.body,

      }

    }

    req.query = {

      ...defaultObj,

      ...req.query,

    }

    next()

  },

}

在后端 api 入口上，我们添加了一个拦截器，含有 default- 开头的键会被当成接口的默认参数。如果传设备 id 就相当于给每个接口带上设备标记，后面这个设备创建和修改、查询配置都会被限定在改设备下，实现了类似某用户只能或修改查看某用户的数据的功能。对于之前提到的公用数据，例如 /platform 这个接口的数据是所有用户都能看到，那直接配置到上面的 publicList 中即可。

前端的请求拦截器是这样的：

http.interceptors.request.use(

  (options) => {

    options.headers[`default-device-id`] = globalThis.userId

    return options

  },

  (error) => {

    Promise.reject(error)

  },

)

什么？并不严谨？啊对对对！

界面实现：首先做一个浏览器

由于只会一些简单的跑在浏览器里的 js/css ，所以我们要先做一个浏览器来显示我们的软件界面。

经常用 google chrome，用习惯了，并且听说它还不错。所以打算做一个和它差不多的浏览器。

它封装了 chromium 作为内核，那我们也封装 chromium 吧。

微软听说大家都想要做个基于 chromium 的的界面渲染程序，于是微软就给我们做好了，叫 microsoft-edge/webview2 。

听说大家都在用这个渲染引擎，那么微软干脆把它内置于操作系统中，目前 win10/win11 都有，win7/8 也可以在程序内自动在线安装或引用安装程序离线安装。

不知不觉的浏览器就做好了。

如何使用这个做好的浏览器

由于只会 js ，所以目前我使用 js 创建这个 webview 实例是这样的：

const hwnd = await hook.openUrl({

  url: platformInfo.value.网址,

  preloadScript,

  userDataDir: row.数据目录 || `default`,

})

可以看到，上面的 js 方法支持传入一个网址、预加载脚本和数据目录。

在这个方法的内部，我们通过构造一个 aardio 代码片段来创建 winform 窗口嵌入 webview 实例。

至于要构造什么 aardio 片段，是 aardio 已经做好相关示例了。复制粘贴就能跑，需要传参的地方，底层是使用 ipc 或 rpc 进行通信的。

ipc 是进程之前通知，可以简单的理解为一个基于事件的发布订阅程序。

rpc 是远程调用，可以简单理解为我们前端经常调用的 api。服务端封装好的 api，暴露给前端，直接调用就好了。

aardio示意片段

var winform = win.form({text: `sys-shim-app`}) // 创建一个 windows 窗口

var wbPage = web.view(winform, arg.userDataDir, arg.browserArguments) // 使用指定配置启动一个浏览器示例

wbPage.external = { // 向浏览器注入全局变量

  wsUrl: global.G.wsUrl;

}

wbPage.preloadScript(arg.preloadScript) // 向浏览器注入 js 脚本

wbPage.go(arg.url) // 使用创建的浏览器打开指定 url

winform.show() // 显示窗口

有了上面的代码，已经可以做很多事情了。因为向浏览器注入了一个全局变量 wsUrl，这是服务端的接口地址。然后在注入的脚本里去连接这个接口地址。

脚本由于是先于 url 被加载的，所以首先可以对页面上的 fetch 或者页面元素这些进行监听，实现拦截或代理。另外 webview 也提供了 cdp 层面实现的数据监听。

功能实现：让宿主与实现分离

这里的宿主是指除开 注入自定义脚本 的所有功能。根据之前的设计，网站地址是用户配置的，脚本也是用户上传的。所以一切都是用户行为，与平台无关？

啊对对对就这样！

把自动化这块功能分离出去，让其他人写（我不会！手动狗头）。然后我们在程序里为现有功能做一个事件发布。当用户开启了某个功能，脚本可以知道，并可以得到对应配置的值，然后去做对应功能的事。

const keyList = Object.keys(flatObj(getBase()))

keyList.forEach((key) => {

  watch(

    () => {

      return deepGet(devicePlatformConfig.value, key)

    },

    (newVal, oldVal) => {

      keyByValueUpdate(key, newVal, oldVal)

    },

    {

      immediate: true,

    },

  )

})

getBase 是一个配置的基础结构对象。把这个对象扁平化，就能等到每个对象的 key，使用 vue 的 watch 监听每个 key 的变化，变化后分别发布 [key, 当前值, 占值, 整个配置对象] 。

这样在自动化脚本那边只需要订阅一下他关心的 key 即可。

例如：当 场控助手.直播间发言.频率 从 2 变成 6 。

ws.on(`action.场控助手.直播间发言.频率`, (...arg) => {

  console.log(`变化了`, ...arg)

})

好了，接下来的内容就是在群里 v50 找人写写 js 模拟事件点击、dom监听啥的了（具体自动化脚本略，你懂的~手动狗头）。

测试过程

总算赶在了周一完成了功能，终于可以进行测试啦~

她同事进行功能测试的时候，提出了一些修改意见（还好是自己写的，不然真改不动一点），然后有个比较折腾的是原来我的配置窗口和平台直播页面是分别在不同的 windows 窗口下的，可以相互独立进行拖拽、最小化等控制，因为想着独立开来的话配置窗口就不会挡住直播页面的窗口了。

没想到她希望配置窗口可以悬浮在直播平台的页面上，并且可以展开折叠拖动。这对于之前设计的架构有一些差异，修改花了点时间。

最终结果

我很满意，手动狗头。

相关内容

• 源码地址： https://github.com/wll8/sys-shim/tree/main-open/store/demo/live-control-robot


• sys-shim 文档： https://wll8.github.io/sys-shim-doc/


• 视频（发布在的bilibili上，首次发视频，支持一下？）
  
  
  
  • 安装、运行、开发 https://www.bilibili.com/video/BV1E5qbY2EbX/
  
  
  • 打包、发布 https://www.bilibili.com/video/BV1J5qbY2EVX/
  
  
  • 运行打包后的程序 https://www.bilibili.com/video/BV1jJqbYVEZx/
  
  
  
  

声明：本文仅作为 sys-shim 的程序开发技术交流，本人没有也不提供可以自动化操作某直播平台的脚本。

事情是这样的，上一年写了一个基于uTools的插件，超级待办，目前日活300+，插件累计下载量24000+，有很多用户期望能够开发独立版本且数据可控(在本地保存)，所以在插件版的基础上，优化UI，交互，新增相关功能，开发了一个桌面端版本(win+mac)的超级待办。

应用特色：

一、快速记录待办

二、所有数据保存在本地

很多人在记了一两条就放弃了，很难坚持下来，所以先把待办记下来，后续使用拖拽的形式快速修改待办状态，在此场景下，设计了多个快速记录待办的方式：

一、使用快捷键Ctrl+Space快捷键（可自定义）快速呼出应用，自动聚焦输入待办

二、剪切板转待办，应用会记录剪切板记录，你可以查看记录并转为待办

该应用共分为任务主面板、日历、列表、随心记(富文本)、分类、剪切板等模块。

任务主面板模块：

在这里根据完成状态把任务分成未开始，进行中，已完成三个框体，不同状态之间支持拖拽，排序等快速操作；并且根据任务的紧急状态把每个任务分为紧急，高，中，低四个状态，方便标记任务，区分优先级；支持关联随心记，编辑，修改，删除，归档等操作。

日历模块：

在这里根据每个任务的时间，分布在日历视图上，日历包含节假日等信息，能够查看任务分布及完成情况，支持关键字搜索，编辑任务，删除任务等操作。

列表模块：

把任务汇总为列表模式，你可以在这里取消归档，按照任务状态进行筛选，关键字搜索，分类搜索，查看关联的随心记，删除，编辑等操作，并能直观的查看你所记录的待办事项。

随心记：

这里使用了富文本编辑器，支持上传图片，方便记录待办所关联的一些信息，例如：我完成了一个模块的开发，可以把具体的注意事项关联写到随心记里，方便日后查看。不仅如此，你可以记录你想记录的任何文本。

分类：

在这里你可以去维护应用的分类信息，在创建任务及随心记时，可以进行关联，方便归类管理。虽然模块名是分类，但在使用过程中，你可以把分类定义为项目名，日期归总等等。

剪切板：

我们在应用后台，实时记录剪切板内容并保存到本地，你可以在这里把剪切板某个内容转为待办，也可以根据关键词进行搜索，同时可以一键删除所有，删除单个内容等。

设置：

如果你觉得不希望每次都出现很大的框体，只希望在桌面上出现一个还未完成的任务面板并进行操作，你可以在设置中开启待办事项面板，开启后，你可以固定到桌面的任意位置。我们默认保存该面板的位置信息，在你重启电脑后，面板依旧在你设置的位置。

同时你可以在这里设置是否开机自启，是否显示快速添加待办的面板，启动时是否只显示一个输入框还是整个应用，以及呼出应用的快捷键，怎么使用，任你发挥。

为了极少的收集用户信息，我们采用微信绑定许可码（一机一码）形式，当应用安装后，可以按照操作申请试用许可码，每个微信支持绑定多个机器。

在公测期间，一共收获了300个用户，并提了很多宝贵的建议，后续迭代会持续的进行优化更新~

最后，如果你也有记录待办的需求，不妨体验一下呀~

前段时间手底下的小伙伴跟我吐槽，说后端一点小改动就马上要包，电脑性能很差一旦run build之后就得等好几分钟的空窗期，被迫摸鱼导致加班，我灵机一动，是不是可以利用服务器的性能，编写自动化构建从而实现让后端、测试点点点，就能得到他们想要的不同版本的包、或者不同分支的构建产物呢？

于是乎就有了我的设计并产出的开源：Sa-io https://github.com/LIAOJIANS/sa-io.git

Sa-io操作流程：新建项目（指定gitURL） => 内部执行（npm install）=> run build => SE(推送Sucesss日志) => publish（指定目标地址）=> dowl (下载专属产物)

项目架构

1、UI层

2、逻辑层

3、数据层

4、所需环境层

核心实现逻辑

1、技术清单

• child_process：创建子进程并执行构建脚本；


• chokidar: 监听日志文件内容；


• scp2：建立SSH连接并传输文件；


• Vue3：UI界面采用VUE3 + TS

2、核心逻辑

Run Build

router.post('/build', [

 (() =>

   ['shell', 'install', 'projectName'].map((fild) =>

     body(fild)

       .notEmpty()

       .withMessage('username or token is null'),

   ))(),

], (req, res, next) => {

 checkBeforRes(next, req, async () => {



   const {

     shell,

     install,

     removeNm,

     shellContent,

     branch,

     projectName,

     pull,

     ...onter

   } = req.body



   if (os.platform() !== 'linux' && shell) {

     return new Result(null, 'Running shell scripts must be in a Linux environment!!!')

       .fail(res)

   }



   const curTime = Date.now()

   const id = `${projectName}-${curTime}`

   const fileName = `${id}.log`

   const logPath = path.resolve(__dirname, `../log/${fileName}`)



   let status = 'success'



   const getHistory = () => getFileContentByName('history', [])



   // 生成构建历史

   let data = [

     ...getHistory(),

     {

       id,

       projectName,

       buildTime: curTime,

       status: '',

       branch

     }

   ]



   // 生成日志文件

   getFileContentByName(

     '',

     '',

     logPath

   )



   // 写入history基本信息

   setFileContentByName(

     'history',

     data,

     true

   )



   if (removeNm) {

     await rmDir(projectName, 'node_modules') // 删除node_modules  防止不同分支不同版本的依赖冲突



     rmFile(`${projectName}/package-lock.json`) // 删除安装依赖日志，防止版本缓存

   }



   if (branch) { // 如果有分支，并且分支不能等于当前分支，否则切换分支并拉取最新

     const projects = getFileContentByName('projects')



     const project = projects.find(p => p.projectName === projectName)



     if (project.branch !== branch) {

       try {

         if (install) {



           rmFile(`${projectName}/package-lock.json`) // 删除安装依赖日志，防止版本缓存

         }



         await gitCheckoutPro(projectName, branch)



         setFileContentByName('projects', [

           ...projects.map(p => {

             if (p.projectName === projectName) {

               p.branch = branch

             }



             return p

           })

         ], true)

       } catch (e) {



         console.log(e)



         setFileContentByName(

           'history',

           [

             ...data,

             {

               projectName,

               buildTime: curTime,

               status: 'error',

               branch

             }

           ],

           true

         )



         res.status(500).send('checkout error!!! Please review the log output!!!!!!')

       }



     } else if (pull) { // 拉取最新

       try {

         await gitPullPro(projectName, logPath)

       } catch (e) {

         res.status(500).send('checkout error!!! Please review the log output!!!!!!')

       }

     }

   }





   new Result(`${id}`, 'building, Please review the log output!!!!!!').success(res)



   const compressedPro = () => {

     status = 'success'

     compressed(`${projectName}-${curTime}`, projectName)



     console.log('success')

     copyFile(

       path.resolve(__dirname, `../project/${projectName}/dist`),

       path.resolve(__dirname, `../builds/${projectName}-${curTime}`)

     )



     const {

       publish,

       ...left

     } = onter



     if (publish) {

       publishTragetServer({

         ...left,

         localPath: path.resolve(__dirname, `../builds/${projectName}-${curTime}`)

       })

     }



   }



   if (shell) { // 执行sh脚本



     setFileContentByName(

       projectName,

       shellContent,

       true,

       path.resolve(__dirname, `../project/${projectName}/build.sh`)

     )



     await shellPro(projectName, logPath)

       .then(compressedPro)

       .catch(() => {

         status = 'error'

         console.log('error')

       })

   } else { // 执行打包工作流

     (

       await (install ? installAfterBuildPro : buildPro)(projectName, logPath)

         .then(compressedPro)

         .catch(() => {

           status = 'error'

           console.log('error')

         })

     )

   }



   let newData = getHistory()



   newData = newData.map(c => {

     if (c.id === id) {

       c.status = status

     }



     return c

   })



   setFileContentByName(

     'history',

     newData,

     true

   )

 })

})

UI界面展示

最后放个项目地址：github.com/LIAOJIANS/s…

概述

import-html-entry 是一个用于动态加载和处理 HTML 和 JS 文件的库，主要用于微前端架构中。它能够从远程服务器拉取 HTML 内容，并对其中的 JS 和 CSS 进行处理，以便在主应用中加载和执行。这个库是 qiankun 微前端框架的核心依赖之一，提供了强大的动态加载和执行能力。在微前端框架 qiankun 中，import-html-entry 被用来解决 JS Entry 的问题，通过 HTML Entry 的方式，让用户接入微应用就像使用 iframe 一样简单。

使用方法

安装

首先，你需要通过 npm 或 yarn 安装 import-html-entry：

npm install import-html-entry

或者

yarn add import-html-entry

基本使用

以下是一个简单的示例，展示如何使用 import-html-entry 加载一个远程的 HTML 文件,
我们看官网的例子

在index.html中
使用import-html-entry加载./template.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>index</title>

</head>

<body>

<script type="module">

	window.onerror = e => {

		console.log('error', e.message);

	};

	window.onunhandledrejection = (e) => {

		console.log('unhandledrejection', e.reason.message);

	};



	import('./dist/index.js').then(({ importEntry }) => {

		importEntry('./template.html').then(res => {

			console.log(res);

			return res.execScripts().then(exports => {

				console.log(exports);

			});

		}).catch(e => {

			console.log('importEntry failed', e.message);

		});

	});

</script>

</body>

</html>

template.html如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

	<link href="https://unpkg.com/antd@3.13.6/dist/antd.min.css" rel="stylesheet">

	<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap-grid.min.css" rel="stylesheet">

</head>

<body>



<script src="./a.js"></script>

<script ignore>alert(1)</script>

<script src="./b.js"></script>

<script src="./c.js"></script>

<script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>

<script src="https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js"></script>

<script src="https://www.baidu.com"></script>

</body>

</html>

template.html被import-html-entry处理过后如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        /* antd样式被内链进入 */

    </style>

    <style>

        /* bootstrap样式被内链进入 */

    </style>

</head>

<body>



<!--   script http://127.0.0.1:7001/a.js replaced by import-html-entry -->

<!-- ignore asset js file replaced by import-html-entry -->

<!--   script http://127.0.0.1:7001/b.js replaced by import-html-entry -->

<!--   script http://127.0.0.1:7001/c.js replaced by import-html-entry -->

<!--   script https://unpkg.com/react@16.4.2/umd/react.production.min.js replaced by import-html-entry -->

<!--   script https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js replaced by import-html-entry -->

<!--   script https://www.baidu.com/ replaced by import-html-entry -->

</body>

</html>

可以发现html中的css被处理成为内链样式的了，其中的js代码script被注释掉了

importHTML返回值有如下几个：

1、template---处理过后的html

2、assetPublicPath---资源路径

3、getExternalScripts---执行后返回脚本信息


4、getExternalStyleSheets---执行后返回样式信息

5、execScripts---js代码执行器，可以传入代理的window对象

我们可以看出来，经过import-html-entry 处理后能够拿到这个html中的js、css内容，其中css会被处理成为内链样式嵌入HTML中，js我们可以通过execScripts传入自己的代理window可以实现js沙箱隔离

qiankun中如何使用的？

我们观察qiankun源码中是如何使用的import-html-entry的

在src/loader.js中如下：

// 266行

const { template, execScripts, assetPublicPath, getExternalScripts } = await importEntry(entry, importEntryOpts);

// 347行

const scriptExports: any = await execScripts(global, sandbox && !useLooseSandbox, {

    scopedGlobalVariables: speedySandbox ? cachedGlobals : [],

  });

  // get the lifecycle hooks from module exports

  const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(

    scriptExports,

    appName,

    global,

    sandboxContainer?.instance?.latestSetProp,

  );

可以看到和预期一样

1、使用import-html-entry拿到js执行器

2、执行execScripts，并且传入自己的globalContext

3、根据导出，拿到生命周期函数lifecycle

源码解析

import-html-entry 的核心功能是通过 fetch 获取指定 URL 的 HTML 内容，然后解析并处理这个 HTML 模板，最终返回一个包含处理后的 HTML、CSS 和 JS 的 Promise 对象。具体步骤如下：

整体流程如下图所示：

execScripts

code = getExecutableScript()

通过function+with实现js沙箱

function getExecutableScript(scriptSrc, scriptText, opts = {}) {

	const { proxy, strictGlobal, scopedGlobalVariables = [] } = opts;



	const sourceUrl = isInlineCode(scriptSrc) ? '' : `//# sourceURL=${scriptSrc}\n`;



	// 将 scopedGlobalVariables 拼接成变量声明，用于缓存全局变量，避免每次使用时都走一遍代理

	const scopedGlobalVariableDefinition = scopedGlobalVariables.length ? `const {${scopedGlobalVariables.join(',')}}=this;` : '';



	// 通过这种方式获取全局 window，因为 script 也是在全局作用域下运行的，所以我们通过 window.proxy 绑定时也必须确保绑定到全局 window 上

	// 否则在嵌套场景下， window.proxy 设置的是内层应用的 window，而代码其实是在全局作用域运行的，会导致闭包里的 window.proxy 取的是最外层的微应用的 proxy

	const globalWindow = (0, eval)('window');

	globalWindow.proxy = proxy;

	// TODO 通过 strictGlobal 方式切换 with 闭包，待 with 方式坑趟平后再合并

	return strictGlobal

		? (

			scopedGlobalVariableDefinition

				? `;(function(){with(this){${scopedGlobalVariableDefinition}${scriptText}\n${sourceUrl}}}).bind(window.proxy)();`

				: `;(function(window, self, globalThis){with(window){;${scriptText}\n${sourceUrl}}}).bind(window.proxy)(window.proxy, window.proxy, window.proxy);`

		)

		: `;(function(window, self, globalThis){;${scriptText}\n${sourceUrl}}).bind(window.proxy)(window.proxy, window.proxy, window.proxy);`;

}

evalCode(scriptSrc, code)

通过eval执行代码

export function evalCode(scriptSrc, code) {

	const key = scriptSrc;

	if (!evalCache[key]) {

		const functionWrappedCode = `(function(){${code}})`;

		evalCache[key] = (0, eval)(functionWrappedCode);

	}

	const evalFunc = evalCache[key];

	evalFunc.call(window);

}

processTpl

const { template, scripts, entry, styles } = processTpl(getTemplate(html), assetPublicPath, postProcessTemplate);

看一下执行结果。

通过processTpl实现。

1、替换HTML

2、导出js入口列表

3、style列表

4、找到入口文件

Document Picture-in-Picture 介绍

    今天，我来介绍一个非常酷的前端功能：文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？😏

🎬 视频流媒体的画中画功能

        你可能已经在视频平台（如腾讯视频、哔哩哔哩等网页）见过这种效果：视频播放时，可以点击画中画后。无论你切换页面，它都始终显示在屏幕的最上层，非常适合上班偷偷看电视💻

        在今天的教程中，不仅仅是视频，我将教你如何将任何 HTML 内容放入画中画模式，无论是动态内容、文本、图片，还是纯炫酷的 div，统统都能“飞”起来。✨

        一个如此有趣的功能，在网上却很少有详细的教程来介绍这个功能的使用。于是我决定写一篇详细的教程来教大家如何实现画中画 (建议收藏)😁

体验网址：Treasure-Navigation

github地址

📖 Document Picture-in-Picture 详细教程

🛠 HTML 基本代码结构

    首先，我们随便写一个简单的 HTML 页面，后续的 JS 和样式都会基于它实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document Picture-in-Picture API 示例</title>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

</head>



<body>

    <div id="container">

        <div id="pipContent">这是一个将要放入画中画的 div 元素！</div>

        <button id="clickBtn">切换画中画</button>

    </div>

    <script>

        // 在这里写你的 JavaScript 代码

    </script>

</body>

</html>

1️. 请求 PiP 窗口

    PiP 的核心方法是 window.documentPictureInPicture.requestWindow。它是一个 异步方法，返回一个新创建的 window 对象。

    PIP 窗口可以将其看作一个新的网页，但它始终悬浮在屏幕上方。

document.getElementById("clickBtn").addEventListener("click", async function () {

    // 获取将要放入 PiP 窗口的 DOM 元素

    const pipContent = document.getElementById("pipContent");

    // 请求创建一个 PiP 窗口

    const pipWindow = await window.documentPictureInPicture.requestWindow({

        width: 200,  // 设置窗口的宽度

        height: 300  // 设置窗口的高度

    });



    // 将原始元素添加到 PiP 窗口中

    pipWindow.document.body.appendChild(pipContent);

});

演示：

👏 现在，我们已经成功创建了一个画中画窗口！
这段代码展示了如何将网页中的元素放入一个新的画中画窗口，并让它悬浮在最上面。非常简单吧

关闭PIP窗口

可以直接点右上角关闭PIP窗口，如果我们想在代码中实现关闭，直接调用window上的api就可以了

window.documentPictureInPicture.window.close();

2️. 检查是否支持 PiP 功能

    一切不能兼容浏览器的功能介绍都是耍流氓，我们需要检查浏览器是否支持PIIP功能。
实际就是检查documentPictureInPicture属性是否存在于window上 🔧

if ('documentPictureInPicture' in window) {

    console.log("🚀 浏览器支持 PiP 功能！");

} else {

    console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");

}

    如果是只需要将视频实现画中画功能，视频画中画 (Picture-in-Picture) 的兼容性会好一点，但是它只能将元素放入画中画窗口。它与本文介绍的 文档画中画(Document Picture-in-Picture) 使用方法也是十分相似的。

3️. 设置 PiP 样式

    我们会发现刚刚创建的画中画没有样式，一点都不美观。那是因为我们只放入了dom元素，没有添加css样式。

3.1. 全局样式同步

假设网页中的所有样式如下：

<head>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

    <link rel="stylesheet" type="text/css" href="https://abc.css">

</head>

为了方便，我们可以直接把之前的网页的css样式全部赋值给画中画。

// 1. document.styleSheets获取所有的css样式信息

[...document.styleSheets].forEach((styleSheet) => {

    try {

        // 转成字符串方便赋值

        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');

        // 创建style标签

        const style = document.createElement('style');

        // 设置为之前页面中的css信息

        style.textContent = cssRules;

        console.log('style', style);

        // 把style标签放到画中画的<head><head/>标签中

        pipWindow.document.head.appendChild(style);

    } catch (e) {

        // 通过 link 引入样式，如果有跨域，访问styleSheet.cssRules时会报错。没有跨域则不会报错

        const link = document.createElement('link');

        /**

         * rel = stylesheet 导入样式表

         * type: 对应的格式

         * media: 媒体查询（如 screen and (max-width: 600px)）

         *  href: 外部样式表的 URL

         */

        link.rel = 'stylesheet';

        link.type = styleSheet.type;

        link.media = styleSheet.media;

        link.href = styleSheet.href ?? '';

        console.log('error: link', link);

        pipWindow.document.head.appendChild(link);

    }

});

演示：

3.2. 使用 link 引入外部 CSS 文件

向其他普通html文件一样，可以通过link标签引入特定css文件:

创建 pip.css 文件:

#pipContent {

    width: 600px;

    height: 300px;

    background: skyblue;

}

js引用：

// 其他不变

const link = document.createElement('link');

link.rel = 'stylesheet';

link.href = './pip.css';  // 引入外部 CSS 文件

pipWindow.document.head.appendChild(link);

pipWindow.document.body.appendChild(pipContent);

演示：

3.3. 媒体查询的支持

可以设置媒体查询 @media (display-mode: picture-in-picture)。在普通页面中会自动忽略样式，在画中画模式会自动渲染样式

<style>

    #pipContent {

        width: 600px;

        height: 300px;

        background: pink;

        font-size: 20px;

    }

    

    <!-- 普通网页中会忽略 -->

    @media (display-mode: picture-in-picture) {

        #pipContent {

            background: lightgreen;

        }

    }

</style>

在普通页面中显示为粉色，在画中画自动变为浅绿色

演示：

4️. 监听进入和退出 PiP 模式的事件

我们还可以为 PiP 窗口 添加事件监听，监控画中画模式的 进入 和 退出。这样，你就可以在用户操作时，做出相应的反馈，比如显示提示或执行其他操作。

// 进入 PIP 事件

documentPictureInPicture.addEventListener("enter", (event) => {

    console.log("已进入 PIP 窗口");

});



const pipWindow = await window.documentPictureInPicture.requestWindow({

    width: 200,

    height: 300

});

// 退出 PIP 事件

pipWindow.addEventListener("pagehide", (event) => {

    console.log("已退出 PIP 窗口");

});

演示

5️. 监听 PiP 焦点和失焦事件

const pipWindow = await window.documentPictureInPicture.requestWindow({

    width: 200,

    height: 300

});



pipWindow.addEventListener('focus', () => {

    console.log("PiP 窗口进入了焦点状态");

});



pipWindow.addEventListener('blur', () => {

    console.log("PiP 窗口失去了焦点");

});

演示

6. 克隆节点画中画

我们会发现我们把原始元素传入到PIP窗口后，原来窗口中的元素就不见了。

我们可以把原始元素克隆后再传入给PIP窗口，这样原始窗口中的元素就不会消失了

const pipContent = document.getElementById("pipContent");

const pipWindow = await window.documentPictureInPicture.requestWindow({

    width: 200,

    height: 300

});

// 核心代码：pipContent.cloneNode(true)

pipWindow.document.body.appendChild(pipContent.cloneNode(true));

演示

PIP 完整示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document Picture-in-Picture API 示例</title>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div id="container">

        <div id="pipContent">这是一个将要放入画中画的 div 元素！</div>

        <button id="clickBtn">切换画中画</button>

    </div>



    <script>

        // 检查是否支持 PiP 功能

        if ('documentPictureInPicture' in window) {

            console.log("🚀 浏览器支持 PiP 功能！");

        } else {

            console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");

        }



        // 请求 PiP 窗口

        document.getElementById("clickBtn").addEventListener("click", async function () {

            const pipContent = document.getElementById("pipContent");



            // 请求创建一个 PiP 窗口

            const pipWindow = await window.documentPictureInPicture.requestWindow({

                width: 200,  // 设置窗口的宽度

                height: 300  // 设置窗口的高度

            });



            // 将原始元素克隆并添加到 PiP 窗口中

            pipWindow.document.body.appendChild(pipContent.cloneNode(true));



            // 设置 PiP 样式同步

            [...document.styleSheets].forEach((styleSheet) => {

                try {

                    const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');

                    const style = document.createElement('style');

                    style.textContent = cssRules;

                    pipWindow.document.head.appendChild(style);

                } catch (e) {

                    const link = document.createElement('link');

                    link.rel = 'stylesheet';

                    link.type = styleSheet.type;

                    link.media = styleSheet.media;

                    link.href = styleSheet.href ?? '';

                    pipWindow.document.head.appendChild(link);

                }

            });



            // 监听进入和退出 PiP 模式的事件

            pipWindow.addEventListener("pagehide", (event) => {

                console.log("已退出 PIP 窗口");

            });



            pipWindow.addEventListener('focus', () => {

                console.log("PiP 窗口进入了焦点状态");

            });



            pipWindow.addEventListener('blur', () => {

                console.log("PiP 窗口失去了焦点");

            });

        });



        // 关闭 PiP 窗口

        // pipWindow.close();  // 可以手动调用关闭窗口

    </script>

</body>

</html>

总结

🎉 你现在已经掌握了如何使用 Document Picture-in-Picture API 来悬浮任意 HTML 内容！
希望能带来更灵活的交互体验。✨

如果你有什么问题，或者对 PiP 功能有更多的想法，欢迎在评论区与我讨论！👇📬

<img> 直接加载对比 new Image() 预加载

1. 加载时机和页面渲染的差异

• 直接渲染到 <img> 标签： 当你直接在 HTML 中通过 <img> 标签加载图片时，浏览器在遇到 <img> 标签时会立即开始加载图片。这意味着浏览器在渲染页面的过程中，会同步进行图片请求。当页面需要渲染图片时，可能会导致图片显示之前页面的其它部分无法完全显示，或者图片加载的过程中页面会出现闪烁或布局跳动。
  
  

  这种加载方式是 同步 的，即浏览器渲染页面时，图片的加载和显示是直接相关的。如果图片较大或者网络慢，用户可能会看到空白的占位符，直到图片加载完成。



• 使用 new Image() 和 img.src = src： 这种方式会在后台加载图片，不直接影响页面的渲染。也就是说，图片资源在浏览器缓存中已经加载好了，页面显示图片时，浏览器能快速地从缓存读取图片，而不必等待网络请求。浏览器不会因为加载图片而延迟页面的渲染。
  
  

  关键点是：通过 new Image() 加载图片会提前发起请求，将图片缓存到浏览器中，这意味着你可以在用户滚动或需要展示图片时，直接从缓存加载，而不需要重新请求网络资源。这个过程是 异步 的。

2. 浏览器的资源管理和缓存

• 图片预加载的缓存： 当你通过 new Image() 加载图片时，图片会被缓存在浏览器的内存中（通常是浏览器的资源缓存），因此如果图片已经被加载过，后续使用该图片时会直接从缓存读取，而不需要重新请求网络资源。
  
  

  而如果你直接用 <img> 标签来加载图片，浏览器同样会请求并缓存图片，但如果图片在初次加载时不可见（比如在页面下方），用户滚动到该位置时，可能会再次触发网络请求，尤其是在使用懒加载（lazy load）等技术时。如果图片已经预加载过，浏览器就可以从缓存中直接加载，避免了再次请求。

3. 避免页面阻塞

• 直接使用 <img> ：当浏览器在解析页面时遇到 <img> 标签，会立即发起网络请求来加载图片。如果图片资源很大或者服务器响应很慢，浏览器可能需要等待这些资源加载完成，才能继续渲染其他部分。这会导致页面的 渲染阻塞，即页面内容渲染较慢，特别是在图片多的情况下。


• 使用 new Image() 预加载：通过 new Image() 预加载图片，可以避免渲染时对页面的阻塞。浏览器在后台加载图片，直到需要展示图片时，图片已经准备好了，这样页面展示可以更快，用户体验也更好。

4. 适用场景

• 直接 <img> 标签加载：适用于图片较少且页面上几乎所有图片都需要立即展示的场景。例如，单一图片展示的页面。


• new Image() 预加载：适用于图片较多或需要延迟加载的场景，例如动态加载的图片、长页面或者需要懒加载的图片库。它允许你提前将图片加载到浏览器缓存中，减少后续显示时的加载时间。

5. 加载速度和时间

如果从加载速度和时间上来看，两者的差别可能不大，因为它们最终都会发起一次网络请求去加载图片。但是，new Image() 的优势在于：

• 它允许你在图片真正需要显示之前就开始加载，这样当用户需要看到图片时，图片已经在浏览器缓存中，可以即时显示。


• 使用 new Image() 可以提前加载图片，而不会影响页面的渲染顺序和内容显示，不会造成页面的阻塞。

6. 网络请求优化

new Image() 还可以和 并发请求 进行优化。如果你有多个图片需要预加载，可以通过多个 new Image() 实例来并行加载这些图片，而不影响页面的渲染。并且，如果你知道某些图片很可能会被需要（例如图片懒加载场景中的下拉加载图片），你可以提前加载这些图片，确保用户滚动时能立刻看到图片。

7. 总结对比

结论

虽然从技术上讲，直接在 <img> 标签中加载图片和使用 new Image() 设置 src 都会触发相同的图片加载过程，但是 使用 new Image() 进行预加载 提供了更灵活的控制，使得你可以在页面渲染时避免图片加载阻塞，提升页面的加载速度和用户体验。

（补充：代码示例小demo传送门)