Saat ini, semua kerangka kerja modular, dan bahkan javascript front-end tidak terkecuali. Setiap modul bertanggung jawab untuk fungsi tertentu, dan ada saling ketergantungan antar modul. Jadi pertanyaannya adalah: bagaimana mengimplementasikan injeksi ketergantungan di JavaScript? (Injeksi ketergantungan Javascript, kerangka kerja besar memiliki implementasi yang sesuai, hanya ide implementasi yang dipelajari di sini)
Persyaratan berikut:
Asumsikan bahwa sudah ada koleksi nilai kunci modul layanan yang ditentukan, FUNC adalah layanan baru yang ditambahkan, dan daftar parameter adalah ketergantungan layanan.
Salinan kode adalah sebagai berikut:
var services = {ABC: 123, DEF: 456, GHI: 789}; // Asumsikan bahwa beberapa layanan didefinisikan
Layanan Fungsi (ABC, GHI) {
this.write = function () {
Console.log (ABC);
Console.log (GHI);
}
}
Function Activitor (func) {
var obj;
// menyelesaikan
kembalikan obj;
}
Larutan:
Melalui beberapa mekanisme (refleksi?), Keluarkan daftar parameter yang ditentukan oleh fungsi dan tetapkan nilai satu per satu. Kemudian, melalui beberapa mekanisme (aktivitor?), FUNC dipakai.
Larutan:
1. Dapatkan daftar parameter FUNC:
Bagaimana cara mendapatkan daftar parameter? Hal pertama yang terlintas dalam pikiran adalah mekanisme refleksi. Jadi apakah ada refleksi dalam JavaScript? Seharusnya ada di sana. Saya hanya tahu cara menggunakan fungsi eval (STR) saat ini, tetapi tampaknya tidak ada implementasi yang relevan untuk mendapatkan daftar parameter. Mari kita lihat definisi func. Argumen. Properti ini hanya valid saat memanggil fungsi dan parameter yang lewat, dan tidak dapat memenuhi kebutuhan.
Jadi bisakah kita mendapatkan daftar parameter dengan memproses string setelah func.toString ()?
Ayo coba:
Salinan kode adalah sebagai berikut:
function getFuncparams (func) {
var moothes = func.toString (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m);
if (cocok && matches.length> 1)
return matches [1] .replace (// s*/, '') .split (',');
kembali [];
};
Di sini kita mendapatkan array daftar parameter func.
2. Temukan dependensi berdasarkan daftar parameter:
Setelah mendapatkan daftar parameter, yaitu, daftar ketergantungan diperoleh. Sangat mudah untuk meneruskan ketergantungan ke dalamnya sebagai parameter.
Salinan kode adalah sebagai berikut:
var params = getFuncparams (func);
untuk (var i di params) {
params [i] = layanan [params [i]];
}
3. Lewati parameter ketergantungan dan instantiate mereka:
Kita tahu bahwa JavaScript memiliki func. Constructor, yang memiliki dua fungsi: call (thisarg, [arg [, arg, [arg, [...]]]]) dan berlaku (thisarg, args ...) dan dapat mengimplementasikan operasi fungsi instantiasi. Parameter pertama dari fungsi panggilan adalah penunjuk ini, dan sisanya adalah daftar parameter. Ini cocok untuk digunakan ketika daftar parameter FUNC diketahui dan tidak dapat memenuhi kebutuhan saya. Mari kita lihat fungsi Apply kedua. Parameter pertama juga pointer ini, dan parameter kedua adalah array parameter. Ketika dipanggil, itu akan secara otomatis menetapkan nilai ke daftar parameter FUNC satu per satu, yang hanya memenuhi kebutuhan saya.
Kode ini kira -kira sebagai berikut:
Salinan kode adalah sebagai berikut:
Function Activitor (func) {
var obj = {};
func.Apply (obj, params);
kembalikan obj;
}
Pada titik ini, kita dapat membuat instance dari fungsi ini dan melewati parameter yang diperlukan oleh fungsi ini.
4. Cetak dan uji:
Kode Lengkap:
Salinan kode adalah sebagai berikut:
var
// Asumsikan bahwa beberapa layanan didefinisikan
services = {ABC: 123, DEF: 456, GHI: 789},
// Dapatkan Daftar Parameter FUNC (Daftar Ketergantungan)
getFuncparams = function (func) {
var moothes = func.toString (). match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m);
if (cocok && matches.length> 1)
return matches [1] .replace (// s+/, '') .split (',');
kembali [];
},
// Isi parameter (dependensi) menurut daftar parameter (dependensi)
setFuncparams = function (params) {
untuk (var i di params) {
params [i] = layanan [params [i]];
}
mengembalikan params;
};
// Activator
Function Activitor (func) {
var obj = {};
func.Apply (OBJ, setFuncparams (getFuncparams (func)));
kembalikan obj;
}
// Tentukan layanan baru
Layanan Fungsi (ABC, GHI) {
this.write = function () {
Console.log (ABC);
Console.log (GHI);
}
}
// instantiate layanan dan hubungi metode
VAR Service = Activator (Layanan);
service.write ();
Konsol itu berhasil dicetak!