上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12
返回列表 发新帖
楼主: 84864694 - 

关于引入jquery资源问题

[复制链接]
  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    881

    回帖

    1379

    积分

    荣誉开发者

    积分
    1379

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-7-27 21:58:44 | 显示全部楼层
    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);
    复制代码

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

    使用道具 举报

  • TA的每日心情
    慵懒
    10 小时前
  • 签到天数: 791 天

    [LV.10]以坛为家III

    31

    主题

    551

    回帖

    1540

    积分

    荣誉开发者

    积分
    1540

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋

    发表于 2022-7-27 22:52:02 | 显示全部楼层
    本帖最后由 steven026 于 2022-7-27 23:03 编辑
    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,但好处是经常手输代码,对代码比较熟悉(包括大小写)……
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-12-16 00:48
  • 签到天数: 29 天

    [LV.4]偶尔看看III

    14

    主题

    16

    回帖

    62

    积分

    初级工程师

    积分
    62

    新人报道

    发表于 2022-7-27 22:57:32 | 显示全部楼层
    李恒道 发表于 2022-7-27 01:07
    因为油猴脚本默认是none
    会跟网页的window共享一个window
    网页存在jq

    ggnb!!!五体投地膜拜大佬
    可能我

    这是最后一次拥抱你
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    881

    回帖

    1379

    积分

    荣誉开发者

    积分
    1379

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-7-27 23:04:41 | 显示全部楼层
    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
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    10 小时前
  • 签到天数: 791 天

    [LV.10]以坛为家III

    31

    主题

    551

    回帖

    1540

    积分

    荣誉开发者

    积分
    1540

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋

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

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    881

    回帖

    1379

    积分

    荣誉开发者

    积分
    1379

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-7-27 23:18:26 | 显示全部楼层
    steven026 发表于 2022-7-27 23:09
    原来如此!学到了,原来一个innerHTML就能解决了
    我以前看的教程全是.appendChild()嵌套……
    过期教程害 ...

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

    使用道具 举报

  • TA的每日心情
    慵懒
    10 小时前
  • 签到天数: 791 天

    [LV.10]以坛为家III

    31

    主题

    551

    回帖

    1540

    积分

    荣誉开发者

    积分
    1540

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋

    发表于 2022-7-28 08:57:36 | 显示全部楼层
    cxxjackie 发表于 2022-7-27 23:18
    还可以试试这个方法,更接近jquery的append:
    https://developer.mozilla.org/zh-CN/docs/Web/API/Elemen ...

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

    使用道具 举报

    12
    返回列表 发新帖

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表