ES6 Proxy dalam praktiknya

Dengan kemunculan ECMAScript 2015, longsoran fitur datang; beberapa dari mereka membuat Anda marah, dan yang lain kejutan yang menyenangkan, seperti bertemu teman lama setelah waktu yang lama.

Beberapa fitur terkait dengan metaprogramming. Apa itu Saya tidak terlalu fasih berbicara, jadi mari kita beralih ke teman kita, Wikipedia.

Metaprogramming adalah teknik pemrograman di mana program komputer memiliki kemampuan untuk memperlakukan program lain sebagai datanya. Ini berarti bahwa suatu program dapat dirancang untuk membaca, menghasilkan, menganalisis atau mengubah program lain, dan bahkan memodifikasi sendiri saat berjalan. Dalam beberapa kasus, ini memungkinkan programmer untuk meminimalkan jumlah baris kode untuk mengekspresikan solusi, yang pada gilirannya mengurangi waktu pengembangan. Ini juga memungkinkan program fleksibilitas yang lebih besar untuk secara efisien menangani situasi baru tanpa kompilasi ulang.

Singkatnya, metaprogramming memungkinkan program untuk memanipulasi orang lain atau diri mereka sendiri pada saat kompilasi dan eksekusi. Metaprogramming dalam JavaScript didasarkan pada dua fitur: Proxy dan Reflect API. Dalam posting ini, kami akan mempertimbangkan yang pertama.

Proksi

Proxy adalah API baru yang memungkinkan mencegat, memodifikasi, dan memperluas objek saat runtime. Dengan menggunakan API ini, Anda dapat:

• Log profil dan debug,
• Mencegat panggilan ke properti,
• Validasi "dengan cepat",
• dll.

Proxy adalah konstruktor yang menerima dua parameter: objek sumber dan objek yang bertindak sebagai penangan untuk objek sumber. Yang terakhir berisi metode yang dikenal sebagai Perangkap.

Trap adalah metode yang mengubah perilaku beberapa bagian objek. Misalnya, jebakan mendapat dan mengatur mencegat panggilan ke properti untuk mendapatkan dan menetapkan nilai masing-masing, bisa menempatkan logika sebelum dan selama proses ini.

Untuk lebih memahami kegunaan proksi, mari kita lakukan beberapa latihan kecil.

Contoh: logging / profiling

Bayangkan saja, Anda berusia 17 tahun, akan berusia 18 tahun. Dan Anda ingin program Anda memberi selamat secara otomatis ketika Anda membukanya. Untuk ini, Anda dapat menggunakan Proxy.

et person = { name: "John Doe", age: 17 }; person = new Proxy(person, { set(target, property, value) { if (value === 18) { console.log("Congratulations! You are of legal age"); Reflect.set(target, property, value); return true; } } }); person.age = 18; Not only can we do logs, as I said at the beginning, we can do as far as the language limits us. Here we could make validations for the age, for example, if it exceeds 100 that throw us an error: if (value < 13 && value > 99) { throw new Error('The age should be between 13 and 99') } else { Reflect.set(target, property, value) } Example: secure access to properties let person = { name: "John Doe" }; const Undefined = new Proxy( {}, { get(target, name, receiver) { return Undefined; } } ); const Safeish = obj => { return new Proxy(obj, { get(target, property, receiver) { if (target.hasOwnProperty(property)) { const isObject = target[property] instanceof Object; return isObject ? Safeish(target[property]) : Reflect.get(target, property, receiver); } return Undefined; } }); }; person = Safeish(person); console.log(person.name); console.log(person.sister.name === Undefined); 

Contoh: array permintaan

Kami telah melihat contohnya, dengan jebakan dan set perangkap yang paling banyak digunakan. Untuk memperkuat, mari kita melangkah lebih jauh dan menggunakan proksi bersarang. Latihan ini akan mencoba untuk mengubah array konvensional ke array yang dapat ditanyakan untuk menggunakan operator seperti SQL groupBy klasik.

Untuk ini, kita akan membutuhkan dua parameter input:

• collection: array objek yang akan kita perpanjang.
• groupKeys: array string yang mewakili properti yang akan Anda kelompokkan (nama, kategori, harga, dll.)

 const data = [ { id: 1, category: 2, name: "Intel NUC Hades Canyon" }, { id: 2, category: 1, name: "Logitech K380" }, { id: 3, category: 1, name: "Genius ECO-8100" } ]; const groupable = (collection, groupKeys) => { // Check that the collection is an array if (!(collection instanceof Array)) { throw new TypeError("The input collection is not an Array"); } const data = JSON.parse(JSON.stringify(collection)); const clone = JSON.parse(JSON.stringify(collection)); Object.defineProperty(clone, "groupBy", { configurable: true, enumerable: false, writable: false, value: groupKeys.reduce((acc, cur) => { acc[cur] = null; return acc; }, {}) }); 

  return new Proxy(clone, { get(target, property, receiver) { if (property === "groupBy") { return new Proxy(target[property], { get(target, property, receiver) { // if the property to be grouped does not exist // log a warning and return [] if (!target.hasOwnProperty(property)) { return []; } // Otherwise, group by property return data.reduce(function(acc, cur) { (acc[cur[property]] = acc[cur[property]] || []).push(cur); return acc; }, {}); } }); } return Reflect.get(target, property, receiver); } }); }; const datasource = groupable(data, ["category"]); console.log(datasource.groupBy.category); 

Kesimpulan

Proxy mungkin bukan fitur ES6 yang paling banyak digunakan, tetapi bersama dengan Reflect API, ini adalah salah satu yang paling penting dan menarik. Fleksibilitasnya memungkinkan untuk mengadopsinya dalam banyak kasus dan, terbaiknya, mudah untuk diimplementasikan.

Referensi