hujung hadapan web
tutorial js
Pelajari corak reka bentuk JavaScript - kemahiran proksi pattern_javascript
Pelajari corak reka bentuk JavaScript - kemahiran proksi pattern_javascript
- Selebriti diwakili oleh pengurus. Jika anda meminta seorang selebriti mengadakan persembahan komersial, anda hanya boleh menghubungi ejennya Ejen itu akan merundingkan butiran dan imbuhan persembahan komersial, dan kemudian memberikan kontrak kepada selebriti untuk menandatangani.
1. Definisi
Corak proksi: Sediakan pengganti atau pemegang tempat untuk objek untuk mengawal akses kepadanya.
Ejen dibahagikan kepada: Ejen perlindungan dan ejen maya
Ejen perlindungan: digunakan untuk mengawal akses objek dengan kebenaran berbeza kepada objek sasaran Sukar untuk menilai siapa yang telah mengakses objek dalam JavaScript, jadi ejen perlindungan adalah sukar untuk melaksanakan.
2. Pramuat imej (senario aplikasi ejen maya yang paling biasa)
Pramuat imej ialah teknologi biasa Jika anda menetapkan atribut src secara langsung untuk nod teg img, kedudukan imej selalunya akan kosong untuk satu tempoh masa kerana imej terlalu besar atau rangkaian kurang. Pendekatan biasa ialah menggunakan imej memuatkan sebagai pemegang tempat terlebih dahulu, dan kemudian memuatkan imej secara tidak segerak Selepas imej dimuatkan, isikannya ke dalam nod img.
Prinsip pelaksanaan:
Cipta objek Imej: var a = new Image();
Tentukan src objek Imej: a.src = “xxx.gif”;
Melakukannya adalah sama dengan menyimpan imej untuk penyemak imbas.
Anda boleh menyemak sama ada imej dimuatkan melalui atribut lengkap objek Imej. Setiap objek Imej mempunyai atribut lengkap Apabila imej dalam proses pemuatan, nilai atribut adalah palsu Apabila mana-mana peristiwa onload, onerror dan onabort berlaku, ini bermakna proses pemuatan imej telah tamat. atribut lengkap adalah benar.
(1) Pelaksanaan bukan proksi
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
var img = new Image();
img.onload = function() {
imgNode.src = img.src;
};
return {
setSrc: function(src) {
imgNode.src = "./images/loading.gif";
img.src = src;
}
}
})();
myImage.setSrc("./images/originImg.png");
(2) Pelaksanaan proksi
// 创建图片DOM
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
imgNode.src = src;
}
};
})();
// 代理
var proxyImage = (function() {
var img = new Image();
img.onload = function() {
myImage.setSrc(this.src); // this指向img！img加载完成后，将img.src传递给myImage
};
return {
setSrc: function(src) {
myImage.setSrc("./images/loading.gif"); // loading
img.src = src;
}
};
})();
proxyImage.setSrc("./images/originImg.png");
Andaikan kita sedang melakukan fungsi penyegerakan fail Apabila kotak semak dipilih, fail yang sepadan akan disegerakkan ke pelayan lain.
<body>
<input type="checkbox" id="1" />文件1
<input type="checkbox" id="2" />文件2
<input type="checkbox" id="3" />文件3
<input type="checkbox" id="4" />文件4
<input type="checkbox" id="5" />文件5
<input type="checkbox" id="6" />文件6
</body>
Penyelesaian: Gunakan fungsi proksi untuk mengumpul permintaan dalam tempoh masa, dan kemudian menghantarnya ke pelayan sekaligus.
var synchronousFile = function(id) {
console.log("开始同步文件，id为：" + id);
};
var proxySynchonousFile = (function() {
var cache = [], // 保存本次需要同步文件的id
timer; // 定时器
return function(id) {
cache.push(id);
if(timer) {
// 不要覆盖已经启动的定时
return;
}
timer = setTimeout(function(){
synchronousFile(cache.join(","));
clearTimeout(timer);
timer = null;
cache.length = 0; // 清空缓存
}, 2000);
}
})();
var checkboxs = document.getElementsByTagName("input");
for(var i = 0, c; c = checkboxs[i]; i++) {
c.onclick = function() {
if(this.checked === true) {
proxySynchonousFile(this.id);
}
}
}
var mult = function() {
var result = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
result= result * arguments[i];
}
return result;
};
var proxyMult = (function() {
var cache = {}; // {"1,2,3": 6}
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = mult.apply(this, arguments);
}
})();
console.log(proxyMult(1, 2, 3));
// 改造：
var proxyFactory = function(fn) {
var cache = {};
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = fn.apply(this, arguments);
}
};
console.log(proxyFactory(mult)(1, 2, 3));
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Perbezaan antara corak reka bentuk dan corak seni bina dalam rangka kerja Java
Jun 02, 2024 pm 12:59 PM
Dalam rangka kerja Java, perbezaan antara corak reka bentuk dan corak seni bina ialah corak reka bentuk mentakrifkan penyelesaian abstrak kepada masalah biasa dalam reka bentuk perisian, memfokuskan pada interaksi antara kelas dan objek, seperti corak kilang. Corak seni bina mentakrifkan hubungan antara struktur sistem dan modul, memfokuskan pada organisasi dan interaksi komponen sistem, seperti seni bina berlapis.
Apakah kelebihan dan kekurangan mod proksi dalam rangka kerja java?
Jun 03, 2024 am 09:34 AM
Corak proksi ialah corak reka bentuk rangka kerja Java yang menjadi pengantara antara klien dan objek sasaran dengan mencipta objek proksi. Kelebihannya termasuk: melindungi objek sasaran, menyediakan integriti dan keselamatan data mengawal akses kepada sasaran, melaksanakan kawalan kebenaran dan langkah keselamatan, menambah fungsi tambahan seperti pengelogan, caching dan pengurusan urus niaga; matlamat. Walau bagaimanapun, corak proksi juga mempunyai kelemahan: Overhed: Mencipta dan menyelenggara objek proksi boleh mengurangkan prestasi Kerumitan: Memerlukan pemahaman yang mendalam tentang corak reka bentuk terhad, yang mungkin tidak sesuai dalam beberapa kes;
Penggunaan indah corak penyesuai dalam corak reka bentuk Java
May 09, 2024 pm 12:54 PM
Corak Penyesuai ialah corak reka bentuk struktur yang membolehkan objek yang tidak serasi berfungsi bersama Ia menukar satu antara muka kepada yang lain supaya objek boleh berinteraksi dengan lancar. Penyesuai objek melaksanakan corak penyesuai dengan mencipta objek penyesuai yang mengandungi objek yang disesuaikan dan melaksanakan antara muka sasaran. Dalam kes praktikal, melalui mod penyesuai, pelanggan (seperti MediaPlayer) boleh memainkan media format lanjutan (seperti VLC), walaupun ia sendiri hanya menyokong format media biasa (seperti MP3).
Analisis Corak Penghias dalam Corak Reka Bentuk Java
May 09, 2024 pm 03:12 PM
Corak penghias ialah corak reka bentuk struktur yang membolehkan penambahan dinamik fungsi objek tanpa mengubahsuai kelas asal. Ia dilaksanakan melalui kerjasama komponen abstrak, komponen konkrit, penghias abstrak dan penghias konkrit, dan boleh mengembangkan fungsi kelas secara fleksibel untuk memenuhi keperluan yang berubah-ubah. Dalam contoh ini, penghias susu dan mocha ditambahkan pada Espresso untuk jumlah harga $2.29, menunjukkan kuasa corak penghias dalam mengubah suai gelagat objek secara dinamik.
Analisis kes praktikal corak reka bentuk PHP
May 08, 2024 am 08:09 AM
1. Corak kilang: Asingkan penciptaan objek dan logik perniagaan, dan cipta objek jenis tertentu melalui kelas kilang. 2. Corak pemerhati: membenarkan objek subjek memberitahu objek pemerhati tentang perubahan keadaan mereka, mencapai gandingan longgar dan corak pemerhati.
Apakah kelebihan dan kekurangan menggunakan corak reka bentuk dalam rangka kerja java?
Jun 01, 2024 pm 02:13 PM
Kelebihan menggunakan corak reka bentuk dalam rangka kerja Java termasuk: kebolehbacaan kod yang dipertingkatkan, kebolehselenggaraan dan kebolehskalaan. Kelemahan termasuk kerumitan, overhed prestasi dan keluk pembelajaran yang curam akibat penggunaan berlebihan. Kes praktikal: Mod proksi digunakan untuk malas memuatkan objek. Gunakan corak reka bentuk dengan bijak untuk memanfaatkan kelebihannya dan meminimumkan kelemahannya.
Bagaimana corak reka bentuk menangani cabaran penyelenggaraan kod
May 09, 2024 pm 12:45 PM
Corak reka bentuk menyelesaikan cabaran penyelenggaraan kod dengan menyediakan penyelesaian yang boleh digunakan semula dan boleh diperluas: Corak Pemerhati: Membenarkan objek melanggan acara dan menerima pemberitahuan apabila ia berlaku. Corak Kilang: Menyediakan cara terpusat untuk mencipta objek tanpa bergantung pada kelas konkrit. Corak Singleton: memastikan bahawa kelas hanya mempunyai satu contoh, yang digunakan untuk mencipta objek yang boleh diakses secara global.
Aplikasi corak reka bentuk dalam rangka kerja Guice
Jun 02, 2024 pm 10:49 PM
Rangka kerja Guice menggunakan beberapa corak reka bentuk, termasuk: Corak Singleton: memastikan kelas hanya mempunyai satu tika melalui anotasi @Singleton. Corak kaedah kilang: Cipta kaedah kilang melalui anotasi @Provides dan dapatkan contoh objek semasa suntikan pergantungan. Mod strategi: Bungkus algoritma ke dalam kelas strategi yang berbeza dan nyatakan strategi khusus melalui anotasi @Named.
