快捷導(dǎo)航

JavaScript使用Proxy編寫一個取值限制器

更新時間：2023年12月29日 08:46:22 作者：天花板

最近一直在開發(fā)低代碼平臺的東西,由于項(xiàng)目里面東西有點(diǎn)多,取值或調(diào)用起來比較麻煩,使用本文就將使用Proxy編寫一個取值限制器,需要的小伙伴可以參考下

前言

最近一直在開發(fā)低代碼平臺的東西，由于項(xiàng)目里面東西有點(diǎn)多，取值或調(diào)用起來比較麻煩，特別是那些實(shí)例的特殊函數(shù)和變量。

所以我實(shí)現(xiàn)了一個實(shí)例收集器，讓開發(fā)者的權(quán)限變得非常高，細(xì)節(jié)就不聊了。

盡管這樣子會讓開發(fā)的體驗(yàn)變得很簡單，但是大家都知道最便宜的東西往往是最昂貴的，當(dāng)你可以隨意在項(xiàng)目中讀取到不同組件的實(shí)例的時候，很容易導(dǎo)致某一個組件和另一個風(fēng)馬牛不相及的組件產(chǎn)生關(guān)聯(lián)，當(dāng)某一側(cè)不當(dāng)操作修了實(shí)例的某些內(nèi)容的話，很可能導(dǎo)致隱藏且嚴(yán)重的bug。

因此對于這種上帝的操作必須進(jìn)行限制，因此對此我創(chuàng)建了一個取值限制器來進(jìn)行約束，代碼很簡單，不妨一看。

源碼實(shí)現(xiàn)

// 初始化 限制proxy生成函數(shù) 的 構(gòu)造函數(shù)
// fn 校驗(yàn)當(dāng)前對象是否可以讀取
const LimitProxyConstructorFn = (fn) => {
  // 限制proxy
  // target 需要劫持的對象
  const createLimitProxy = (target) => {
    return new Proxy(target, {
      get(target, property) {
        const res = Reflect.get(target, property);
        const isLegal = fn(property);
        // 判斷當(dāng)前取值是否是對象，因?yàn)閷ο罂赡芤拗迫≈?
        if (typeof res === "object" && res !== null) {
          // 合法對象 返回一個禁止賦值但支持取值的proxy對象
          if (isLegal) {
            return new Proxy(target, {
              get(target, property) {
                return Reflect.get(target, property);
              },
              set() {
                throw new Error("無法寫入屬性");
              },
            });
          }
          // 如果不合法，則遞歸創(chuàng)建 限制proxy
          return createLimitProxy(res);
        } else {
          // 如果當(dāng)前項(xiàng)不是對象，判斷是否合法，合法則返回，反之異常
          if (isLegal) return res;
          throw new Error("取值不合法");
        }
      },
      set() {
        throw new Error("無法寫入屬性");
      },
    });
  };
  return createLimitProxy;
};

測試用例

初始化限制proxy對象構(gòu)造函數(shù)

效果如下：

limitProxy 是一個proxy代理對象

看到藍(lán)色框里面的是取值操作，只有以__開頭的屬性才能讀取。

如果__ 開頭的屬性是一個對象則，該對象下所有的屬性都可以讀取。

反之認(rèn)為讀取不合法。

可以看到紅框里面都是賦值操作，限制proxy禁用了所有的賦值操作，保證原數(shù)據(jù)的安全

代碼解釋

這段代碼的作用是創(chuàng)建一個可以限制對象屬性讀取和寫入操作的代理對象生成函數(shù)。傳入的驗(yàn)證函數(shù) fn 用于確定哪些屬性是合法的。
生成的代理對象會根據(jù)驗(yàn)證函數(shù)的結(jié)果，限制對屬性的讀取和寫入操作。

代碼解釋：

代碼定義了一個限制proxy函數(shù)的生成函數(shù) LimitProxyConstructorFn，該函數(shù)接受一個參數(shù) fn，用于驗(yàn)證當(dāng)前對象是否可以讀取，fn接受一個一個參數(shù)property，即當(dāng)前讀取的對象的key的名稱，需要返回boolean判斷是否合法。
函數(shù)內(nèi)部定義了一個名為 createLimitProxy 的函數(shù)，它接受一個參數(shù) target，表示需要劫持的對象。createLimitProxy 函數(shù)使用 new Proxy() 創(chuàng)建一個代理對象來限制目標(biāo)對象的操作。

代理對象的 get 處理邏輯如下：

使用 Reflect.get() 獲取原始對象 target 的屬性值，并將結(jié)果存儲在變量 res 中。

調(diào)用驗(yàn)證函數(shù) fn 并傳入屬性名稱 property，將結(jié)果存儲在變量 isLegal 中，用于判斷屬性是否合法。

如果取值 res 是對象（不包括 null），則進(jìn)行進(jìn)一步處理：

如果對象合法（isLegal 為 true），則返回一個新的代理對象，該對象禁止賦值但允許取值。這個新代理對象的 get 處理邏輯與原始代理對象相同，即返回原始對象的屬性值，而 set 處理邏輯拋出一個錯誤，表示無法寫入屬性。
如果對象不合法，則遞歸調(diào)用 createLimitProxy 函數(shù)，創(chuàng)建針對該對象的限制代理，并返回限制代理對象。

如果取值 res 不是對象，則判斷屬性是否合法：