随笔 - 42, 文章 - 0, 评论 - 12, 阅读 - 50989

本文主要封装方法，实现用户离开表单编辑页面时弹出提示框，若表单数据发生变化，则提示用户是否保存当前页面的信息，如图：

封装方法：

 1 /**
 2  * 比较俩个对象之间的差异，项目中多处用到监听表单数据是否改动，故封装此方法
 3  * 如果数据改动，则返回新旧对象记录改动字段的新旧值
 4  *
 5  * by wang
 6  * */
 7 export function diffObj(obj1, obj2) {
 8   function getTypeByObj (obj) {
 9     return Object.prototype.toString.call(obj).match(/^\[object ([a-zA-Z]*)\]$/)[1];
10   }
11   function isEmptyObject (obj) {
12     for (let key in obj) {
13       return false;
14     };
15     return true;
16   }
17   if (!obj1 || isEmptyObject(obj1) || !obj2 || isEmptyObject(obj2)) {
18     return null;
19   }
20   let diffRes = {
21     old_val: {},
22     new_val: {}
23   };
24   for (let k in obj2) {
25     // 判断数据类型是否一致
26     if (getTypeByObj(obj2[k]) === getTypeByObj(obj1[k])) {
27       // 比较 “Array”和“Object”类型
28       if (getTypeByObj(obj2[k]) === 'Array' || getTypeByObj(obj2[k]) === 'Object') {
29         const diffData = diffObj(obj1[k], obj2[k]);
30         if (!isEmptyObject(diffData)) {
31           diffRes.old_val[k] = diffData.old_val;
32           diffRes.new_val[k] = diffData.new_val;
33         }
34       } else if (obj1[k] !== obj2[k]) { // 比较其他类型数据
35         diffRes.old_val[k] = obj1[k];
36         diffRes.new_val[k] = obj2[k];
37       }
38     } else {
39       if ([undefined, null, ''].includes(obj1[k]) && [undefined, null, ''].includes(obj2[k])) {
40         // 这三类数据可视为相等，不做处理
41       }else {
42         diffRes.old_val[k] = obj1[k];
43         diffRes.new_val[k] = obj2[k];
44       }
45     }
46   }
47   // 若没有变化，返回null
48   if (isEmptyObject(diffRes.old_val) || isEmptyObject(diffRes.new_val)) {
49     return null;
50   }
51   return diffRes;
52 }