关于引入jquery资源问题

84864694

最近在编写脚本的时候，发现不引入jquery资源也能使用jquery语法，不知道是油猴内置的还是怎么回事，既然可以用为什么还要引入呢，引入之后// @grant none 必须修改成// @grant unsafeWindow，要不然页面会出现错误，另外所有的$符号都会出现黄色的!提示eslint: no-undef -'$' is not defined.这个提示怎么去掉，希望大佬能详细解答一下。

84864694

在网上找到了去掉$黄色！提示的方法，添加/* globals jQuery, $, waitForKeyElements */，为什么要引入jquery还需要大佬解答。

李恒道

因为油猴脚本默认是none
会跟网页的window共享一个window
网页存在jq
所以你不引用也可以直接用
冲突的问题可能是版本不同导致代码冲突引起的
一般不建议在原有jq上引用jq

李恒道

@grant unsafeWindow解决报错是因为
删除了none后会进入一个独立的沙盒作用域
此时window是一个proxy包装的window对象
油猴会进行特殊处理
不再与网页window互通数据了
关于这点可以参考一部分的分析，你也可以在这个基础上研究一下window的变量读取部分的代码分享给大家
https://bbs.tampermonkey.net.cn/thread-2494-1-1.html
https://bbs.tampermonkey.net.cn/thread-2495-1-1.html
https://bbs.tampermonkey.net.cn/thread-2496-1-1.html
https://bbs.tampermonkey.net.cn/thread-2497-1-1.html
https://bbs.tampermonkey.net.cn/thread-2498-1-1.html

李恒道

jquery的引入说实话就是纯粹的题经
具体可以参考https://bbs.tampermonkey.net.cn/thread-275-1-1.html
部分的

小提醒

在油猴用户脚本中引入jQuery库，最好运行在沙盒环境下，简单地加一条元数据@grant unsafeWindow即可；如果运行在@grant none情形下，在脚本的顶部一定要添加一条this.$ = this.jQuery = jQuery.noConflict(true);以防止与原页面jQuery库冲突，导致原页面功能异常。

来自https://blog.csdn.net/nalan_yc/article/details/84769012(内附jq引入情况的各种情况分析，但是个人感觉没必要)

李恒道

问题基本解答完了
有兴趣可以分享自己的脚本或者分析教程哦

李恒道

沙盒部分的教程是
[油猴脚本开发指南]grant介绍,none与unsafeWindow
https://bbs.tampermonkey.net.cn/thread-160-1-1.html
[油猴脚本开发指南]沙盒机制的前世今生（课外篇，可不看）
https://bbs.tampermonkey.net.cn/thread-182-1-1.html

84864694

李恒道 发表于 2022-7-27 01:13
沙盒部分的教程是
[油猴脚本开发指南]grant介绍,none与unsafeWindow
https://bbs.tampermonkey.net.cn/thre ...

谢谢大佬的详细解答，脚本之前请教问题发出来过，目前只实现了一部分功能，还有一部分功能正在努力中，本人小白，都是一点一点的学习。

李恒道

84864694 发表于 2022-7-27 01:37
谢谢大佬的详细解答，脚本之前请教问题发出来过，目前只实现了一部分功能，还有一部分功能正在努力中，本 ...

哥哥加油

steven026

84864694 发表于 2022-7-27 01:01

在网上找到了去掉$黄色！提示的方法，添加/ globals jQuery, $, waitForKeyElements /，为什么要引入jque ...

油猴内置了代码检查工具ESlint，
可以自定义检查配置
(另外，这个报错只是不符合ESlint规则，并不一定代表代码无法正常运行，即使是红色报错)

让jQuery、$不报错的方法有3种
第一种，自定义全局变量，让ESlint把jQuery、$这2个变量当作全局变量，忽略no-undef变量未定义的报错。
（这个办法治标不治本，虽然jQuery似乎只有2个全局变量用这个也能凑合，但是换作其他全局变量很多的库，配置起来会很麻烦）
/* globals jQuery, $*/

第二种，配置代码环境
（具体规则可以参考Configuring ESLint - ESLint中文）
/* eslint-env jquery */

第三种，直接禁用no-undef变量未定义报错
（掩耳盗铃）
/*eslint no-undef:0*/

---

至于jQuery，你需要用到jQuery的情况下才需要引入，不用的话可以不引入
（虽然jQuery已经退出正向舞台了，但是据统计仍有80%网站或多或少还在用jQuery。另外逆向写油猴脚本用jQuery还是很方便的，毕竟Write less,do more.个人还是推荐油猴用jQuery）
你可以直接在页面输入jQuery判断页面是否存在jQuery（$并不可靠，其他库或者原生JS都可以改写或用到$）
jQuery().jquery能判断jQuery版本


如图1，存在jQuery，但是$被其他库改写了
如图2，不存在jQuery，$未被使用

---

油猴的@require存在作用域，通过油猴@require引入的jQuery并不能直接在页面中使用

暴露@require的$到页面方法：（不建议轻易使用，可能会起冲突）
沙盒环境下unsafeWindow.$=$
普通环境下window.$=$

如果页面本身自带jQuery，可以不用@require自己引入，直接用页面的jQuery（当然可能存在版本过低的情况）
沙盒环境下const $=unsafeWindow.jQuery
普通环境下const $=window.jQuery