vue项目中利用锁控制页面响应式布局

响应式布局，就是页面布局跟随屏幕分辨率自动变化。响应式布局跟自适应布局不一样。自适应布局就是用百分比来定义页面内各布局元素，在屏幕分辨率发生变化时，不至于错位。而响应式布局更强一些，其布局会跟随屏幕分辨率不同而不同。比如高分辨率，可能每行有5个方块；分辨率低一点，就变成了每行3个，原先的一行变成了2行。

单单布局变化没啥，绑定window.resize事件，然后做一些处理就完了，甚至都不用js，只通过css也可以。但如果布局变化，同时也关联到数据产生变化，就复杂一些了。比如，有个列表页，每一页记录数是20条。分辨率低一些，动态调整为15条；或者高一些，动态调整为25条。总之分辨率变化，会导致向后台请求数据。假如只是设置浏览器的分辨率来测试，没什么问题；但假如是用鼠标来拉伸或缩小窗口就麻烦了，这个时候会不断产生window.resize事件，从而不断的请求后台数据，系统压力陡然增大。

这种情况，使用定时器来控制的话，一来比较复杂，二来效果不佳。可以考虑用锁来控制。当触发window.resize事件时，检测有无上锁，有的话就返回，不做任何处理；没有的话上锁，然后向后台请求数据。请求数据是一个异步方法，在返回数据时，释放锁。这样就过滤了相当部分的请求，并将这些数据请求串行化。

具体代码如下：

import { defineComponent } from "vue";
import * as tools from "@/utils";
import {getDataList} from "@/api/db";

const lockObj = new tools.LockHandler();//构造一把锁
export default defineComponent({
  setup() {
    const search = (params, callback) => {//获取数据
       getDataList(params)
       .then((res) => {
       	 。。。
         if (callback) callback();//执行回调函数，锁将在回调函数中释放
       })
       .catch((err) => {
         console.error(err);
       });
    };

    return {
      search,
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      if (!lockObj.isLock()) {//如果没有上锁
      
        lockObj.lock();//上锁
        
        //注意第2个参数是获取数据后的回调函数
        that.search(null, () => {
          lockObj.unLock();
        });
      }
    };

    this.search();
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

锁是一个类，代码如下：

//src/utils/index.js
export class LockHandler {
  #_lock;
  constructor() {
    this.#_lock = false;
  }

  isLock = () => {
    return this.#_lock;
  };
  lock = () => {
    this.#_lock = true;
  };
  unLock = () => {
    this.#_lock = false;
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17