Entwerfen eines JavaScript -Plugin -Systems

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!