Pernahkah anda menghadapi situasi di mana anda ingin dapat mengawal nilai dalam objek atau array? Mungkin anda ingin menyekat jenis data tertentu, walaupun mengesahkan data sebelum menyimpannya ke dalam objek. Katakan anda mahu bertindak balas terhadap data masuk atau data keluar dalam beberapa cara? Sebagai contoh, mungkin anda ingin mengemas kini DOM atau menukar kelas yang mengubah gaya dengan memaparkan hasilnya, kerana data akan berubah. Pernah mahu bekerja pada idea halaman atau bahagian yang mudah yang hanya memerlukan beberapa fungsi kerangka seperti Vue atau React, tetapi tidak mahu memulakan aplikasi baru?
Kemudian proksi JavaScript mungkin betul -betul apa yang anda perlukan!
Biarkan saya membuat kenyataan pertama: Saya lebih banyak pemaju UI dalam teknologi front-end; Saya ingin mencipta hanya projek yang indah yang konsisten dalam penyemak imbas dan mempunyai semua ciri yang berkaitan. Jadi, apabila ia datang kepada fungsi JavaScript yang lebih murni, saya cenderung untuk tidak pergi lebih mendalam.
Walau bagaimanapun, saya masih suka melakukan penyelidikan dan saya sentiasa mencari sesuatu untuk ditambah ke senarai pembelajaran baru saya. Ternyata proksi JavaScript adalah topik yang menarik, kerana hanya melihat kembali asas -asas membuka banyak kemungkinan tentang bagaimana untuk memanfaatkan ciri ini. Namun, pada pandangan pertama, kod itu dapat dengan cepat menjadi berat. Sudah tentu, semuanya bergantung pada keperluan anda.
Konsep objek proksi telah wujud selama beberapa waktu. Dalam penyelidikan saya, saya dapat mencari rujukan dari beberapa tahun yang lalu. Walau bagaimanapun, ia tidak tinggi dalam senarai saya kerana ia tidak pernah disokong di Internet Explorer. Sebagai perbandingan, ia telah disokong dengan baik dalam semua pelayar lain selama bertahun -tahun. Ini adalah salah satu sebab Vue 3 tidak serasi dengan Internet Explorer 11 kerana proksi digunakan dalam projek VUE terkini.
Jadi, apakah sebenarnya objek proksi?
MDN menerangkan objek proksi sebagai:
[...] membolehkan anda membuat proksi untuk objek lain yang memintas dan mentakrifkan semula operasi asas objek itu.
Idea umum ialah anda boleh membuat objek dengan fungsi yang membolehkan anda mengawal tindakan tipikal yang berlaku apabila menggunakan objek. Dua yang paling biasa mendapat dan menetapkan nilai yang disimpan dalam objek.
const myObj = {
mykey: 'nilai'
}
Console.log (myobj.mykey);
myObj.mykey = 'dikemas kini';Oleh itu, dalam objek proksi kami, kami akan membuat "perangkap" untuk memintas operasi ini dan melaksanakan sebarang fungsi yang mungkin kami ingin capai. Terdapat sehingga tiga belas perangkap sedemikian. Saya tidak semestinya meliputi semua perangkap ini, kerana tidak semuanya diperlukan untuk contoh -contoh mudah yang saya berikan di bawah. Sekali lagi, ia bergantung kepada apa yang anda perlukan untuk konteks khusus untuk mewujudkan kandungan. Percayalah, hanya menguasai asas -asas boleh pergi jauh.
Untuk memperluaskan contoh di atas untuk membuat proksi, kami akan melakukan perkara berikut:
const myObj = {
mykey: 'nilai'
}
const handler = {
Dapatkan: Fungsi (sasaran, prop) {
kembali sasaran [prop];
},
set: fungsi (sasaran, prop, nilai) {
sasaran [prop] = nilai;
kembali benar;
}
}
const proxy = proksi baru (myObj, pengendali);
Console.log (proxy.mykey);
proxy.mykey = 'dikemaskini';Pertama, mari kita mulakan dengan objek standard. Kami kemudian membuat objek pengendali yang memegang fungsi pengendali , biasanya dikenali sebagai perangkap. Ini mewakili tindakan yang boleh dilakukan pada objek tradisional, dalam kes ini, yang hanya lulus kandungan tanpa sebarang perubahan. Selepas itu, kami membuat proksi kami menggunakan pembina dengan objek sasaran dan objek pengendali. Pada masa itu, kita boleh merujuk objek proksi untuk mendapatkan dan menetapkan nilai yang akan menjadi proksi untuk objek sasaran asal MYOBJ.
Perhatikan pulangan yang benar pada akhir perangkap set. Ini bertujuan untuk memaklumkan proksi bahawa nilai tetapan harus dianggap berjaya. Dalam sesetengah kes, jika anda ingin mengelakkan penetapan nilai (mempertimbangkan kesilapan pengesahan), anda harus kembali palsu. Ini juga akan menyebabkan kesilapan konsol dan mengeluarkan TypeError.
Sekarang, satu perkara yang perlu diingat corak ini ialah objek sasaran asal masih tersedia. Ini bermakna anda boleh memintas proksi dan menukar nilai objek tanpa menggunakan proksi. Semasa saya membaca tentang menggunakan objek proksi, saya dapati beberapa corak berguna yang dapat membantu masalah ini.
Biarkan myObj = {
mykey: 'nilai'
}
const handler = {
Dapatkan: Fungsi (sasaran, prop) {
kembali sasaran [prop];
},
set: fungsi (sasaran, prop, nilai) {
sasaran [prop] = nilai;
kembali benar;
}
}
myObj = proksi baru (myObj, pengendali);
Console.log (myobj.mykey);
myObj.mykey = 'dikemas kini';Dalam mod ini, kami menggunakan objek sasaran sebagai objek proksi semasa merujuk objek sasaran dalam pembina proksi. Ya, itu sahaja. Ini berfungsi, tetapi saya merasa mudah untuk mengelirukan apa yang sedang berlaku. Oleh itu, mari buat objek sasaran dalam pembina proksi:
const handler = {
Dapatkan: Fungsi (sasaran, prop) {
kembali sasaran [prop];
},
set: fungsi (sasaran, prop, nilai) {
sasaran [prop] = nilai;
kembali benar;
}
}
const proxy = proksi baru ({
mykey: 'nilai'
}, pengendali);
Console.log (proxy.mykey);
proxy.mykey = 'dikemaskini';Malah, kita boleh membuat objek sasaran dan objek pengendali dalam pembina jika kita mahu:
const proxy = proksi baru ({
mykey: 'nilai'
}, {
Dapatkan: Fungsi (sasaran, prop) {
kembali sasaran [prop];
},
set: fungsi (sasaran, prop, nilai) {
sasaran [prop] = nilai;
kembali benar;
}
});
Console.log (proxy.mykey);
proxy.mykey = 'dikemaskini';Malah, ini adalah corak yang saya gunakan paling kerap dalam contoh di bawah. Syukurlah, cara untuk membuat objek proksi adalah fleksibel. Hanya gunakan sebarang mod yang sesuai dengan anda.
Berikut adalah beberapa contoh yang meliputi penggunaan proksi JavaScript dari pengesahan data asas untuk menggunakan pengambilan data borang. Ingat, contoh -contoh ini meliputi asas -asas proksi JavaScript; Dalam sesetengah kes, mereka hanya membuat kod JavaScript biasa dalam objek proksi untuk melaksanakan operasi JavaScript biasa. Fikirkan mereka sebagai cara untuk memperluaskan beberapa tugas JavaScript yang sama dengan lebih banyak kawalan ke atas data.
Contoh pertama saya merangkumi apa yang selalu saya fikirkan adalah soalan wawancara pengekodan yang agak mudah dan pelik: membalikkan rentetan. Saya tidak pernah menyukai soalan ini dan tidak pernah mengemukakan soalan ini semasa wawancara. Sebagai seseorang yang suka menentang arus perkara seperti ini, saya cuba penyelesaian bukan tradisional. Anda tahu, hanya untuk keseronokan kadang-kadang membuangnya, salah satu penyelesaiannya adalah keseronokan depan yang hebat. Ia juga memberikan contoh mudah yang menunjukkan bagaimana proksi digunakan.
Jika anda menaip input, anda akan melihat bahawa ditaip dicetak secara terbalik di bawah. Jelas sekali, terdapat banyak cara untuk membalikkan rentetan yang boleh digunakan. Walau bagaimanapun, mari kita lihat kaedah penyongsangan aneh saya.
const reverse = proksi baru (
{
Nilai: ''
},
{
set: fungsi (sasaran, prop, nilai) {
sasaran [prop] = nilai;
document.QuerySelectorAll ('[Data-Reverse]'). Foreach (item => {
biarkan el = document.createeelement ('div');
el.innerHtml = '\ u {202e}' 'nilai;
item.innertext = el.innerHtml;
});
kembali benar;
}
}
)
Document.QuerySelector ('Input'). AddEventListener ('Input', E => {
reverse.value = e.target.value;
});Pertama, kita membuat proksi baru, objek sasaran adalah nilai tunggal yang memegang apa-apa yang ditaip dalam input. Perangkap GET tidak wujud kerana kita hanya memerlukan passthrough mudah kerana kita tidak mempunyai fungsi sebenar untuk mengikatnya. Dalam kes ini, tiada yang diperlukan. Kami akan membincangkannya kemudian.
Untuk perangkap yang ditetapkan, kami mempunyai beberapa ciri untuk dilakukan. Masih ada passthrough mudah di mana nilai ditetapkan sebagai kunci nilai dalam objek sasaran seperti biasa. Kemudian terdapat QuerySelectorall yang mencari semua elemen pada halaman yang mempunyai atribut data yang dibalikkan data. Ini membolehkan kami mencari pelbagai elemen pada halaman sekaligus dan mengemas kini mereka. Ini memberi kita operasi mengikat seperti kerangka yang semua orang suka melihat. Ini juga boleh dikemas kini untuk meletakkan input untuk membolehkan kes jenis mengikat dua hala yang sesuai.
Di sinilah cara saya yang unik untuk membalikkan rentetan. Div dicipta dalam ingatan dan kemudian dikemas kini dengan rentetan ke InnerHTML elemen. Bahagian pertama rentetan menggunakan kod perpuluhan Unicode khas yang sebenarnya akan membalikkan segala -galanya selepas itu, menjadikannya dari kanan ke kiri. Kemudian, innertext elemen sebenar pada halaman akan mendapat innerHTML div dalam memori. Ini dijalankan setiap kali anda memasukkan sesuatu dalam input;
Akhirnya, kami menetapkan pendengar acara pada input yang menetapkan kekunci nilai dalam objek sasaran dengan nilai input (iaitu sasaran acara).
Akhirnya, contoh yang sangat mudah untuk melaksanakan kesan sampingan pada DOM halaman dengan menetapkan nilai ke objek.
Corak UI yang biasa adalah untuk memformat nilai input ke dalam urutan yang lebih tepat daripada hanya huruf dan rentetan angka. Contohnya ialah input telefon. Kadang -kadang, jika nombor telefon yang ditaip kelihatan seperti nombor telefon, ia kelihatan dan terasa lebih baik. Walau bagaimanapun, silap mata ialah apabila kita memformat nilai input, kita mungkin masih memerlukan versi data yang tidak diformat.
Ini adalah tugas yang mudah untuk proksi JavaScript.
Apabila anda menaip nombor dalam input, ia akan diformatkan sebagai nombor telefon A.S. standard (mis. (123) 456-7890). Ambil perhatian bahawa nombor telefon juga dipaparkan di bawah input dalam teks biasa, sama seperti contoh rentetan terbalik di atas. Butang ini mengeluarkan kedua-dua versi data yang diformat dan tidak diformat ke konsol.
Jadi, inilah kod untuk proksi:
const telefon = proksi baru (
{
_clean: '',
Nombor: '',
Dapatkan bersih () {
kembali ini._clean;
}
},
{
Dapatkan: Fungsi (sasaran, prop) {
jika (! Prop.StartSwith ('_')) {
kembali sasaran [prop];
} else {
Kembali 'Kemasukan tidak dijumpai!'
}
},
set: fungsi (sasaran, prop, nilai) {
jika (! Prop.StartSwith ('_')) {
sasaran._clean = value.Replace (/\ d/g, '') .substring (0, 10);
seks const = {
Kawasan: Target._clean.Substring (0, 3),
Awalan: Target._clean.Substring (3, 6),
Talian: Target._clean.Substring (6, 10)
}
target.number =
sasaran._clean.length> 6?
sasaran._clean.length> 3?
sasaran._clean.length> 0?
document.QuerySelectorAll ('[data-phone_number]'). foreach (item => {
jika (item.tagname === 'input') {
item.value = target.number;
} else {
item.innertext = target.number;
}
});
kembali benar;
} else {
kembali palsu;
}
}
}
);Terdapat lebih banyak kod dalam contoh ini, jadi mari kita memecahkannya. Bahagian pertama adalah objek sasaran yang kita mulakan secara dalaman dalam proksi. Ia mempunyai tiga aspek.
{
_clean: '',
Nombor: '',
Dapatkan bersih () {
kembali ini._clean;
}
},Kunci pertama _clean adalah pemboleh ubah kami yang memegang versi data yang tidak diformat. Ia bermula dengan corak penamaan pembolehubah tradisional, merawatnya sebagai "swasta". Kami mahu menjadikannya tidak tersedia dalam keadaan biasa. Ketika kami pergi lebih mendalam, kami akan memperkenalkan ini lebih banyak.
Nombor kunci kedua hanya menjimatkan nilai nombor telefon yang diformat.
"Kunci" ketiga adalah fungsi GET dengan nama bersih. Ini akan mengembalikan nilai pembolehubah _clean peribadi kami. Dalam kes ini kita hanya mengembalikan nilai itu, tetapi ini memberi peluang untuk melakukan operasi lain jika kita mahu. Ini seperti proksi getter proksi getter. Ini mungkin kelihatan pelik, tetapi ia menyediakan cara mudah untuk mengawal data. Bergantung pada keperluan khusus anda, ini boleh menjadi cara yang agak mudah untuk menangani keadaan ini. Ia berfungsi untuk contoh mudah kami di sini, tetapi langkah tambahan mungkin diperlukan.
Sekarang adalah perangkap untuk proksi.
Dapatkan: Fungsi (sasaran, prop) {
jika (! Prop.StartSwith ('_')) {
kembali sasaran [prop];
} else {
Kembali 'Kemasukan tidak dijumpai!'
}
},Pertama, kami menyemak kekunci Prop atau Objek yang masuk untuk menentukan sama ada ia tidak bermula dengan garis bawah. Jika ia tidak bermula dengan garis bawah, kita hanya perlu mengembalikannya. Jika ia bermula dengan garis bawah, maka kami mengembalikan rentetan yang menunjukkan bahawa entri itu tidak dijumpai. Pulangan negatif jenis ini boleh dikendalikan dengan cara yang berbeza seperti yang diperlukan. Mengembalikan rentetan, mengembalikan ralat, atau menjalankan kod dengan kesan sampingan yang berbeza. Ia bergantung sepenuhnya pada keadaan tertentu.
Satu perkara yang perlu diperhatikan dalam contoh saya ialah saya tidak berurusan dengan perangkap proksi lain yang mungkin digunakan dengan apa yang dianggap sebagai pemboleh ubah peribadi dalam proksi. Untuk melindungi data ini dengan lebih lengkap, anda perlu mempertimbangkan perangkap lain seperti [definiteProperty] ( https://www.php.cn/link/cd69510f4a69bc0ef6ba504331b9d546 atau ownkeys - XY. Tetapi jika ia adalah orang lain, anda mungkin mahu mempertimbangkan mengunci sebanyak mungkin kandungan.
Sekarang adalah di mana kebanyakan sihir berlaku dalam perangkap contoh ini:
set: fungsi (sasaran, prop, nilai) {
jika (! Prop.StartSwith ('_')) {
sasaran._clean = value.Replace (/\ d/g, '') .substring (0, 10);
seks const = {
Kawasan: Target._clean.Substring (0, 3),
Awalan: Target._clean.Substring (3, 6),
Talian: Target._clean.Substring (6, 10)
}
target.number =
sasaran._clean.length> 6?
sasaran._clean.length> 3?
sasaran._clean.length> 0?
document.QuerySelectorAll ('[data-phone_number]'). foreach (item => {
jika (item.tagname === 'input') {
item.value = target.number;
} else {
item.innertext = target.number;
}
});
kembali benar;
} else {
kembali palsu;
}
}Pertama, lakukan pemeriksaan yang sama pada pembolehubah peribadi dalam proksi. Saya tidak benar -benar menguji jenis alat lain, tetapi anda mungkin ingin mempertimbangkan untuk melakukan ini di sini. Saya mengandaikan bahawa hanya kunci nombor dalam objek sasaran proksi akan diselaraskan.
Nilai yang diluluskan (nilai yang dimasukkan) akan melepaskan segala -galanya kecuali aksara angka dan menyimpannya ke kunci _clean. Nilai ini kemudiannya digunakan sepanjang proses untuk membina semula nilai yang diformat. Pada asasnya, setiap kali anda menaip, keseluruhan rentetan dibina semula dalam masa nyata hingga format yang diharapkan. Kaedah substring mengunci nombor ke nombor sepuluh digit.
Kemudian buat objek bahagian untuk menyimpan bahagian yang berlainan dari nombor telefon kami, berdasarkan pecahan nombor telefon AS. Oleh kerana panjang pembolehubah _clean meningkat, kami mengemas kini nombor ke corak format yang ingin kami lihat pada masa itu.
A QuerySelectorall sedang mencari unsur-unsur dengan atribut data data-telefon_number dan menjalankannya melalui gelung foreach. Jika elemen adalah input untuk mengemas kini nilai, innertext dari mana -mana elemen lain dikemas kini. Ini adalah bagaimana teks muncul di bawah input. Jika kita mahu meletakkan elemen input lain dengan atribut data itu, kita akan melihat nilainya dikemas kini dalam masa nyata. Ini adalah cara untuk membuat pengikatan satu arah atau dua hala, bergantung kepada keperluan.
Akhirnya, kembali benar untuk membiarkan proksi tahu bahawa semuanya berjalan lancar. Mengembalikan palsu jika prop atau kunci masuk bermula dengan garis bawah.
Akhirnya, pendengar acara yang menjadikan kerja ini:
document.QuerySelectorAll ('input [data-telefon_number]'). foreach (item => {
item.AdDeventListener ('input', (e) => {
Phone.Number = E.Target.Value;
});
});
Document.QuerySelector ('#get_data'). AddEventListener ('klik', (e) => {
Console.log (Phone.Number);
Console.log (Phone.clean);
});Kumpulan pertama mencari semua input dengan atribut data khusus kami dan menambah pendengar acara kepada mereka. Untuk setiap acara input, nilai kunci nombor proksi dikemas kini dengan nilai yang dimasukkan sekarang. Oleh kerana kami memformat nilai input setiap kali kami menghantarnya, kami memadam mana -mana aksara yang bukan nombor.
Set kedua butang yang mencari output dua set data (seperti yang diperlukan) dan output ke konsol. Ini menunjukkan bagaimana kita menulis kod untuk meminta data yang diperlukan atas permintaan. Mudah -mudahan, jelas bahawa telefon. Perhatikan bahawa ia tidak dipanggil sebagai fungsi seperti Phone.clean (), kerana ia bertindak sebagai proksi mendapatkan dalam proksi kami.
Anda boleh menggunakan tatasusunan sebagai sasaran "objek" dalam proksi dan bukannya objek. Oleh kerana ia akan menjadi array, terdapat beberapa perkara yang perlu dipertimbangkan. Fungsi array (seperti push ()) akan ditangani entah bagaimana dalam perangkap setter proksi. Juga, dalam kes ini, mewujudkan fungsi tersuai dalam konsep objek sasaran sebenarnya tidak berfungsi. Walau bagaimanapun, terdapat beberapa perkara yang berguna dengan tatasusunan sebagai sasaran.
Sudah tentu, menyimpan nombor dalam tatasusunan bukanlah sesuatu yang baru. Jelas. Walau bagaimanapun, saya akan menambah beberapa peraturan ke pelbagai penyimpanan digit ini, seperti tidak membenarkan nilai pendua dan hanya membenarkan nombor. Saya juga akan menyediakan beberapa pilihan output seperti menyusun, menjumlahkan, purata dan membersihkan nilai. Kemudian kemas kini antara muka pengguna kecil yang mengawal semua ini.
Berikut adalah objek proksi:
nombor const = proksi baru ([],
{
Dapatkan: Fungsi (sasaran, prop) {
mesej.classlist.remove ('error');
jika (prop === 'sort') kembali [... sasaran] .sort ((a, b) => a - b);
jika (prop === 'sum') kembali [... sasaran] .reduce ((a, b) => ab);
jika (prop === 'purata') kembali [... sasaran] .reduce ((a, b) => ab) / target.length;
jika (prop === 'clear') {
Mesej.innertext = `$ {Target.Length} Nombor $ {Target.Length === 1?
sasaran.splice (0, target.length);
collection.innertext = sasaran;
}
kembali sasaran [prop];
},
set: fungsi (sasaran, prop, nilai) {
jika (prop === 'panjang') kembali benar;
DataAnput.Value = '';
mesej.classlist.remove ('error');
jika (! number.isInteger (nilai)) {
Console.error ('Data yang disediakan bukan nombor!');
Mesej.Innertext = 'Data yang disediakan bukan nombor!';
mesej.classlist.add ('error');
kembali palsu;
}
jika (sasaran. termasuk (nilai)) {
Console.error (`nombor $ {value} telah diserahkan!`);
message.innertext = `nombor $ {value} telah diserahkan!`;
mesej.classlist.add ('error');
kembali palsu;
}
sasaran [prop] = nilai;
collection.innertext = sasaran;
message.innertext = `nombor $ {value} ditambah!`;
kembali benar;
}
});Untuk contoh ini, saya akan bermula dengan perangkap setter.
Perkara pertama yang perlu dilakukan ialah memeriksa sama ada atribut panjang ditetapkan ke array. Ia hanya kembali benar supaya ia berlaku dengan cara yang biasa. Jika anda perlu bertindak balas terhadap panjang yang ditetapkan, ia sentiasa boleh menambah kod di tempat yang betul.
Dua baris kod seterusnya merujuk kepada dua elemen HTML yang disimpan pada halaman menggunakan QuerySelector. DataAnput adalah elemen input, yang ingin kita jelaskan setiap kali kita masuk. Mesej adalah elemen yang memegang respons terhadap perubahan array. Oleh kerana ia mempunyai konsep keadaan ralat, kami pastikan ia tidak berada dalam keadaan itu setiap kali ia dimasukkan.
Yang pertama jika memeriksa sama ada input sebenarnya adalah nombor. Jika tidak, maka ia akan melakukan beberapa perkara. Ia memancarkan ralat konsol yang menunjukkan masalah. Unsur mesej mendapat pernyataan yang sama. Kemudian, mesej memasuki keadaan ralat melalui kelas CSS. Akhirnya, ia mengembalikan palsu, yang juga menyebabkan ejen mengeluarkan kesilapannya sendiri kepada konsol.
Yang kedua jika cek jika input sudah ada dalam array; Sekiranya terdapat pertindihan, mesej yang sama berlalu seperti yang pertama jika berlaku. Penghantaran mesej sedikit berbeza kerana ia adalah templat literal supaya kita dapat melihat nilai pendua.
Bahagian terakhir menganggap bahawa semuanya berjalan lancar dan dapat diteruskan. Nilai ditetapkan seperti biasa, dan kemudian kami mengemas kini senarai pengumpulan. Koleksi merujuk kepada elemen lain pada halaman yang menunjukkan koleksi nombor semasa dalam array. Begitu juga, mesej dikemas kini dengan penyertaan tambahan. Akhirnya, kami kembali benar untuk membiarkan proksi tahu bahawa semuanya berjalan lancar.
Sekarang, perangkap GET sedikit berbeza dari contoh sebelumnya.
Dapatkan: Fungsi (sasaran, prop) {
mesej.classlist.remove ('error');
jika (prop === 'sort') kembali [... sasaran] .sort ((a, b) => a - b);
jika (prop === 'sum') kembali [... sasaran] .reduce ((a, b) => ab);
jika (prop === 'purata') kembali [... sasaran] .reduce ((a, b) => ab) / target.length;
jika (prop === 'clear') {
Mesej.innertext = `$ {Target.Length} Nombor $ {Target.Length === 1?
sasaran.splice (0, target.length);
collection.innertext = sasaran;
}
kembali sasaran [prop];
},Apa yang berlaku di sini ialah "prop" bukan kaedah array biasa; Sebagai contoh, "prop" pertama dicetuskan oleh pendengar acara ini:
datasort.addeventListener ('klik', () => {
message.innertext = number.sort;
});Oleh itu, apabila butang Susun diklik, innertext dari elemen mesej akan dikemas kini menggunakan kandungan yang dikembalikan oleh Number.sort. Ia bertindak sebagai proksi memintas dan mengembalikan getters untuk hasil yang berkaitan dengan array atipikal.
Selepas memadam keadaan kesilapan yang berpotensi bagi elemen mesej, kami kemudian menentukan sama ada operasi pengambilan array yang tidak standard dijangka berlaku. Setiap operasi mengembalikan operasi pada data array asal tanpa mengubah array asal. Ini dilakukan dengan menggunakan pengendali lanjutan pada sasaran untuk membuat array baru dan kemudian menggunakan kaedah array standard. Setiap nama harus menyiratkan apa yang dilakukannya: Sort, Sum, Purata, dan Jelas. Nah, penjelasan bukan kaedah array standard, tetapi itu kedengarannya baik. Oleh kerana penyertaan boleh disusun dalam apa -apa perintah, kita boleh memberikannya dengan senarai yang disusun atau melaksanakan fungsi matematik pada penyertaan. Kosongkan hanya membersihkan array, seperti yang anda harapkan.
Berikut adalah pendengar acara lain untuk butang:
DataForm.AddEventListener ('submit', (e) => {
E.PreventDefault ();
nombor.push (number.parseInt (datainput.value));
});
datasubmit.addeventListener ('klik', () => {
nombor.push (number.parseInt (datainput.value));
});
datasort.addeventListener ('klik', () => {
message.innertext = number.sort;
});
datasum.addeventListener ('klik', () => {
message.innertext = number.sum;
});
dataAverage.addeventListener ('klik', () => {
message.innertext = number.average;
});
DataClear.AddeventListener ('klik', () => {
nombor.clear;
});Kami boleh melanjutkan dan menambah fungsi ke tatasusunan dalam beberapa cara. Saya telah melihat contoh array yang membolehkan pemilihan penyertaan dengan indeks negatif, yang dikira dari akhir. Cari penyertaan dalam pelbagai objek berdasarkan nilai atribut dalam objek. Kembalikan mesej dan bukannya tidak ditentukan apabila cuba mendapatkan nilai yang tidak wujud dalam array. Terdapat banyak idea untuk mengambil kesempatan dan meneroka proksi pada tatasusunan.
Borang alamat adalah perkara yang cukup standard di laman web. Mari tambahkan beberapa interaktiviti untuk pengesahan yang menyeronokkan (dan tidak standard). Ia juga boleh bertindak sebagai pengumpulan data untuk nilai borang dalam satu objek, yang boleh diminta atas permintaan.
Berikut adalah objek proksi:
model const = proksi baru (
{
Nama: '',
Alamat1: '',
Alamat2: '',
Bandar: '',
Negeri: '',
zip: '',
getData () {
kembali {
Nama: this.name ||.
alamat1: this.address1 ||.
Alamat2: this.address2 ||.
City: This.City ||.
Negeri: this.state ||.
Zip: this.zip ||.
};
}
},
{
Dapatkan: Fungsi (sasaran, prop) {
kembali sasaran [prop];
},
set: fungsi (sasaran, prop, nilai) {
sasaran [prop] = nilai;
jika (prop === 'zip' && value.length === 5) {
Ambil (`https://api.zippopotam.us/us/$ {value}`)
.then (response => response.json ())
.THEN (data => {
model.city = data.places [0] ['Nama tempat'];
document.QuerySelector ('[data-model = "City"]'). Value = target.city;
model.state = data.places [0] ['Singkatan Negeri'];
document.QuerySelector ('[data-model = "state"]'). value = target.state;
});
}
Document.QuerySelectorAll (`[data-model =" $ {prop} "]`) .foreach (item => {
jika (item.tagname === 'input' || item.tagname === 'pilih') {
item.value = nilai;
} else {
item.innertext = nilai;
}
})
kembali benar;
}
}
);Objek sasaran sangat mudah; Fungsi getData akan mengembalikan objek, tetapi jika nilai harta itu adalah rentetan kosong, ia akan berubah menjadi "tidak ada entri!"
Fungsi getter hanya melepasi kandungan seperti biasa. Anda mungkin tidak perlu melakukan ini, tetapi saya suka memasukkannya untuk menjadikannya lengkap.
Fungsi setter menetapkan nilai kepada prop. Walau bagaimanapun, jika memeriksa sama ada prop yang akan ditetapkan menjadi kod pos. Jika ya, maka kita periksa sama ada panjang nilai adalah 5. Apabila dinilai untuk benar, kami akan melaksanakan pengambilan yang menggunakan kod pos Pos Hit API Finder. Sebarang nilai yang dikembalikan dimasukkan ke dalam harta benda, input bandar, dan pilih keadaan dalam elemen pilih. Ini adalah contoh pintasan yang mudah yang membolehkan pengguna untuk mengelakkan diri daripada menaip nilai -nilai ini. Nilai -nilai ini boleh diubah secara manual jika diperlukan.
Untuk bahagian seterusnya, mari kita lihat contoh elemen input:
<code></code>
Proksi ini mempunyai QuerySelectorall yang mencari sebarang elemen dengan atribut data yang sepadan. Ini adalah sama dengan contoh rentetan terbalik yang kita lihat sebelum ini. Jika ia mendapati perlawanan, ia mengemas kini nilai input atau innertext elemen. Ini adalah bagaimana kad Rotary dikemas kini dalam masa nyata untuk menunjukkan penampilan alamat yang lengkap.
Satu perkara yang perlu diperhatikan ialah harta model data pada input. Nilai atribut data ini sebenarnya memaklumkan ejen kunci untuk mengunci semasa operasinya. Ejen itu melihat unsur -unsur yang terlibat berdasarkan kunci yang terlibat. Pendengar acara melakukan operasi yang sama dengan membiarkan proksi mengetahui kunci mana yang sedang digunakan. Inilah yang kelihatan seperti:
Document.QuerySelector ('Main'). AddEventListener ('input', (e) => {
model [e.target.dataset.model] = e.target.value;
});Oleh itu, semua input dalam elemen utama akan ditempatkan dan ejen akan dikemas kini apabila acara input dicetuskan. Nilai harta model data digunakan untuk menentukan kunci mana dalam proksi untuk mencari. Malah, kami menggunakan sistem model. Pertimbangkan bagaimana perkara seperti ini boleh digunakan lagi.
Bagi butang "Dapatkan Data"? Ia adalah log konsol mudah untuk fungsi getdata ...
getDatabtn.addeventListener ('klik', () => {
console.log (model.getData ());
});Ini adalah contoh yang menarik untuk membina dan menggunakan untuk meneroka konsep. Ini adalah contoh yang membuat saya berfikir tentang apa yang boleh saya bina dengan proksi JavaScript. Kadang -kadang anda hanya memerlukan widget kecil yang mempunyai beberapa keupayaan pengumpulan data/perlindungan dan dapat memanipulasi DOM dengan hanya berinteraksi dengan data. Ya, anda boleh menggunakan Vue atau bertindak balas, tetapi kadang -kadang mereka boleh terlalu rumit untuk sesuatu yang begitu mudah.
"Hanya itulah" bermaksud ia bergantung kepada setiap orang dan sama ada anda akan menggali lebih mendalam ke dalam proksi JavaScript. Seperti yang saya katakan pada permulaan artikel ini, saya hanya meliputi asas -asas ciri ini. Ia boleh memberikan lebih banyak ciri dan boleh menjadi lebih besar daripada contoh yang saya berikan. Dalam sesetengah kes, ia dapat menyediakan asas untuk program pembantu kecil untuk penyelesaian khusus. Adalah jelas bahawa contoh -contoh ini dapat dibuat dengan mudah menggunakan fungsi asas yang melaksanakan fungsi yang sama. Malah kebanyakan kod sampel saya bercampur dengan JavaScript biasa dengan objek proksi.
Walau bagaimanapun, perkara itu adalah untuk memberikan contoh menggunakan proksi untuk menunjukkan cara bertindak balas terhadap interaksi data -walaupun mengawal bagaimana untuk bertindak balas terhadap interaksi tersebut untuk melindungi data, mengesahkan data, memanipulasi DOM, dan mendapatkan data baru -semua berdasarkan seseorang yang cuba menyimpan atau mendapatkan data. Ini boleh menjadi sangat kuat dalam jangka masa panjang dan membolehkan penciptaan aplikasi mudah yang mungkin tidak memerlukan perpustakaan atau rangka kerja yang lebih besar.
Jadi, jika anda seorang pemaju front-end yang lebih tertumpu pada UI, seperti saya, anda boleh meneroka beberapa asas untuk melihat sama ada terdapat projek kecil yang mungkin mendapat manfaat daripada proksi JavaScript. Jika anda lebih banyak pemaju JavaScript, anda boleh mula menyelidiki lebih mendalam kepada ejen untuk projek yang lebih besar. Mungkin rangka kerja atau perpustakaan baru?
Hanya idea ...
Atas ialah kandungan terperinci Pengenalan kepada proksi JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
pangkalan data pemulihan MySQL
Apakah rangka kerja musim bunga?
Bagaimana untuk membuka kunci sekatan kebenaran android
Bahasa C untuk mencari gandaan sepunya terkecil
Apakah kelekitan pengguna
Apakah kod ruang dalam html
penggunaan arahan kepala
Tujuan peringkat
Apakah perbezaan utama antara linux dan windows
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
