关于引入jquery资源问题

cxxjackie

steven026 发表于 2022-7-27 14:06
[md]油猴内置了代码检查工具ESlint，
可以自定义检查配置
(另外，这个报错只是不符合ESlint规则，并不一 ...

我的观点相反，我个人是不太建议用jquery写脚本的，一个是jquery的体量还是有点大，网站用jquery是因为其本身代码量就不小，jquery对代码的精简作用一般比jquery自身更大，但在脚本里就反过来了，如果你的代码达不到上千行的程度，jquery反而成了累赘。另一个问题是jquery毕竟不是为脚本设计的，有些运行环境方面的隐患存在，像是这个之前讨论过多次的document问题（https://bbs.tampermonkey.net.cn/thread-1080-1-1.html），由于jquery的代码涉及document的访问，特定情况下可能引发错误。可以新建以下脚本进行测试：

1. // ==UserScript==
   
2. // @name         测试jquery
   
3. // @namespace    ...
   
4. // @author       ...
   
5. // @version      1.0
   
6. // @match        https://docs.qq.com/*
   
7. // @require      https://cdn.jsdelivr.net/npm/jquery@2.2.3/dist/jquery.min.js
   
8. // @grant        unsafeWindow
   
9. // @run-at       document-start
   
10. // ==/UserScript==

复制代码

随便打开一个腾讯文档的页面（比如https://docs.qq.com/doc/DQ1BMTk1BWlVWcndF），F12观察启用/禁用脚本对copy事件的影响，可以发现仅仅引入一个jquery，就破坏了原有的事件劫持！如果有网站的加载过程依赖事件劫持，而你在不恰当的时机引入jquery，就有可能造成页面崩溃。这也是我不赞成脚本中引入vue等大型框架的原因，除非这些框架有针对脚本环境做专门的适配。
至于jquery对代码精简的作用，其实如果对原生代码足够了解，完全可以自己实现的。比如经典的$(选择器)可以这样：

1. const $ = document.querySelector.bind(document);

复制代码

其他功能也可以自己写函数代替，实现另一种意义上的“按需加载”。

steven026

cxxjackie 发表于 2022-7-27 21:58
我的观点相反，我个人是不太建议用jquery写脚本的，一个是jquery的体量还是有点大，网站用jquery是因为其 ...

我写过6个脚本用了jQuery的精简写法之后都超过了500行，如果用原生方法妥妥的超过1000行。简单的脚本如果网站没有jQuery，我也很少额外引入，直接用$$凑合

我频繁用jQuery主要有3个地方，链式调用、:contains选择器、.append(``)
虽然这三个自己用原生js都能包装，但是包起来也太麻烦了，需要各种递归才能达到相同的效果，不如直接用现成的jQuery，而且@require有作用域，一般不会主动注入到页面中，对页面造成影响的情况实际上非常少

比如我之前写的一个脚本代码188行~309行，需要自己写一个完整页面，用jQuery添加DOM会非常方便，直接在devtools里面的复制修改DOM然后编辑为HTML直接复制到脚本里就完事了，如果用原生js我估计要写炸了，不知道哥哥对于这一点有什么好办法吗？
https://greasyfork.org/zh-CN/scr ... super-auto-eat/code


题外话，
虽然现在js熟练之后大多数jQuery的方法都能原生js代替，但我还是喜欢用jQuery精简代码，
反思了一下可能是和我自学js时候的方法有关，不用代码编辑器、习惯手输代码（偶尔用devtools补全），
因为原生js方法名太长了，刚学的时候经常记不住（$$是很后面才发现的），而jQuery的方法名非常简单，所以渐渐也就习惯了用jQuery
【这就导致了我有点依赖jQuery，但好处是经常手输代码，对代码比较熟悉（包括大小写）……

幸识

李恒道 发表于 2022-7-27 01:07
因为油猴脚本默认是none
会跟网页的window共享一个window
网页存在jq

ggnb！！！五体投地膜拜大佬

cxxjackie

steven026 发表于 2022-7-27 22:52
我写过6个脚本用了jQuery的精简写法之后都超过了500行，如果用原生方法妥妥的超过1000行。简单的脚本如果 ...

嗯。。。这就是为什么我在ElementGetter那个库里加了个看起来格格不入的create方法，你可以看看源码是怎么实现的，就几行：
https://scriptcat.org/script-show-page/513/code
https://developer.mozilla.org/zh ... ML/Element/template

steven026

cxxjackie 发表于 2022-7-27 23:04
嗯。。。这就是为什么我在ElementGetter那个库里加了个看起来格格不入的create方法，你可以看看源码是怎 ...

原来如此！学到了，原来一个innerHTML就能解决了
我以前看的教程全是.appendChild()嵌套……
过期教程害人啊/(ㄒoㄒ)/~~

cxxjackie

steven026 发表于 2022-7-27 23:09
原来如此！学到了，原来一个innerHTML就能解决了
我以前看的教程全是.appendChild()嵌套……
过期教程害 ...

还可以试试这个方法，更接近jquery的append：
https://developer.mozilla.org/zh ... /insertAdjacentHTML

steven026

cxxjackie 发表于 2022-7-27 23:18
还可以试试这个方法，更接近jquery的append：
https://developer.mozilla.org/zh-CN/docs/Web/API/Elemen ...

这个我以前看到过，但是好像会产生各种问题，和appendChild还是有差异（可能就是mdn里面写的"它不会重新解析它正在使用的元素"），然后就没再用过了
还是谢谢哥哥了，又教会我许多