Pemahaman mendalam tentang siri JavaScript (31): Penjelasan terperinci tentang corak proksi corak reka bentuk_kemahiran javascript

Pengenalan

Ejen, seperti namanya, adalah untuk membantu orang lain melakukan sesuatu, GoF mentakrifkan model agensi seperti berikut:

Mod proksi (Proksi) menyediakan proksi untuk objek lain untuk mengawal akses kepada objek ini.

Corak proksi membolehkan objek proksi mengawal rujukan kepada objek tertentu. Proksi boleh menjadi hampir semua objek: fail, sumber, objek dalam ingatan atau sesuatu yang sukar untuk disalin.

Teks

Mari kita berikan contoh mudah Jika Dudu ingin menghantar bunga ros kepada gadis yogurt itu, tetapi dia tidak tahu maklumat hubungannya atau malu, dan ingin memberi kepercayaan kepada seorang pakcik untuk menghantar bunga ros ini, maka pakcik itu akan menjadi seorang ejen (sebenarnya agak bagus) , anda boleh memotong beberapa bunga untuk menantu anda), kemudian bagaimana kita harus melakukannya?

Salin kod Kod adalah seperti berikut:

// Isytiharkan objek kecantikan dahulu
var girl = fungsi (nama) {
This.name = nama;
};

// Ini dudu
var dudu = fungsi (perempuan) {
This.girl = perempuan;
This.sendGift = fungsi (hadiah) {
alert("Hai " girl.name ", dudu memberi anda hadiah: " hadiah);
}
};

//Pakcik ialah ejen
var proxyTom = fungsi (perempuan) {
This.girl = perempuan;
This.sendGift = fungsi (hadiah) {
(dudu(gadis) baru).sendGift(hadiah); // Hantar bunga kepada dudu
}
};

Kaedah panggilan sangat mudah:

Salin kod Kod adalah seperti berikut:

var proxy = new proxyTom(new girl("Yoghurt Girl"));
proxy.sendGift("999 mawar");

Pertempuran praktikal

Melalui kod di atas, saya percaya semua orang sangat jelas tentang mod proksi: Kami mempunyai senarai main yang mudah dan perlu memaparkan muzik video di bawah pautan apabila mengklik pada satu pautan (atau memilih semua). Butang pengenalan dan main Apabila anda mengklik butang main, video akan dimainkan

Salin kod Kod adalah seperti berikut:

vids Dave Matthews

Pilih semua/pemilihan songsang

1. Gravedigger


2. Simpan Saya
> ;

3. Crush


4. Jangan Minum Air


5. Lucu Caranya< ;/li>
   
6. Apa Yang Anda Katakan
   

Mari kita menganalisisnya terlebih dahulu, kita bukan sahaja perlu memantau peristiwa klik sambungan, tetapi juga memantau peristiwa klik "pilih semua/pemilihan songsang". Maklumat HTML dan memaparkannya pada kedudukan terakhir elemen li, kesannya adalah seperti berikut:

Kemudian pantau acara klik sambungan main, dan mula bermain selepas mengklik Kesannya adalah seperti berikut:

Baiklah, mari mulakan, tanpa jQuery, mari sesuaikan pemilih:

Salin kod Kod adalah seperti berikut:

var $ = fungsi (id) {
Kembalikan document.getElementById(id);
};

Memandangkan perkhidmatan json Yahoo menyediakan parameter panggil balik, kami menghantar panggilan balik tersuai kami untuk menerima data Kod pemasangan rentetan pertanyaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

var http = {
MakeRequest: fungsi (id, panggil balik) {
      var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'pilih * daripada music.video.id di mana id IN ("%ID%")',
format = "format=json",
             pengendali = "panggilan balik=" panggil balik,
              skrip = document.createElement('skrip');

sql = sql.replace('%ID%', ids.join('","'));
               sql = encodeURIComponent(sql);

url = pengendali format '&' sql '&';
               script.src = url;

document.body.appendChild(skrip);
}
};

Objek proksi adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

var proksi = {
id: [],
kelewatan: 50,
Tamat masa: batal,
panggil balik: null,
konteks: null,
//Tetapkan id permintaan dan panggil balik untuk mencetuskan panggilan balik semasa main balik
MakeRequest: fungsi (id, panggil balik, konteks) {

// Tambahkan pada baris gilir dd pada baris gilir
This.ids.push(id);

this.callback = panggil balik;
This.context = context;

// Tetapkan tamat masa
Jika (!this.timeout) {
This.timeout = setTimeout(function () {
                 proksi.flush();
             }, this.delay);
}
},
// Cetuskan permintaan dan hubungi http.makeRequest
menggunakan tanggungjawab proksi siram: fungsi () {
// proxy.handler ialah panggilan balik
apabila meminta yahoo            http.makeRequest(this.ids, 'proxy.handler');
                              // Selepas meminta data, laksanakan kaedah proxy.handler (ada set panggilan balik lain)
                             
//Kosongkan tamat masa dan baris gilir
This.timeout = null;
This.ids = [];

},
Pengendali: fungsi (data) {
var i, maks;

// Panggilan balik untuk satu video
If (parseInt(data.query.count, 10) === 1) {
              proxy.callback.call(proxy.context, data.query.results.Video);
             kembali;
}

// Panggilan balik untuk berbilang video
untuk (i = 0, maks = data.query.results.Video.length; i              proxy.callback.call(proxy.context, data.query.results.Video[i]);
}
}
};

Modul pemprosesan video terutamanya mempunyai tiga sub-fungsi: mendapatkan maklumat, memaparkan maklumat dan memainkan video:

Salin kod Kod adalah seperti berikut:

var video = {
    // 初始化播放器代码，开始播放
    getPlayer: fungsi (id) {
        kembalikan ''
            ''
            ''
            ''
            ''
            '             'height="255" '
            'width="400" '
            'id="uvp_fop" '
            'allowFullScreen="true" '
            'src="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" '
            'type="application/x-shockwave-flash" '
            'flashvars="id=v' id '&eID=1301797&lang=us&ympsc=4195329&enableFullScreen=1&shareEnable=1"'
            '/>'
            '';
                },
    // 拼接信息显示内容，然后在append到li的底部里显示
    senarai kemas kini: fungsi (data) {
        id var,
            html = '',
            maklumat;

        jika (data.query) {
            data = data.query.results.Video;
        }
        id = data.id;
        html = '';
        html = '

' data.title '

';
        html = '

' data.copyrightTahun ', ' data.label '

';
        jika (data.Album) {
            html = '

Album: ' data.Album.Release.title ', ' data.Album.Release.releaseYear '
';
        }
        html = '

» main

';
        info = document.createElement('div');
        info.id = "info" id;
        info.innerHTML = html;
        $('v' id).appendChild(info);
    },
    // 获取信息并显示
    getInfo: fungsi (id) {
        var info = $('info' id);

        jika (!info) {
            proxy.makeRequest(id, videos.updateList, videos); //执行代理职责，并传入videos.updateList回调函数
            kembali;
        }

jika (info.style.display === "tiada") {
                   info.style.display = '';
         } lain {
                  info.style.display = 'tiada';
}
}
};

Kini kami boleh memproses kod untuk acara klik Memandangkan terdapat banyak sambungan A, jika setiap sambungan mengikat acara, jelas akan ada masalah prestasi, jadi kami mengikat acara itu pada elemen

klik adalah sambungan, jika ya, ini bermakna kita mengklik pada alamat video, dan kemudian kita boleh memainkannya:
Salin kod Kod adalah seperti berikut:

$('vids').onclick = fungsi (e) {
var src, id;

e = e || window.event;
src = e.target ||. e.srcElement;

// Jika ia tidak disambungkan, proses tidak akan diteruskan
Jika (src.nodeName.toUpperCase() !== "A") {
         kembali;
}
//Berhenti menggelegak
Jika (jenis e.preventDefault === "fungsi") {
         e.preventDefault();
}
e.returnValue = palsu;

id = src.href.split('--')[1];

//Jika anda klik pada mainan pautan bagi kawasan maklumat video yang telah dihasilkan, mulakan main
// Kemudian kembali tidak diteruskan
Jika (src.className === "main") {
src.parentNode.innerHTML = videos.getPlayer(id);
         kembali;
}
                             
src.parentNode.id = "v" id;
Videos.getInfo(id); // Ini ialah kod pemprosesan untuk memaparkan maklumat video apabila diklik buat kali pertama
};


Kod untuk memilih semua dan menyongsangkan pemilihan adalah serupa, jadi kami tidak akan menerangkannya:

Salin kod Kod adalah seperti berikut:

$('togol-semua').onclick = fungsi (e) {

var href, i, maks, id;

href = $('vids').getElementsByTagName('a');
untuk (i = 0, maks = hrefs.length; i //Abaikan sambungan main
Jika (hrefs[i].className === "main") {
                 teruskan;
}
​​​​ //Abaikan item yang tidak dipilih
Jika (!hrefs[i].parentNode.firstChild.checked) {
                 teruskan;
}

id = href[i].href.split('--')[1];
hrefs[i].parentNode.id = "v" id;
videos.getInfo(id);
}
};


Ringkasan

Mod proksi biasanya sesuai untuk situasi berikut:

1. Proksi jauh adalah untuk menyediakan perwakilan setempat untuk objek dalam ruang alamat yang berbeza Ini boleh menyembunyikan fakta bahawa objek wujud dalam ruang alamat yang berbeza, sama seperti kelas proksi dalam perkhidmatan web.
2. Proksi maya, cipta objek mahal seperti yang diperlukan, dan gunakannya untuk menyimpan objek sebenar yang mengambil masa yang lama untuk membuat seketika. ialah, melalui proksi maya Daripada imej sebenar, ejen maya menyimpan laluan dan saiz imej sebenar
. 3. Proksi keselamatan digunakan untuk mengawal kebenaran apabila mengakses objek sebenar Ia biasanya digunakan untuk objek yang sepatutnya mempunyai kebenaran akses yang berbeza.
4. Bimbingan pintar, hanya apabila objek sebenar dipanggil, ejen mengendalikan perkara lain. Sebagai contoh, dalam pengumpulan sampah dalam C#, apabila objek digunakan, akan terdapat kiraan rujukan Jika objek tidak lagi dirujuk, GC boleh mengitar semulanya.

Rujukan: "Corak Rekaan Dahua"