面试官：前端协作开发时如何防止他人直接对某个参数进行修改 🤪🤪🤪

在前端协作开发中，防止他人直接修改某个参数或变量是保障代码质量和数据安全的关键。通过使用适当的技术和方法，可以确保数据在项目中受到保护，不会被未经授权的代码修改。

接下来我们将详细地讲解一下如何在前端协作开发中防止直接修改某个参数。

使用 const 声明不可重新赋值的变量

在 JavaScript 中，使用 const 声明的变量无法被重新赋值。这是防止变量被覆盖或意外修改的第一道防线。

js 复制代码

const MAX_LIMIT = 100;
MAX_LIMIT = 200;

值得我们注意的是 const 声明的对象或数组本身的引用不可变，但其内部的属性或元素仍然可以修改。

使用 Object.freeze() 冻结对象

Object.freeze() 方法可以冻结对象，使对象不能被修改。这意味着不能添加、删除或更改对象的属性。

js 复制代码

const config = {
  apiUrl: "https://example.com/api",
  timeout: 5000,
};

Object.freeze(config);

config.timeout = 10000; // 不会生效
console.log(config.timeout); // 输出 5000

Object.freeze() 只能浅冻结对象。嵌套对象仍然可以修改。为了解决这个问题，可以使用递归来深冻结对象。

js 复制代码

function deepFreeze(obj) {
  Object.freeze(obj);
  Object.keys(obj).forEach((key) => {
    if (
      typeof obj[key] === "object" &&
      obj[key] !== null &&
      !Object.isFrozen(obj[key])
    ) {
      deepFreeze(obj[key]);
    }
  });
}

const nestedConfig = {
  settings: {
    theme: "dark",
    language: "en",
  },
};

deepFreeze(nestedConfig);
nestedConfig.settings.theme = "light"; // 无效
console.log(nestedConfig.settings.theme); // 输出 'dark'

使用 Proxy 进行拦截和控制

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

js 复制代码

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 中的一种机制，可以将变量封装在函数作用域中，使其只能通过封装的函数访问或修改。这样可以有效地将数据保护起来，避免外部代码直接访问和修改。

js 复制代码

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 修饰符来确保属性只能在初始化时赋值，不能被修改。

ts 复制代码

interface Config {
  readonly apiUrl: string;
  timeout: number;
}

const config: Config = {
  apiUrl: "https://github.com/xun082/online-edit-web",
  timeout: 5000,
};

使用 private 修饰符可以确保类的属性只能在类内部访问和修改。

ts 复制代码

class SecureClass {
  private secret: string;

  constructor(secret: string) {
    this.secret = secret;
  }

  getSecret(): string {
    return this.secret;
  }

  setSecret(newSecret: string): void {
    this.secret = newSecret;
  }
}

const M = new SecureClass("moment");
console.log(M.getSecret()); // 输出 'moment'

M.secret = "7"; // 报错：属性 'secret' 是私有的

总结

在前端协作开发中，防止他人直接修改某个参数或变量是提高代码安全性和可维护性的关键。通过使用 const、Object.freeze()、Proxy、闭包、TypeScript 的 readonly 和 private 修饰符。

除了这些之外，我们还可以通过模块化结构将数据和逻辑封装在各自的模块中，减少数据的外部可见性。使用 import 和 export 来限制模块的作用域，避免全局变量的使用。

再有就是添加严格的 code review。

最后再来提一些这两个开源项目，它们都是我们目前正在维护的开源项目：

如果你想参与进来开发或者想进群学习，可以添加我微信 yunmz777，后面还会有很多需求，等这个项目完成之后还会有很多新的并且很有趣的开源项目等着你。