页面改变后怎么执行js

页面改变后怎么执行JS可以通过事件监听器、MutationObserver、框架内置方法、轮询机制等方式来实现。其中，事件监听器是最常用的方法之一，在页面加载完成后，通过监听特定事件来触发JS代码的执行。

一、事件监听器

事件监听器是指在页面元素发生特定事件时，执行指定的JavaScript代码。常见的事件类型包括click、change、load等。页面改变后，常用的事件监听器有以下几种：

1. DOMContentLoaded事件

DOMContentLoaded事件在初始HTML文档完全加载和解析完成后触发，而无需等待样式表、图像和子框架的完成加载。

document.addEventListener('DOMContentLoaded', function() {
    // Your JavaScript code here
});

2. Load事件

load事件在页面完全加载后触发，包含所有依赖资源如样式表和图片。

window.addEventListener('load', function() {
    // Your JavaScript code here
});

二、MutationObserver

MutationObserver是一个提供监视对DOM树所做更改的接口。它用来监视一个特定DOM元素的变化。

1. 使用MutationObserver

const targetNode = document.getElementById('some-id');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // Your JavaScript code here
        }
        else if (mutation.type === 'attributes') {
            // Your JavaScript code here
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

三、框架内置方法

现代前端框架如React、Vue和Angular等自带生命周期钩子，可以在组件加载、更新和销毁时执行特定的JS代码。

1. React中的componentDidUpdate

class MyComponent extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        // Your JavaScript code here
    }
    render() {
        return (
            <div>My Component</div>
        );
    }
}

2. Vue中的watcher

new Vue({
    data() {
        return {
            someData: ''
        }
    },
    watch: {
        someData(newVal, oldVal) {
            // Your JavaScript code here
        }
    }
});

四、轮询机制

轮询机制是一种不推荐但有时必要的手段，通过定时器定期检查某些条件是否满足，然后执行相应的JS代码。

1. 使用setInterval

setInterval(function() {
    if (document.getElementById('some-id')) {
        // Your JavaScript code here
    }
}, 1000);

五、应用场景及推荐系统

在复杂的项目管理中，开发团队需要高效的项目管理系统来跟踪和管理任务。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

1. 研发项目管理系统PingCode

PingCode是专为研发项目设计的管理系统，支持需求管理、缺陷管理、测试管理等多种功能，帮助团队高效协作。

2. 通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，支持任务管理、团队协作、进度跟踪等功能，适用于各类团队和项目。

总结

页面改变后执行JS的方法有多种，事件监听器、MutationObserver、框架内置方法和轮询机制都是常用的方式。选择合适的方式可以有效提升页面的交互体验和性能。在项目管理中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高团队的协作效率。