如何用油猴提升前端开发效率
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
1. 起因
时隔一年,油猴脚本系列又来了,起因是那天洗澡的时候,突然灵光一闪,想到平时在前端开发中,有很多工作完全是一些机械的,没有什么难度的活,但是又异常的花时间!其实就是对一些表格字段。
目前为止我还在开发之前的那个百万级ERP项目,项目中的列表非常的多,目前大概有几百个吧,而且每个列表都有非常多的字段,通常情况下都在20个字段左右,而后端写的时候会在对应的接口中返回一大堆字段,你需要从返回的字段中挑选出列表中需要的字段。
可能一个两个还好,但是几十个几百个列表一个字段一个字段的对起来就很耗时耗力,所以这个时候我就有一个想法:有没有那么一种方法,将原型图上列表字段提取出来,然后与swagger中该接口下面的字段注释做一个对比,如果对的上,则生成Antd可以使用的表头代码,如果没有对上,那么就统一将这些没有对上的字段展示出来,然后用肉眼去对,如果依然没有找到这些字段,那么就发给后端,让后端添加上这些字段。
一想到这个可能性,马上就想迫不及待的想要进行实现,这时我回忆起一年前用过油猴脚本做了一些事情,那么这次这个突发奇想是否也可以用油猴脚本进行实现。
2. 油猴脚本
我在去年已经写过几篇关于油猴脚本的文章,其中提到过通过Webpack打包,可以开发特别复杂的脚本,甚至可以开发一些工程级的脚本,同时也可以使用npm上的包。
但是由于webpack配置的复杂性,所以我首先是没有考虑使用webpack打包工具的,而是先想到了另一个零配置打包工具:parcel。
但是很遗憾,失败了,不知道为什么通过parcel打包后的js文件直接通过油猴引入外部资源的方法会报错,于是这个时候我还想到了一个打包js文件的工具:Rollup。
遗憾的是,同样失败了,不知道为什么引入油猴后就是会报错,于是这个时候我就放弃抵抗,选择了webpack进行打包,结果不出意料,webpack打包后的js文件引入油猴中没有任何问题。
因为我之前已经这么做过了,还总结了相关的文章:强大的油猴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: 学习、构建和测试正则表达式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<InfoDataList>();const [visible, setVisible] = useState(false);return (<><ButtononClick={() => {/** 整理后的信息 */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" }}>点我</Button><Modaltitle="自动对字段"visible={visible}centereddestroyOnClosewidth={1000}onCancel={() => {setVisible(false);}}><Formpreserve={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"><TextArea rows={10} /></Form.Item></Form>{/* 这里是将对的字段展示出来 */}<ul><li>电影名:{showData?.title}</li><li>分数:{showData?.score}</li><li>评价数:{showData?.number}</li><li>简介:{showData?.info}</li></ul></Modal></>);
}// 添加一个div作为React的入口文件
$("body").append(`<div id="ccll-app"/>`);render(<ConfigProvider locale={zhCN}><AppButton /></ConfigProvider>,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和正则,当然如果你对原生js熟悉的话,你完全可以使用原生js代码来代替jQuery的那些代码。
就我个人编写油猴脚本的经验来讲,jQuery几乎在每个脚本中都会用到,虽然用到的东西不是特别深,主要是提取界面信息,而正则用到的也非常多。
其实这里还留下了一个问题,就是引入了React
+Antd
后,打包的时间往往会达到10s左右,而打包后的代码通常会达到2M左右,下一篇文章就讲如何在油猴中使用CDN引入,让打包时间减少到1s左右,代码体积减少到几十kb左右。
通过这次的灵光乍现,我想到平时在写业务代码时,一些重复的机械的工作都可以交给脚本去实现,提高自己的开发效率,做一个准点下班的程序员。
关于本文
作者:沧沧凉凉
https://juejin.cn/post/7075237968205578277
Node 社群我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。如果你觉得这篇内容对你有帮助,我想请你帮我2个小忙:1. 点个「在看」,让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长点赞和在看就是最大的支持❤️
如何用油猴提升前端开发效率相关推荐
- activex for chrome扩展程序 下载”_提升前端开发效率:你应该知道的10个Chrome扩展程序...
作者 | Chidume Nnamdi 译者 | 王强 策划 | 李俊辰 "进步不是勤奋者的功劳.它是懒惰者在尝试寻找更简单的方法时取得的成果." --罗伯特·海因莱因 CSSV ...
- vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽,代码生成工具。提升前端开发效率,或者集成至项目作为在线拖拽工具。(持续迭代升级中)...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
- 前端组件化和模块化最大的区别是什么_7招提升你的前端开发效率
前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. ...
- 7招提升你的前端开发效率
前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. ...
- Atitit. 提升软件开发效率and 开发质量---java 实现dsl 4gl 的本质and 精髓 O725
Atitit. 提升软件开发效率and 开发质量---java 实现dsl 4gl 的本质and 精髓 O725 1. DSL主要分为三类:外部DSL.内部DSL,以及语言工作台. 1 2. DSL ...
- linux物联网项目,6个开源项目提升物联网开发效率
有数据显示,目前物联网端口数量预计在200亿个左右.到2035年,这个数字会扩大到1万亿,平均每个人会拥有超过100台端口设备,它们将涉及穿戴.家居.交通.教育.通信等人类生活的各个领域. 毫无疑问, ...
- 如何提升团队开发效率
前言 无论是哪家企业无论哪个行业可能都避不开效率问题,可能这也是大部分管理.老板最为看重的地方.原因就不多说了,相信都明白,我在这里讨论的特指软件团队开发效率的问题. 有时候看到现在各种996 ...
- 低代码:降低技术能力要求,提升软件开发效率
出品 | CSDN云原生 在云原生及数字化转型的浪潮下,软件研发需求不断增加,由Forrester于2014年提出的"低代码/零代码"的概念不断发酵,并成为技术社区的宠儿.国内不仅 ...
- 17个提升iOS开发效率的神器
时间就是金钱.编码效率的提升意味着更多的收入.可是当我们的开发技巧已经到达一定高度时,如何让开发效率更上一层楼呢?答案就是使用开发工具!在这篇文章中,我会向你介绍一些帮助我提升编码速度和工作效率的工具 ...
- 17个提升iOS开发效率的必用工具
本文由CocoaChina译者@红茶魔术师-大红袍 翻译自netguru.co 原文:17 Must Have Tools to Speed up Development in iOS 作者介绍:Pa ...
最新文章
- 没有绝对安全的系统!激光瞄准二极管,25米外从被物理隔绝的计算机中窃取数据...
- HTTP 500 服务器内部错误的解决方法
- Taro -- 微信小程序登录
- Unity学习笔记5 unity的js转c#
- 购买过php,【已解决】PHP项目需求:用户购买商品时,给上级发送一条通知(无限级下级会员)...
- 哪个Java线程消耗了我的CPU?
- Python实现FTP服务器和客户端
- 一篇总结得超全的前端进阶文章!入门、技巧、方法、书籍、网站...一步到位!
- mysql 表增加多个索引_mysql给同一个表添加多个索引的测试
- python 调用js_python调用JS方法
- 惠普bios硬重置_惠普重置BIOS
- python读取csv数据出错_使用Pandas在python中读取csv文件时出错
- mysql数据库 with as用法
- 玩转prometheus告警 alertmanger(二)之alertmanger 邮件 钉钉告警
- 【面试被虐】如何只用2GB内存从20亿,40亿,80亿个整数中找到出现次数最多的数?
- 基于geoserver的伪三维地图制作
- 通用键盘鼠标模拟(包括USB和PS2)
- 购买服务器需要注意哪些问题
- 关于电机编码器的知识汇总,都在这里了!
- 最详细PicGo(图床)加阿里云OSS实现图片自动上传