Artikel yang menerangkan penggunaan Proksi proksi ES6 dalam JS (perkongsian kod)

Dalam artikel sebelumnya "Analisis ringkas tentang pengoptimuman projek bahagian hadapan web dalam Vue (dengan kod) ", kami mengetahui tentang pengoptimuman projek bahagian hadapan web dalam Vue. Artikel berikut akan memperkenalkan anda kepada penggunaan Proksi proksi ES6 dalam JS. Mari lihat.

Konsep proksi

proxyMaksud asal bahasa Inggeris ialah agensi, dalam ES6, ia boleh diterjemahkan sebagai "ejen " . Ia digunakan terutamanya untuk menukar tingkah laku lalai operasi tertentu, yang bersamaan dengan membuat pengubahsuaian pada peringkat bahasa, jadi ia adalah sejenis "metaprogramming" (meta programming), iaitu pengaturcaraan bahasa pengaturcaraan.

proxyLapisan pemintasan dibina pada lapisan luar objek sasaran Operasi tertentu pada objek sasaran dari dunia luar (operasi yang boleh dipintas akan diterangkan kemudian) mesti melalui lapisan ini. daripada pemintasan. Sintaks

var proxy = new Proxy(target, handler);

menjana proxy melalui pembina Parameter target ialah objek sasaran untuk dipintas Parameter handler juga merupakan objek yang digunakan untuk menyesuaikan tingkah laku pemintasan.

Contoh

var obj = new Proxy(
  {},
  {
    get: function (target, key, receiver) {
      console.log(`getting ${key}!`);
      return Reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
      console.log(`setting ${key}!`);
      return Reflect.set(target, key, value, receiver);
    },
  }
);

Secara umumnya, parameter handle dipanggil objek konfigurasi Dalam objek konfigurasi, anda boleh mentakrifkan operasi yang perlu tercegat. Jika objek konfigurasi kosong, operasi pada proxy akan pergi terus ke objek sasaran.

Hanya memintas operasi proksi, bukan objek sasaran.

Kaedah kejadian Proksi

Apabila membaca sifat yang tidak wujud, buang ralat dan bukannya mengembalikan undefined

var person = {
  name: "张三",
};

var proxy = new Proxy(person, {
  get: function (target, property) {
    if (property in target) {
      return target[property];
    } else {
      throw new ReferenceError('Property "' + property + '" does not exist.');
    }
  },
});

proxy.name; // "张三"
proxy.age; // 抛出一个错误

Pemintasan membaca sifat yang diwarisi

let proto = new Proxy(
  {},
  {
    get(target, propertyKey, receiver) {
      console.log("GET " + propertyKey);
      return target[propertyKey];
    },
  }
);

let obj = Object.create(proto);
obj.xxx; // "GET xxx"

Indeks negatif bacaan tatasusunan (indeks negatif bermaksud mengambil nombor ke belakang)

function createArray(...elements) {
  let handler = {
    get(target, propKey, receiver) {
      let index = Number(propKey);
      if (index < 0) {
        propKey = String(target.length + index);
      }
      return Reflect.get(target, propKey, receiver);
    },
  };

  let target = [];
  target.push(...elements);
  return new Proxy(target, handler);
}

let arr = createArray("a", "b", "c");
arr[-1]; // c

Melaksanakan sekatan data

let validator = {
  set: function (obj, prop, value) {
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("The age is not an integer");
      }
      if (value > 200) {
        throw new RangeError("The age seems invalid");
      }
    }

    // 对于age以外的属性，直接保存
    obj[prop] = value;
  },
};

let person = new Proxy({}, validator);

person.age = 100;

person.age; // 100
person.age = "young"; // 报错
person.age = 300; // 报错

Halang sifat dalaman "_" daripada dibaca dan ditulis secara luaran (biasanya kita mulakan dengan garis bawah untuk menunjukkan sifat dalaman)

var handler = {
  get(target, key) {
    invariant(key, "get");
    return target[key];
  },
  set(target, key, value) {
    invariant(key, "set");
    target[key] = value;
    return true;
  },
};
function invariant(key, action) {
  if (key[0] === "_") {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
var target = {};
var proxy = new Proxy(target, handler);
proxy._prop;
// Error: Invalid attempt to get private "_prop" property
proxy._prop = "c";
// Error: Invalid attempt to set private "_prop" property

Pemintasan - panggilan fungsi, operasi call, apply

var twice = {
  apply(target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  },
};
function sum(left, right) {
  return left + right;
}
var proxy = new Proxy(sum, twice);
proxy(1, 2); // 6
proxy.call(null, 5, 6); // 22
proxy.apply(null, [7, 8]); // 30

Tidak benar...in...Gelung berkesan

var handler = {
  has(target, key) {
    if (key[0] === "_") {
      return false;
    }
    return key in target;
  },
};
var target = { _prop: "foo", prop: "foo" };
var proxy = new Proxy(target, handler);
"_prop" in proxy; // false

Tidak benarfor...in...Gelung berkesan

let stu1 = { name: "张三", score: 59 };
let stu2 = { name: "李四", score: 99 };

let handler = {
  has(target, prop) {
    if (prop === "score" && target[prop] < 60) {
      console.log(`${target.name} 不及格`);
      return false;
    }
    return prop in target;
  },
};

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

"score" in oproxy1;
// 张三 不及格
// false

"score" in oproxy2;
// true

for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// 张三
// 59

for (let b in oproxy2) {
  console.log(oproxy2[b]);
}
// 李四
// 99

Pemintasanobject.keys()Kaedah

let target = {
  a: 1,
  b: 2,
  c: 3,
};

let handler = {
  ownKeys(target) {
    return ["a"];
  },
};

let proxy = new Proxy(target, handler);

Object.keys(proxy);
// [ 'a' ]

Alamat RYF sumber artikel ini: https://es6.ruanyifeng.com/#docs/proxy

Pembelajaran yang disyorkan: Tutorial Lanjutan JS

Atas ialah kandungan terperinci Artikel yang menerangkan penggunaan Proksi proksi ES6 dalam JS (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!