1. 原因
时隔一年，油猴剧本系列又来了。 原因是那天我洗脚的时候，突然灵光一闪。 我以为在后端开发中，有很多工作是完全机械的，并不困难。 ，并且花费了异常长的时间！ 它似乎是某些表的主键。
到目前为止我还在开发之前的百万级ERP项目。 项目中有很多列表。 目前大概有几百个，但是每个列表都有很多数组，通常有20个左右数组，而且前端写入的时候，会在对应的socket中返回很多数组，需要选择从返回的数组中获取列表中您需要的数组。
也许一两个还可以，但是匹配几十上百个列表，一个数组，一个数组，需要花费大量的时间和精力，所以我此时有一个意见：有没有这样的方法来列出原型图将数组提取出来，然后与swagger中socket下的数组注释进行比较。 如果正确的话，将会生成Antd可以使用的头代码。 如果不正确，那么那些不正确的数组将统一显示。 ，然后用肉眼检查。 如果还是找不到这种数组，那就发送给前端，让前端添加这种数组。
当我想到这个可能性时，我就迫不及待地想意识到这一点。 这时我想起一年前我用油猴脚本做了一些事情，那么这个突然的突发奇想是否也可以用油猴脚本来实现。
2.油猴脚本
我今年已经写了几篇关于油猴脚本的文章，其中提到通过Webpack打包，可以开发非常复杂的脚本，甚至可以开发一些工程级别的脚本，也可以使用npm上的包。
而且由于webpack配置的复杂性，我一开始并没有考虑使用webpack打包工具，而是首先想到了另一个零配置的打包工具：parcel。
不幸的是，它失败了。 不知道为什么parcel打包的js文件直接通过油猴导入外部资源会报错，所以这个时候我也想到了一个打包js文件的工具：Rollup。
不幸的是，它也失败了。 不知道为什么引入油猴后会报错，所以此时放弃了抵抗，选择了webpack进行打包。 结果正如预期的那样。 将webpack打包的js文件导入到油猴中。 任何问题。
由于之前已经做过这方面的工作，所以我也总结了相关文章：为tampermonkey搭建强大的tampermonkey脚本开发环境，所以tampermonkey的基础知识就不重复了。
2.1 包装的好处
为什么要通过webpack打包？
因为在编译一些复杂的脚本时，我们往往需要用到很多的库，同时我们也会将脚本模块化，分成很多文件。 同时，如果你想编译一些CSS样式，也可以直接编写CSS文件或者Less或Sass文件。 这个文件可以通过webpack统一，打包成js，然后通过油猴提供的外部导入形式导入。
随着我对React越来越熟悉，React也是实现上面提到的手动比较数组的功能不可或缺的一部分，而且我个人非常喜欢使用TypeScript，因为它会给代码更多的提示，让你不是编写代码时很容易犯一些低级错误。
使用React就不得不提到Antd。 Antd 的 UI 组件库提供了很多方便的组件。 它不仅解决了一些样式问题，还解决了很多交互的东西，比如它的Form表单也很好用。
综上所述，如果你想开发油脂猴脚本，通过webpack打包是一个非常好的选择。
3.jQuery
正如我多年前的文章中所说，jQuery是一个值得学习的库，因为对于编写油猴脚本来说，没有什么比使用jQuery提取界面信息更方便的了。
由于 jQuery 的易用性，您可以通过使用 jQuery 轻松地从界面中提取您想要的信息。 即使使用正则表达式来实现类似的效果，jQuery 代码的编写速度也比正则表达式更快，而且更不易出错。
4. 常规
在编写脚本时，很多情况下都会用到正则表达式。 由于您需要精确匹配相应的字符，因此正则表达式是您的最佳选择。 在做一些手动代码生成工具的时候，由于字符匹配的问题，学习正则变得非常重要。
这里有一个非常好的正则测试网站：RegExr：学习、构建和测试正则表达式TestRegEx，因为有时候你很难判断自己写的正则表达式是否正确，所以这时候你可以先在这个网站测试一下一看，如果测试结果符合你的预期，那么就将正则表达式复制到你的项目中进行测试，这样编译正则表达式就方便多了，使用方式也很简单。 进入网站点击两次即可了解如何使用。
5. 爬虫基础知识
如果你想提取界面上的一些信息，那么你必须有一些爬虫的基础知识，并且知道如何获取界面上的个体信息。
理论上来说，一个网页中的所有信息都可以通过正则表达式来提取出来，但是由于正则表达式在编译的过程中可能比较容易出错，这时候jQuery就可以有效的帮助你提取那些页面数据。
这里有一个90%的人刚开始爬虫都会选择的豆瓣排行榜的页面信息提取。
6. 例子
虽然我已经实现了里面我想的脚本，但是由于swagger中公司项目的socket信息，这里我不会使用任何脚本作为演示。
那么这里我就以jQuery爬取的豆瓣排名信息来作为演示：
主要功能是在输入框中输入电影名称，然后匹配并显示电影相关信息：
6.1 触发风暴建立
要执行你已经编写的代码，通常需要一个按钮、一个输入框或其他元素来触发。 在这个脚本的开发中，我使用了Antd的按钮+Antd的模态框+Antd的输入框这三个组件来构建脚本。
6.2 最终疗效
最终效果如下，代码看起来并不难。 将最终代码粘贴到此处：
import { Button, ConfigProvider, Form, Modal } from "antd";
import "antd/dist/antd.css";
import TextArea from "antd/es/input/TextArea";
import zhCN from "antd/lib/locale/zh_CN";
import * as $ from "jquery";
import { useState } from "react";
import { render } from "react-dom";
interface InfoDataList {
/** 电影的名称 */
title: string;
/** 分数 */
score: string;
/** 评价数 */
number: string;
/** 简介 */
info: string;
}
function AppButton() {
const [infoDataList, setInfoDataList] = useState([]);
const [showData, setShowData] = useState();
const [visible, setVisible] = useState(false);
return (
<Button
onClick={() => {
/** 整理后的信息 */
const info: InfoDataList[] = [];
// 这里是提取界面信息
$(".info").each(function (this) {
const infoItem: InfoDataList = {} as InfoDataList;
// 这里是所有的信息，下面组件提取各种信息
$(this)
.find(".title")
.each(function (this, index) {
// 只取第一个电影名字
if (index === 0) infoItem.title = this.innerHTML;
});
// 取分数
$(this)
.find(".rating_num")
.each(function (this) {
infoItem.score = this.innerHTML;
});
// 评价数
$(this)
.find(".star > span:nth-child(4)")
.each(function (this) {
infoItem.number = this.innerHTML;
});
// 取信息
$(this)
.find(".inq")
.each(function (this) {
infoItem.info = this.innerHTML;
});
info.push(infoItem);
});
setInfoDataList(info);
// 打开弹窗
setVisible(true);
}}
style={{ position: "fixed", right: "100px", bottom: "100px" }}
>
点我
<Modal
title="自动对字段"
visible={visible}
centered
destroyOnClose
width={1000}
onCancel={() => {
setVisible(false);
}}
>
<Form
preserve={false}
onValuesChange={async (value) => {
// 如果没有值，则不匹配
if (!value.text) {
setShowData(undefined);
return;
}
const rgx = RegExp(value.text);
const data = infoDataList.find((item) => rgx.test(item.title));
setShowData(data);
}}
>
<Form.Item name="text">
{/* 这里是将对的字段展示出来 */}
- 电影名：{showData?.title}
- 分数：{showData?.score}
- 评价数：{showData?.number}
- 简介：{showData?.info}
);
}
// 添加一个div作为React的入口文件
$("body").append(`<div id="ccll-app"/>`);
render(
,
document.getElementById("ccll-app")
);
7.webpack配置
以下是我自己构建并使用的一组webpack.config.js。 它增加了对 CSS、TypeScript 和 Less 的支持，并且还处理与 JavaScript 的兼容性。 您可以直接复制下面的代码来尝试一下。
const { resolve } = require("path");
module.exports = {
entry: ["./index.js"],
output: {
path: resolve(__dirname, "build"),
filename: "index.js",
publicPath: "/",
},
module: {
rules: [
{
test: /.(js|jsx|mjs)$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
// 预设：指示babel做怎么样的兼容性处理。
presets: [
[
"@babel/preset-env",
{
corejs: {
version: 3,
}, // 按需加载
useBuiltIns: "usage",
},
],
"@babel/preset-react",
],
},
},
],
},
{
test: /.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /.css$/,
// 使用哪些 loader 进行处理
use: [
// use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
// 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
"style-loader",
// 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
"css-loader",
],
},
{
test: /.less$/,
// 使用哪些 loader 进行处理
use: [
// use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
// 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
"style-loader",
// 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
"css-loader",
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
mode: "production",
devtool: "source-map",
};
8.最后
本文并不演示我的最终脚本，而是模拟另一个反例，主要是为了吸引新想法。 我想表达的是，油猴被我们后端开发人员忽视了。jquery执行顺序执行，虽然是一个非常好的提高开发效率的工具。
从文章中可以看出，编写一个脚本需要的知识还是很多的，尤其是jQuery和正则化。 事实上，如果你熟悉原生js，你可以使用原生js代码来替代这些jQuery代码。
就我个人写油猴脚本的经历来说，几乎每个脚本还是会用到jQuery，虽然用到的东西不是很深，主要是提取界面信息，正则表达式也用得很多。
通过这灵光一现，我想到在写业务代码时，可以通过脚本来完成一些重复性的机械工作，从而提高自己的开发效率，做一个按时上班的程序员。
-EOF-
添加君莫莫主页，除后端技能+1
首页君每天都会在个人Momo上分享后端开发学习资源和技术文章精选jquery执行顺序执行，并且时不时分享一些有趣的活动、工作推荐以及业余项目如何使用技术
添加Momo，打开一个窗口
