Merancang Sistem Plugin JavaScript

Banyak perpustakaan dan rangka kerja yang popular menggunakan sistem pemalam seperti WordPress, JQuery, Gatsby, Eleventy, dan Vue. Sistem pemalam membolehkan pemaju menambah ciri-ciri dengan cara yang selamat dan berskala, meningkatkan nilai projek teras dan komuniti bangunan sambil mengurangkan beban penyelenggaraan. Artikel ini akan menerangkan konsep reka bentuknya dengan membina sistem pemalam JavaScript.

Kami akan mengambil contoh kalkulator JavaScript yang mudah dipanggil Betacalc, dengan matlamat membolehkan pemaju lain menambah ciri "butang" kepadanya.

Kod kalkulator awal:

 // kalkulator const betacalc = {
    CurrentValue: 0,

    setValue (newValue) {
        this.currentValue = newValue;
        console.log (this.currentValue);
    },

    ditambah (addend) {
        this.setValue (this.currentValue addend);
    },

    tolak (subtrahend) {
        this.setValue (this.currentValue - subtrahend);
    }
};

// Gunakan kalkulator betacalc.setValue (3); // => 3
betacalc.plus (3); // => 6
betacalc.minus (2); // => 4

Kalkulator ini mempunyai fungsi terhad dan hanya boleh memaparkan hasil melalui console.log . Seterusnya, kami akan menambah sistem plugin.

Sistem pemalam yang paling mudah:

Kami mula -mula membuat kaedah register yang membolehkan pemaju mendaftarkan plugin. Kaedah ini mengambil plugin, mendapat fungsi exec , dan melampirkannya ke kalkulator sebagai kaedah baru:

 // kalkulator const betacalc = {
    // ... daftar kod kalkulator lain (plugin) {
        const {name, exec} = plugin;
        Ini [nama] = exec;
    }
};

Contoh plugin butang "persegi" yang mudah:

 // Tentukan plugin const squaredplugin = {
    Nama: 'Squared',
    exec: function () {
        this.setValue (this.currentValue * this.currentValue);
    }
};

// Daftar plugin betacalc.register (squaredplugin);

Plugin biasanya mengandungi dua bahagian: kod dan metadata (nama, keterangan, nombor versi, kebergantungan, dll.). Dalam contoh ini, fungsi exec mengandungi kod dan name adalah metadata. Selepas pendaftaran, fungsi exec dilampirkan secara langsung ke objek betaCalc sebagai kaedah.

Sekarang, Betacalc mempunyai butang "kuadrat" baru:

 Betacalc.SetValue (3); // => 3
betacalc.plus (2); // => 5
betacalc.squared (); // => 25
betacalc.squared (); // => 625

Kaedah ini mudah dan mudah digunakan, dan plug-in boleh diedarkan dengan mudah dan diimport melalui NPM. Tetapi ia juga mempunyai kelemahan: plugin secara langsung this di betaCalc , mempunyai kebenaran untuk membaca dan menulis semua kod, dan melanggar prinsip pembukaan dan penutupan. Di samping itu, fungsi squared berfungsi melalui kesan sampingan dan tidak sesuai.

Seni bina pemalam yang lebih baik:

Untuk menyelesaikan masalah ini, kami meningkatkan seni bina pemalam:

 // kalkulator const betacalc = {
    CurrentValue: 0,

    setValue (nilai) {
        this.currentValue = value;
        console.log (this.currentValue);
    },

    teras: {
        'ditambah': (currentval, addend) => currentval addend,
        'tolak': (currentval, subtrahend) => currentval - subtrahend
    },

    Plugin: {},,

    tekan (ButtonName, NewVal) {
        const func = this.core [ButtonName] || this.plugins [ButtonName];
        this.setValue (func (this.currentValue, newVal));
    },

    daftar (plugin) {
        const {name, exec} = plugin;
        this.plugins [name] = exec;
    }
};

// plugin const squaredplugin = {
    Nama: 'Squared',
    EXEC: Fungsi (CurrentValue) {
        kembali CurrentValue * CurrentValue;
    }
};

betacalc.register (squaredplugin);

// Gunakan kalkulator betacalc.setValue (3); // => 3
betacalc.press ('plus', 2); // => 5
betacalc.press ('squared'); // => 25
betacalc.press ('squared'); // => 625

Penambahbaikan:

1. Pisahkan plugin dari kaedah teras dan simpannya dalam objek plugins untuk meningkatkan keselamatan.
2. Gunakan kaedah press untuk mencari fungsi dan panggil mereka dengan nama, tukar butang ke dalam fungsi tulen, memudahkan API, ujian mudah, dan pengurangan gandingan.

Senibina ini lebih terhad, tetapi lebih selamat dan lebih dipercayai. Ia mungkin terlalu ketat, mengehadkan lanjutan fungsi plugin. Kebenaran penulis plug-in perlu ditimbang dengan teliti, yang bukan sahaja memastikan kestabilan projek, tetapi juga membolehkan mereka menyelesaikan masalah.

Penambahbaikan selanjutnya:

Ia boleh diperbaiki lagi: Tambah pengendalian ralat, lanjutkan fungsi pemalam (seperti panggilan balik kitaran hayat pendaftaran, status penyimpanan, dan lain-lain), dan meningkatkan mekanisme pendaftaran plug-in (menyokong pendaftaran batch, tetapan konfigurasi, dll.).

Meringkaskan:

Membina sistem pemalam yang sangat baik tidak mudah, dan memerlukan pertimbangan yang teliti terhadap pelbagai faktor. Hanya dengan merujuk kepada sistem pemalam projek sedia ada (seperti jQuery, Gatsby, dan lain-lain) dan corak reka bentuk JavaScript, dan mengikuti prinsip pembangunan perisian (seperti prinsip terbuka dan penutupan, gandingan longgar, peraturan dimitter, suntikan pergantungan), bolehkah kita membina sistem pemalam yang memenuhi semua keperluan pengguna dalam jangka panjang. Sistem pemalam yang baik boleh menggalakkan kemakmuran komuniti pemaju dan mencapai keadaan menang-menang.

Atas ialah kandungan terperinci Merancang Sistem Plugin JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!