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

Posted 2022-09-03 左直拳

响应式布局，就是页面布局跟随屏幕分辨率自动变化。响应式布局跟自适应布局不一样。自适应布局就是用百分比来定义页面内各布局元素，在屏幕分辨率发生变化时，不至于错位。而响应式布局更强一些，其布局会跟随屏幕分辨率不同而不同。比如高分辨率，可能每行有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();
  ,
);

锁是一个类，代码如下：

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

  isLock = () => 
    return this.#_lock;
  ;
  lock = () => 
    this.#_lock = true;
  ;
  unLock = () => 
    this.#_lock = false;
  ;