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

[油猴脚本开发指南]with解决require引入问题

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-10-20 09:31:33 | 显示全部楼层 | 阅读模式

    前文

    通过修改umd标准头来解决require脚本的兼容性问题通常能解决大部分问题,但是偶尔也无法解决一些require库的this指针以及window改变的问题

    所以我们要使用with解决这个问题

    开始

    这里以filesaver库为例

    https://github.com/eligrey/FileSaver.js/

    虽然表面没有给我们js文件,但是大家可以在dist目录下,也就是编译成品目录下找到js文件,我们可以尝试引入

    图片.png

    图片.png

    filesaver.js是正常文件,min是压缩后的,map是soucemap文件,我们可以通过sourcemap文件来调试压缩后的代码

    我们引入之后发现require没作用,这时候大概看一下

    可以发现也是一个umd标准头

    图片.png

    因为我已经尝试过修改了,并没有用

    所以这里用到了我们的with函数

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with

    with (expression) {
        statement
    }

    js查找某个变量的时候,会顺着一层一层查找,而with的作用

    相当于把expression设置的变量优先进行查找

    注意,如果查找expression的变量上的属性并不存在,则会查找的很慢,影响性能

    但是我们这里是设置到原网页的window上,所以对我们来说基本不影响。

    图片.png

    我们可以写一下如下代码

    首先获取到unsafewindow,或window,找到原网页window

    然后通过with包含

    因为他寻找的是window指针

    而我们window的下刚好有一个window属性指向自己

    所以可以正常获取window以及一些其他的数据

    同时也修改了this指向到我们with的对象上

    即修改了window指向保证了require的js正常运行

    结语

    那么这节课我们就学习了如何通过with函数使js库兼容

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-3-13 12:57:15 | 显示全部楼层

    咋了哥哥
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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