Viele beliebte Bibliotheken und Frameworks verwenden Plug-in-Systeme wie WordPress, JQuery, Gatsby, Elegy und Vue. Das Plug-in-System erm?glicht es Entwicklern, Funktionen auf sichere und skalierbare Weise hinzuzufügen, wodurch der Wert von Kernprojekten verbessert und Gemeinden aufgebaut und die Wartungsbelastungen reduziert werden. In diesem Artikel wird sein Designkonzept erl?utert, indem ein JavaScript-Plug-in-System erstellt wird.

Wir werden ein Beispiel für einen einfachen JavaScript -Taschenrechner namens Betacalc nehmen, mit dem Ziel, dass anderen Entwicklern eine "Taste" -Funktion hinzuzufügen.

Erstrechner -Code:

 // Taschenrechner const Betacalc = {
    CurrentValue: 0,,

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

    Plus (Addend) {
        this.setValue (this.currentValue Addend);
    },

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

// Taschenrechner betacalc.setValue (3) verwenden; // => 3
Betacalc.plus (3); // => 6
Betacalc.minus (2); // => 4

Dieser Taschenrechner hat eine begrenzte Funktionalit?t und kann nur Ergebnisse über console.log anzeigen. Als n?chstes werden wir das Plugin -System hinzufügen.

Das einfachste Plug-in-System:

Wir erstellen zun?chst eine register , mit der Entwickler Plugins registrieren k?nnen. Diese Methode nimmt das Plugin an, erh?lt seine exec -Funktion und h?ngt als neue Methode an den Taschenrechner an:

 // Taschenrechner const Betacalc = {
    // ... Andere Taschenrechner -Coderegister (Plugin) {
        const {name, exec} = plugin;
        Dieser [Name] = exec;
    }
};

Ein Beispiel für ein einfaches "Quadrat" -Button -Plugin:

 // Definieren Sie das Plugin const quaredplugin = {{
    Name: 'Quadrat',
    exec: function () {
        this.setValue (this.currentValue * this.currentValue);
    }
};

// Plugin -Plugin betacalc.register (quadriertplugin);

Plugins enthalten normalerweise zwei Teile: Code und Metadaten (Name, Beschreibung, Versionsnummer, Abh?ngigkeiten usw.). In diesem Beispiel enth?lt die exec -Funktion Code und name ist Metadaten. Nach der Registrierung ist exec -Funktion als Methode direkt an betaCalc -Objekt angeh?ngt.

Jetzt hat Betacalc eine neue "quadratische" Taste:

 betacalc.setValue (3); // => 3
Betacalc.Plus (2); // => 5
Betacalc.Squared (); // => 25
Betacalc.Squared (); // => 625

Diese Methode ist einfach und einfach zu bedienen, und das Plug-In kann einfach über NPM verteilt und importiert werden. Es gibt aber auch Fehler: Das Plugin greift direkt auf this in betaCalc auf, hat die Erlaubnis, alle Code zu lesen und zu schreiben, und verst??t gegen das Prinzip des ?ffnens und Schlie?ens. Darüber hinaus wirkt die squared Funktion durch Nebenwirkungen und ist nicht ideal.

Verbesserte Plug-in-Architektur:

Um diese Probleme zu l?sen, verbessern wir die Plug-in-Architektur:

 // Taschenrechner const Betacalc = {
    CurrentValue: 0,,

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

    Kern: {
        'Plus': (CurrentVal, Addend) => CurrentVal Addend,
        'minus': (currentVal, subtrahend) => currentVal - subtrahend
    },

    Plugins: {},

    Drücken Sie (TasteName, Newval) {
        const func = this.core [buttonName] || this.plugins [buttonName];
        this.setValue (func (this.currentValue, newval));
    },

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

// Plugin const quadedplugin = {
    Name: 'Quadrat',
    Exec: Funktion (currentValue) {
        Return CurrentValue * currentValue;
    }
};

Betacalc.register (Squaredplugin);

// Taschenrechner betacalc.setValue (3) verwenden; // => 3
betacalc.press ('plus', 2); // => 5
Betacalc.press ('Squared'); // => 25
Betacalc.press ('Squared'); // => 625

Verbesserungen:

1. Trennen Sie das Plugin von der Kernmethode und speichern Sie es im plugins -Objekt, um die Sicherheit zu verbessern.
2. Verwenden Sie die press , um Funktionen zu finden und sie mit Namen aufzurufen, Schaltfl?chen in reine Funktionen umzuwandeln, die API zu vereinfachen, bequeme Tests zu testen und die Kopplung zu reduzieren.

Diese Architektur ist begrenzter, aber sicherer und zuverl?ssiger. Es kann zu streng sein und die Funktionalit?tserweiterung des Plugins einschr?nken. Die Berechtigungen von Plug-in-Autoren müssen sorgf?ltig abgewogen werden, was nicht nur die Stabilit?t des Projekts gew?hrleistet, sondern es auch erm?glicht, Probleme zu l?sen.

Weitere Verbesserungen:

Es kann weiter verbessert werden: Fügen Sie Fehlerbehandlungen hinzu, erweitern Sie Plug-in-Funktionen (z. B. Rückrufe des Registrierungslebenszyklus, Speicherstatus usw.) und verbessern Sie den Plug-in-Registrierungsmechanismus (unterstützt die Stapelregistrierung, Konfigurationseinstellungen usw.).

Zusammenfassen:

Das Erstellen eines hervorragenden Plug-in-Systems ist nicht einfach und erfordert eine sorgf?ltige Berücksichtigung verschiedener Faktoren. Nur durch Bezugnahme auf das Plug-in-System vorhandener Projekte (z. B. JQuery, Gatsby usw.) und JavaScript-Designmuster sowie die folgenden Prinzipien der Softwareentwicklung (wie offene und heruntergekommene Prinzipien, lose Kopplung, Dimitter-Regeln, Abh?ngigkeitsinjektion) k?nnen wir ein Plug-in-System erstellen, das alle Benutzeranforderungen langfristig entspricht. Ein gutes Plug-in-System kann den Wohlstand der Entwicklergemeinschaft f?rdern und eine Win-Win-Situation erreichen.

Das obige ist der detaillierte Inhalt vonEntwerfen eines JavaScript -Plugin -Systems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!