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

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

[复制链接]

189

主题

1474

帖子

763

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
763
发表于 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库兼容

混的人。

发表回复

本版积分规则

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