Memahami Proksi Javascript dan Reflect API

pengenalan

Dalam Javascript, Proksi membolehkan anda memerangkap operasi objek tertentu dan menyesuaikannya. Proksi bertindak sebagai perantara antara objek dan "dunia nyata". Oleh itu, anda boleh meningkatkan operasi asas objek untuk melaksanakan logik yang lebih kompleks atau mentakrifkan semula operasi asas untuk memenuhi keperluan anda.

Kes penggunaan termasuk:

• akses harta log, berguna untuk nyahpepijat
• sahkan sebarang interaksi dengan objek (seperti pengesahan borang)
• membantu menguatkuasakan pemformatan yang konsisten untuk

Proksi mengambil dua parameter:

• sasaran: yang merupakan objek asal yang anda mahu proksi
• pengendali: objek yang mentakrifkan operasi yang akan anda pintas dan cara anda mentakrifkan semula operasi tersebut

Contoh asas

const target = {
    greeting1: "Hello",
    greeting2: "Good morning"
}

const handler = {
    get(target, prop, receiver) {
        return target[prop] + " friends!"
    }
}

const proxy = new Proxy(target, handler)

console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!

Dalam contoh ini, kami mentakrifkan Proksi. Objek sasaran mempunyai dua sifat. Kami mentakrifkan pengendali yang menyediakan pelaksanaan pengendali get(). Perangkap get memintas akses kepada mana-mana harta pada objek sasaran, dan di dalamnya, kita boleh mengubah suai gelagat mengikut keperluan.

Dengan persediaan ini, ini bermakna setiap kali kami akan mengakses sifat dalam objek sasaran, pengendali memintasnya dan menjalankan kod yang kami laksanakan. Dalam kes kami, ia hanya mengambil nilai hartanah dan menambah rakan!.

Renungkan

Selalunya, Proksi digunakan dengan Reflect API. Reflect menyediakan kaedah dengan nama yang sama seperti perangkap Proksi. Seperti yang ditunjukkan oleh namanya, ia mencerminkan semantik untuk menggunakan kaedah dalaman objek yang sepadan.

const target = {
    greeting1: "Hello",
    greeting2: "Good morning"
}

const handler = {
    get(target, prop, receiver) {
        return Reflect.get(...arguments) + " friends!"
    }
}

const proxy = new Proxy(target, handler)

console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!

Reflect tidak diperlukan untuk menggunakan Proksi tetapi menggunakan Reflect membolehkan kami memastikan bahawa gelagat tersebut sepadan dengan operasi enjin Javascript asli. Ia juga memastikan keserasian dengan kemas kini masa hadapan, menghalang kesan sampingan yang tidak diingini dan memudahkan kod. Tanpanya, pembangun perlu melaksanakan semula gelagat seperti akses harta benda, tugasan, pemadaman... yang boleh terdedah kepada ralat dan tidak konsisten dengan gelagat asli Javascript.

Contoh

Mari bina beberapa contoh untuk meneroka perkara yang boleh kita lakukan dengan Proksi.

Pembalakan

Dalam contoh pertama kami, katakan kami ingin log tindakan yang diambil pada objek. Setiap kali kami mendapat, menetapkan atau memadam harta, saya mahu dicetak ke konsol. Ini mungkin berguna untuk tujuan nyahpepijat.

const target = {
    name: "Damien",
    age: 32,
    status: "WRITING"
}

const loggerHandler = {
    get(target, prop, receiver) {
        if (prop in target) {
            console.log(`[LOG] Accessing property ${prop}. Current value is ${target[prop]}`)
            return Reflect.get(...arguments)
        } else {
            console.error(`[LOG] Error accessing non-existent property ${prop}`)
        }

    },

    set(target, key, value) {
        console.log(`[LOG] Setting property ${key}. New value: ${value}`)
        return Reflect.set(...arguments)
    },

    deleteProperty(target, prop) {
        console.warn(`[LOG] Deleting property: ${prop}`)
        return Reflect.deleteProperty(...arguments)
    }
}

const proxy = new Proxy(target, loggerHandler)

proxy.name // [LOG] Accessing property name. Current value is Damien
proxy.status // [LOG] Accessing property status. Current value is WRITING

proxy.name = "Bob" // [LOG] Setting property name. New value: Bob
proxy.status = "NAPPING" // [LOG] Setting property status. New value: NAPPING

proxy.job = "Developer" // [LOG] Setting property job. New value: Developer

delete proxy.job // [LOG] Deleting property: job

proxy.job // [LOG] Error accessing non-existent property job

Kami menentukan loggerHandler yang mentakrifkan semula 3 operasi asas: dapatkan, tetapkan dan padam. Untuk setiap tindakan, kami log sesuatu ke konsol yang menerangkan perkara yang berlaku. Keindahan Proksi, kita tidak perlu menulis pernyataan konsol setiap kali. Kami berinteraksi dengan objek kami seperti yang selalu kami lakukan, dan proksi menjaga kelakuan pembalakan. Cantik tak?

Pengesahan input

Dalam contoh kedua kami, kami akan menggunakan proksi untuk melaksanakan pengesahan input untuk data borang.

const validationRules = {
    name: value => value.length >= 3 || "Name must be at least 3 characters long",
    age: value => Number.isInteger(value) || "Age must be a number",
    email: value => value.includes('@') || "Enter a valid email"
}

let formData = {
    name: "",
    age: null,
    email: ""
}

const formHandler = {
    set(target, key, value) {
        if (typeof value === "string") {
            value = value.trim()
        }
        const validationResult = validationRules[key](value)
        if (validationResult !== true) {
            console.error(`Validation failed for property ${key}: ${validationResult}`)
            return false;
        }

        return Reflect.set(...arguments)
    }
}

const formProxy = new Proxy(formData, formHandler)

formProxy.age = "32 years old" // Validation failed for property age: Age must be a number
formProxy.name = "Da" // Validation failed for property name: Name must be at least 3 characters long
formProxy.email = "damcoss mail.com" // Validation failed for property email: Enter a valid email

formProxy.age = 32 // OK
formProxy.name = "Damien" // OK
formProxy.email = "damcoss@mail.com" // OK

Kami mentakrifkan di sini objek dengan kaedah berbeza yang digunakan untuk mengesahkan sama ada nilai itu sah atau tidak. Kemudian, kita menggunakan logik yang sama. Kami mempunyai formData objek sasaran kami yang ingin kami proksi. Dalam formHandler, kami mentakrifkan semula kaedah set() untuk menggunakan peraturan pengesahan kami pada nilai input.

Kesimpulan

Proksi, digabungkan dengan Reflect API, adalah alat yang fleksibel dan berkuasa untuk memintas dan menyesuaikan operasi pada objek. Menggunakannya, anda boleh meningkatkan dan mengawal tingkah laku secara dinamik. Dengan menggunakan Reflect API, anda juga memastikan bahawa tingkah laku itu konsisten dengan enjin Javascript.

Proksi sering digunakan dalam perpustakaan dan rangka kerja untuk membolehkan tingkah laku lanjutan seperti pengaturcaraan reaktif, pembalut API dan pemerhatian harta benda.

Selamat mencuba ❤️

Atas ialah kandungan terperinci Memahami Proksi Javascript dan Reflect API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!