业务前端的本质--数据维护

windliang

发布于 2024-07-06 08:20:36

630

发布于 2024-07-06 08:20:36

文章被收录于专栏：windliang的博客windliang的博客

Vue/React 将前端开发从 jQuery 命令式的编程风格带到了声明式的编程风格，开发者只需要描述界面应该是什么样子，Vue/React 就会根据数据的变化自动更新界面。

因此对于业务页面只需要关心数据有什么以及引起数据的变化有什么。

数据

数据主要有两大类，ui 相关和非 ui 相关。

ui 相关

前端本质上就是将数据可视化，因此定义的变量中一部分就是供页面展示使用的，在 Vue 中会把这些数据定义在 data 中变为响应式，在 React 中会调用 SetState 来更新这些变量以便更新视图。

前端自闭环

一些变量仅在前端记录进行 ui 的更新，后端不会感知到。

比如页面的 loading 态：

点击态，是否打开展示更多：

来自后端

页面数据是存在数据库中，后端会把这些数据给前端，供前端展示，这类数据又分为两种：

将数据直接赋值给某个前端变量进行展示，比如昵称、标题等。
将数据转换后再进行展示，比如钱相关字段因为精度问题，后端存储的是分，给到前端以后需要转换成元进行展示。

来自底层

设备信息：通过屏幕宽高来设置弹窗的宽高。

localStorage：一些模块可能一天只需要展示一次，前端将标志存到 localStorage 中自行进行判断。

非 ui 相关

这些变量和 ui 无关也不会和页面后端交互，举几个例子：

前端自闭环

请求锁：一些提交请求，为了防止用户多次提交，可以在接口请求前设置一个标志位，类似于下边这样。

// 用于保存请求状态的标志位
let isSubmitting = false;

// 模拟一个异步请求
function sendRequest() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("请求成功");
        }, 2000); // 模拟2秒的请求时间
    });
}

// 处理按钮点击事件
function handleSubmit() {
    // 检查标志位
    if (isSubmitting) {
        console.log("请求正在进行中，请稍后...");
        return;
    }

    // 设置标志位
    isSubmitting = true;
    console.log("开始请求...");

    // 发送请求
    sendRequest().then(response => {
        console.log(response);
    }).catch(error => {
        console.error(error);
    }).finally(() => {
        // 请求完成后重置标志位
        isSubmitting = false;
        console.log("请求完成，可以再次提交");
    });
}

埋点数据：模块曝光或者用户点击的时候进行埋点，相关数据会提前存到一个对象中。

定时器引用：页面中创建定时器后用一个变量保存定时器实例，用户可能离开页面的时候还未执行到定时器，因此需要在离开页面的时候进行清除。

Page({
  data: {
    // 其他数据
  },
  
  // 用于保存定时器实例的变量
  timer: null,

  // 页面加载时创建定时器
  onLoad: function() {
    this.createTimer();
  },

  // 创建定时器的方法
  createTimer: function() {
    this.timer = setTimeout(() => {
      console.log('定时器执行中...');
    }, 5000); // 5秒后执行
  },

  // 页面卸载时清除定时器
  onUnload: function() {
    this.clearTimer();
  },

  // 清除定时器的方法
  clearTimer: function() {
    if (this.timer) {
      clearTimeout(this.timer);
      console.log('页面即将卸载，定时器已清除');
    }
  },

  // 其他页面方法和事件处理函数
});