2026-03-13

防止他人直接对某个参数进行修改

在前端协作开发中，防止他人直接对某个参数进行修改可以采取以下几种策略：

使用 const 声明不可重新赋值的变量：
在JavaScript中，使用 const 声明的变量无法被重新赋值，这是防止变量被覆盖或意外修改的第一道防线。例如：
1
2
const MAX_LIMIT = 100;
MAX_LIMIT = 200; // 这将不会生效
但需要注意的是，const 声明的对象或数组本身的引用不可变，但其内部的属性或元素仍然可以修改。
使用 Object.freeze() 冻结对象：
Object.freeze() 方法可以冻结对象，使对象不能被修改。这意味着不能添加、删除或更改对象的属性。例如：
1
2
3
4
5
6
7
const config = {
apiUrl: "https://example.com/api",
timeout: 5000,
};
Object.freeze(config);
config.timeout = 10000; // 不会生效
console.log(config.timeout); // 输出 5000
Object.freeze() 只能浅冻结对象，嵌套对象仍然可以修改。为了解决这个问题，可以使用递归来深冻结对象。

使用 Proxy 进行拦截和控制：
Proxy 是一个强大的工具，用于拦截和自定义对象的基本操作，如 get 和 set。可以使用 Proxy 来控制对象属性的读写权限。例如：

const handler = {
  set(target, key, value) {
    console.warn(`你小子干嘛要修改 ${key} 这个字段`);
    return false; // 阻止修改
  },
  get(target, key) {
    return target[key];
  },
};
const secureObject = new Proxy({ secret: "moment" }, handler);
secureObject.secret = "7"; // 输出警告，修改无效
console.log(secureObject.secret); // 输出 'moment'

通过 Proxy 的 set 方法，可以拦截对对象属性的修改尝试，并根据条件阻止修改。

使用闭包保护数据：
闭包是JavaScript中的一种机制，可以将变量封装在函数作用域中，使其只能通过封装的函数访问或修改。这样可以有效地将数据保护起来，避免外部代码直接访问和修改。例如：

function createSecureClass(initialSecret) {
  let _secret = initialSecret; // 私有变量
  return {
    getSecret: function () {
      return _secret;
    },
    setSecret: function (newSecret) {
      _secret = newSecret; // 只能通过此方法修改
    },
  };
}
const instance = createSecureClass("moment");
console.log(instance.getSecret()); // 输出 'moment'
// 外部无法直接修改 _secret，只能通过实例方法修改
instance.setSecret("7");
console.log(instance.getSecret()); // 输出 '7'

_secret 是一个闭包变量，只能通过返回的 getSecret 和 setSecret 方法访问或修改。

使用 TypeScript 提高类型安全性：
在TypeScript中，可以使用 readonly 和 private 等修饰符来确保变量或属性不能被外部代码修改。使用 readonly 修饰符来确保属性只能在初始化时赋值，不能被修改。例如：
1
2
3
4
5
6
7
8
interface Config {
readonly apiUrl: string;
timeout: number;
}
const config: Config = {
apiUrl: "https://github.com/xun082/online-edit-web",
timeout: 5000,
};
使用 private 修饰符可以确保类的属性只能在类内部访问和修改。
vue readonly：
在Vue中，readonly 是一个用于创建只读响应式对象的函数。以下是关于Vue中readonly属性的一些关键点：
功能概述：
- readonly 是Vue 3中提供的一个新特性，用于将一个响应式对象变成只读对象。这意味着对象的属性只能被读取，不能被修改，从而提高应用的稳定性和安全性。
基本使用：
- 可以通过readonly函数将一个对象转换为只读对象。例如：
  1
  2
  3
  4
  import { readonly } from 'vue';
  const state = readonly({
  count: 0
  });
  在这个例子中，state对象被转换为只读对象，state.count属性只能被读取，不能被修改。
递归特性：
- readonly函数是递归的，如果一个对象包含其他对象，那么这些对象也会被转换为只读对象。
与deepReadonly的组合使用：
- 如果需要将数组或Map等其他类型的数据结构转换为只读对象，可以使用readonly函数和deepReadonly函数的组合。
shallowReadonly：
- 与readonly（深层次只读）相对的是shallowReadonly（浅层次只读），它只将对象的顶层属性设置为只读，嵌套对象的属性仍然可以被修改。
isReadonly：
- isReadonly 是Vue 3提供的函数，用于检查一个对象是否是只读的。它返回一个布尔值，指示给定的对象是否是通过readonly或shallowReadonly创建的只读对象。
动态readonly：
- 动态readonly是指根据运行时条件动态地设置组件属性的只读状态。可以通过计算属性、侦听器或自定义指令来实现这一功能。
注意事项：
- readonly会递归地将一个对象及其嵌套对象的所有属性设置为只读。readonly函数返回一个新的只读对象，原始的响应式对象不会被修改。
  通过使用readonly，你可以在Vue中创建只读的响应式对象，这对于确保数据不被意外修改非常有用。
  通过这些方法，可以有效地防止在前端协作开发中他人直接对某个参数进行修改，从而保障代码质量和数据安全。