2024年前端最新如何用油猴提升前端开发效率(1)，2024年最新最新前端开发面试解答

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

综上所述，如果你要开发一个油猴脚本，那么通过webpack进行打包就是一个非常好的选择。

3. jQuery

==========

正如我年前的那篇文章所说，jQuery是一个非常值得学习的库，因为对于编写油猴脚本来说，没有什么比用jQuery去提取界面上的信息更方便的了。

由于jQuery的易用性，使用jQuery你可以轻易的从界面上提取到你要的信息，虽然使用正则可以达到差不多的效果，但jQuery代码写起来比正则更快，也更不容易出错。

4. 正则

======

编写脚本，非常多的情况会使用到正则，因为要精确的匹配到对应的字符，正则是你的不二之选，在做一些自动生成代码工具的时候，因为涉及到字符匹配的问题，学会正则就显得非常的重要。

这里就要推荐一个非常好的正则测试网站：RegExr: 学习、构建和测试正则表达式Test RegEx，因为有时候你无法判断你写的正则对不对，所以这个时候你就可以先在这个网站上面测试一下，如果测试结果符合你的预期，再将正则表达式复制到你的项目中进行测试，这样编写起正则来就方便的多，使用方法也非常简单，去该网站上面点两下大致就能明白如何使用。

5. 爬虫基础

========

如果你要提取一些界面上的信息，那么你得会一些爬虫基础知识，知道怎么获取到界面上的某些信息。

理论上一个网页上面所有的信息，都能通过正则表达式进行提取，但由于正则表达式在编写的过程中可能会比较容易出错，这个时候jQuery就能有效的帮你提取出这些页面数据。

这里就对爬虫入门时90%的人都会选择的豆瓣排行榜做一个页面信息提取。

6. 实例

======

上面所想的那个脚本我其实已经实现了，但碍于swagger上面有公司项目的接口信息，所以这里就不拿那个脚本作为演示。

那么这里我就拿jQuery爬取到的豆瓣排行榜信息作为演示吧：

主要实现的功能就是，在输入框中输入电影名称，然后将电影相关的信息进行匹配并且展示出来：

6.1 触发事件构建

---

要执行你已经写好的代码，你通常可能需要一个按钮、一个输入框或者其它元素进行触发，在本脚本的开发中，我就使用了Antd的按钮+Antd的模态框+Antd的输入框这3种组件来搭建脚本。

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<InfoDataList[]>([]);

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);

}}

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}