写文章动机
本来是不打算写的，因为脚本简单加上可能对别人几乎是没用的。但是用的过程发现想的太简单了。居然用到了MutationObserver来监听节点变化，之前用的时候也踩坑请教了道哥。但是偷懒没有写成博客分享。今天用的过程又翻了一下之前的笔记。所以正好通过脚本来分享一下,顺便写到了工具库虽然其实也没做多大贡献。
MutationObserver注意事项
主要是理解config的配置
config = { attributes: true, childList: false, subtree: true };
attributes：一个布尔值，表示是否监听目标节点的属性变化。 childList：一个布尔值，表示是否监听目标节点的子节点变化。 subtree：一个布尔值，表示是否监听目标节点的后代节点变化。
所以我们为了节省性能，如果理解了配置的意思我们可以直接定位到目标节点，或者同时监测子节点，subtree正常为false即可，假如我的需求就是监听某个节点，但是你监听了后代节点，敲好别的地方也有相同的类名，这个时候就可能会把我们不需要监听的内容也监听到了
工具库
我把MutationObserver写成了工具库，使用的时候我们就不需要还得从百度或者别的地方粘贴了。 // @require scriptcat.org/lib/1105/1.…
// 写上自己监听的节点
const nextPlay = document.querySelector('#next_play_btn');
// 自己的配置
const config = { attributes: true, childList: true, subtree: false };
const observer = observeNodeChanges(nextPlay, config, function(mutation) {
// 监听的操作
console.log('节点发生变化了', mutation.type);
});
写文章怕代码多，大家懒得看，封装了一下
（我平时是不会封装的，因为脚本很简单没有必要，大部分脚本我不会频繁的修改）
// ==UserScript==
// @name 修改某个up的名字
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.2
// @description 因为这个up改的昵称自己看了很难受，但是b站没有改备注的功能，所以我们写个脚本来实现
// @author You
// @match https://www.bilibili.com/video/*
// @require https://scriptcat.org/lib/1105/1.0.0/uniqueObserver.js
// ==/UserScript==
(function () {
'use strict';
setTimeout(() => {
function modifyUpNameSliber() {
if (document.querySelectorAll('.upname') && document.querySelectorAll('.upname').length > 0) {
document.querySelectorAll('.upname a span').forEach((node) => {
if (node.innerText.indexOf('神奇宝鳖') > -1) {
node.innerText = '我是小志'
}
})
}
}
const nextPlay = document.querySelector('.next-play')
const config = { attributes: true, childList: true, subtree: false };
const observerUpName = observeNodeChanges(nextPlay, config, function (mutation) {
console.log('开始播放下一个视频了', mutation.type);
modifyUpNameSliber()
});
let upMessage = document.querySelector('.up-detail-top a').innerText
if (upMessage.indexOf('神奇宝鳖') > -1) {
document.querySelector('.up-detail-top a').innerText = '我是小志'
}
modifyUpNameSliber()
}, 3000)
})();
之前代码(感觉代码也不多)
// ==UserScript==
// @name 修改某个up的名字
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.2
// @description 因为这个up改的昵称自己看了很难受，但是b站没有改备注的功能，所以我们写个脚本来实现
// @author You
// @match https://www.bilibili.com/video/*
// ==/UserScript==
(function() {
'use strict';
setTimeout(() => {
const observerUpName = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('开始播放下一个视频了', mutation.type);
if (document.querySelectorAll('.upname') && document.querySelectorAll('.upname').length > 0) {
document.querySelectorAll('.upname a span').forEach((node) => {
if(node.innerText.indexOf('神奇宝鳖') > -1) {
node.innerText = '我是小志'
}
})
}
});
});
const nextPlay = document.querySelector('.next-play')
const config = { attributes: true, childList: true, subtree: false };
observerUpName.observe(nextPlay, config)
let upMessage = document.querySelector('.up-detail-top a').innerText
if (upMessage.indexOf('神奇宝鳖') > -1) {
document.querySelector('.up-detail-top a').innerText = '我是小志'
}
if (document.querySelectorAll('.upname') && document.querySelectorAll('.upname').length > 0) {
document.querySelectorAll('.upname a span').forEach((node) => {
if(node.innerText.indexOf('神奇宝鳖') > -1) {
node.innerText = '我是小志'
}
})
}
}, 3000)
})();
