如何监听DOM大小的变化

1，引言
监听DOM大小的变化，在前端开发中，算是一个比较常见的需求，比如我们要制作可伸缩的图表的时候，可能需要根据DOM大小的变化，进行动态的更新图表。
2，实现方式
一般而言，我们可能会考虑到的方式就是在窗口发生变化的时候，获取对应dom的样式。

window.onresize = function() {
	const width = getStyle(dom, 'width');
	const height = getStyle(dom, 'height');
}
function getStyle(ele,attr){
  	if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

通过这样的方式可以进行监听dom的变化，但是不是最完善的，比如有这样的一种可能，你通过js改变一个dom的宽度或者高度，但是window是没有发生resize事件的。

第二种方式，使用setInterval的方式进行监听DOM的变化。核心代码如下：

let timer = 0；
timer = setInterval(() => {
    const style = {
            width: getStyle(dom, 'width'),
            height: getStyle(dom, 'height'),
    };
}, 200)

每过200ms，我们都进行一次dom大小的获取，从而和之前的宽高进行对比，就能知道DOM是否发生了变化。

3，项目中的使用
显然，这样不规范的代码，是在项目中没法使用的，我们如何在项目中对有一个比较规范的模块来做这样的事情呢？那就需要我们考虑，我们的期望是什么，项目中的使用环境是什么？

第一，我们是通过setInterval的方式进行监听DOM变化，那项目中可能有多个DOM需要我们监听，难道要启动多个setInterval？显然这是一种很low的行为。

原理上，我们其实可以使用一个数组，来维护需要监听的DOM，每当我们监听一个DOM，那我们只需要向这个数组中新增一个DOM元素就可以了。这样我们只需要一个setInterval进行这个数组的遍历，对比每一个DOM是否进行了变动。

第二，我们希望我们有一个简单的API，我们不想关注内部细节，我监听一个DOM，就进行bind函数的绑定，我解除一个DOM的监听，我可以使用类似clear之类的函数解除监听。

第三，监听DOM必须是为了实现某个东西，所以我们可能会有一个回掉函数。

第四，我们必须有一个比较好的数据结构，来组织我们的代码。监听的DOM不止一个，可能我们需要的是一个list。其中我们在合适的时机，读取这个DOM的原本的宽高，和现在的宽高进行对比。

自己使用模块模式的方式，实现的关于DOM监听的实现代码。

export default (function() {
    const elList = [];
    let timer = 0;
    function bind(el, next) {
        let obj = {
            el,
            callback: next,
            style: {
                width: getStyle(el, 'width'),
                height: getStyle(el, 'height'),
            }
        }
        elList.push(obj);
    }
    function remove(el) {
        elList.splice(elList.indexOf(el))
        if (elList.indexOf(el) !== -1) {
            elList.splice(elList.indexOf(el), 1);
        }
    }
    timer = setInterval(() => {
        for (let i = 0; i < elList.length; i++) {
            let dom = elList[i].el
            const style = {
                width: getStyle(dom, 'width'),
                height: getStyle(dom, 'height'),
            }
            if (!isEqul(style, elList[i].style)) {
                elList[i].style = {
                    width: style.width,
                    height: style.height,
                }
                elList[i].callback && elList[i].callback();
            }
        }
    }, 200)
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }
        return ele.currentStyle[attr];
    }
    function isEqul(obj1, obj2) {
        let isEqul = true;
        for (var i in obj1) {
            if (obj1[i] !== obj2[i]) {
                isEqul = false;
            }
        }
        return isEqul;
    }
    return {
        bind,
        remove,
    }
})();

然后我们在使用的时候直接引入。

import DomSize from './domsize.js';
DomSize.bind(el, function(){
	console.log(111);
})

4，集成到npm中使用
我们希望有更简单的用法，和使用一些第三方插件的时候一样。所以个人觉得发布为npm的package更好一些。

个人实现的dom监听的包就是：wd-domsize-monitor

基本使用：

npm install --save wd-domsize-monitor

代码中：

import DomSize from 'wd-domsize-monitor';

DomSize.bind(currentDom, function() {
	// my codding....
})

// 解除绑定
DomSize.remove(currentDom);

该项目的github地址：https://github.com/liwudi/wd-domsize-monitor.git

如何监听DOM大小的变化

猜你喜欢