你不曾注意的技术痛点

前言

上班已经有近两个月了，也了解一些互联网黑话：赋能、抓手、闭环、沉淀、打通......今天就以前端开发技术难点为抓手，打通开发过程中碰到的两个技术痛点，形成闭环。废话不多说，介绍一下我碰到的两个小问题：

1. flex布局下padding-right失效

首先明确一点，不一定是padding-right失效，比如flex布局下flex-direction我设置为column，那么就可能是padding-bottom失效了。

• 举例子：

<style>
  .box {
    display: flex;
    width: 800px;
    height: 200px;
    padding: 0 50px;
    background-color: #ccc;
    overflow-x: auto;
  }

  .son {
    flex: 0 0 200px;
    margin-right: 10px;
    border: 1px solid red;
  }
</style>

<div class="box">
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
</div>

效果图如下：我们可以看到当子元素超出父元素的情况下，padding-left正常， padding-right失效了。

解决方案

可以在父元素后面加一个after伪元素，样式如下：

.box::after {
  content: '';
  display: block;
  width: 50px;
  flex-shrink: 0;
}

这样子就padding-right就不失效了：

2.如何监听div元素高度的变化

• 对于监听页面的高度resize事件，在react项目中，我们这样监听

useEffect(() => {
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler)
}, [handler])

那么如何监听div元素的变化，比如监听div元素的高度

解决方案

mdn提供了一个API：MutationObserver 提供了监视对DOM树所做更改的能力。

• MutationObserver()
  创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

实例对象主要是两个方法：

• disconnect()
  阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。

• observe()
  配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。

• 缺点就是浏览器兼容性不好，不过没有关系，强大的程序员们开发了兼容插件 resize-observer-polyfill

在react项目中可以这样来用

const [resizeObserver,setResizeObserver] = useState<ResizeObserver | null>(null);

const [scrollWrapperHeight, setScrollWrapperHeight] = useState(0);

useLayoutEffect(() => {
  new ResizeObserver(entries => {
    const [entry] = entries;
    setScrollWrapperHeight(entry.contentRect.height); // 这个就能监听到div高度的变化
  })
  return () => {
    resizeObserver?.disconnect();
  };
}, []);

const leadTableRef = useCallback( // 回调ref,将这个绑定到table组件上
  node => {
    if (node) {
      resizeObserver && resizeObserver.observe(node); // 监听这个dom元素
    } else {
      resizeObserver && resizeObserver.disconnect();
    }
  },
  [resizeObserver],
);

闭环