Geekly articles weekly

Wie man aus zwei Codezeilen 200 macht und warum Sie dies tun müssen

Hallo an alle.


Ich (wir als Unternehmen) beende die Plattform vom Lieferanten, die Plattform ist ein Plugin für WordPress. Ich kenne das Frontend, JS, HTML nur insoweit, als die oben genannten Lösungen möglicherweise nicht lesen und schreiben können, aber das Wesentliche des Artikels ist nicht das .


Die Quintessenz soll klar zeigen, warum es manchmal die richtige Entscheidung wäre, anstelle von zwei Codezeilen zweihundert zu schreiben.


Anfängliche Entwickler und Entwickler mit Erfahrung, für die ein solcher Gedanke zweifelhaft erscheint, frage ich unter Katze.


Einführung


Das Lesen des Artikels ohne Lesen der Kommentare im Code ist nicht sinnvoll, da die Kommentare im Code nicht im Text des Artikels dupliziert werden und der Text des Artikels impliziert, dass der Leser die Kommentare gelesen hat.


Herausforderung


Es war notwendig, Änderungen an JS vorzunehmen. Ich nehme die Änderungen in separaten Dateien vor, damit der Quellcode des Plattformanbieters so wenig wie möglich "verschmutzt" wird, sodass es in Zukunft einfacher sein wird, die Aktualisierungen der Plattformquellen anzupassen.


Dementsprechend befindet sich der Code der neuen Funktionalität in neuen Dateien, die auf die Seite geladen werden müssen.


Aufgabe: Beim Laden der Seite müssen bestimmte Dateien geladen werden.


Der erste Pfannkuchen ist klumpig


+<script src="e-cryptex.js"></script> +<script src="wp-content/themes/tol-child/js/child_realforex.js"></script>

(Zeilen mit "+" sind neue Zeilen im Quellcode)


Die Lösung wurde für die Hauptseite getestet und funktionierte dort. Später stellte sich heraus, dass die Lösung für Seiten mit der Adresse example.com/about nicht funktionierte, da der Browser versuchte, example.com/about/e-cryptex.js zu laden, und der Browser einen Fehler 404 erhielt , weil sich die Datei wirklich im Stammverzeichnis befand - example.com/e-cryptex.js.


Zweite Option


Ich habe mir angesehen, wie die Plattformentwickler an der Seite festhalten:


 wp_register_script(FILE-ID,FILE-PATH); wp_enqueue_script(FILE-ID);

Dateien werden mit der WordPress-Funktionalität angehängt - ok, machen wir dasselbe:


 // : -<script src="e-cryptex.js"></script> -<script src="wp-content/themes/tol-child/js/child_realforex.js"></script> //  : +<?php +const E_CRYPTEX_JS ='e-cryptex_js'; +wp_register_script(E_CRYPTEX_JS,'/e-cryptex.js',array(),null); +wp_enqueue_script(E_CRYPTEX_JS); +const CHILD_REALFOREX_JS = 'child_realforex_js'; +wp_register_script( + CHILD_REALFOREX_JS, + '/wp-content/themes/tol-child/js/child_realforex.js', + array(E_CRYPTEX_JS), + null); +wp_enqueue_script(CHILD_REALFOREX_JS); +?>

(Zeilen mit "+" sind neue Zeilen im Quellcode, Zeilen mit "-" sind Zeilen, die aus dem Quellcode gelöscht wurden).


Überprüft - funktioniert, ca.


Es gab zwei Zeilen - es wurden 12, alle in derselben Datei.


Refactoring


Ich sah mir diesen Code an und mein Sinn für Schönheit rebellierte:


  • Eine Person, die nicht mit WordPress vertraut ist, wird nichts verstehen - Sie müssen in das Verzeichnis gehen, um den Zweck der Funktionen wp_register_script () und wp_enqueue_script () zu verstehen
  • Offensichtlich wird dasselbe zweimal hintereinander gemacht, die Argumente sind nur unterschiedlich - DRY wird verletzt

Ok, Refactor.


Erstens erstellen wir eine Klasse (eine Datei) und zweitens verbinden wir die Klasse und verwenden sie (wir ändern eine andere Datei).


Klasse machen


 +class Migesco { + + const SCRIPT = 'script'; + const SOURCE = 'source'; + const DEPENDENCY = 'dependency'; + //   ,      'configuration.js', //     ""   . + static function attachConfigurationJS(){ + $configurationFiles = array( + array(Migesco::SCRIPT => 'configuration.js', + Migesco::SOURCE=>'/configuration.js')); + Migesco::includeScriptFiles($configurationFiles); + } //              + static function includeScriptFiles($scriptFiles){ + foreach ($scriptFiles as $scriptFile){ + $dependency = array_key_exists(self::DEPENDENCY,$scriptFiles) + ? $scriptFile[self::DEPENDENCY] + : array(); + self::includeScript($scriptFile[self::SCRIPT],$scriptFile[self::SOURCE],$dependency); + } + } //    , //    "",     // (     ) + static function includeScript($id,$source,$dependency){ + wp_register_script($id,$source,$dependency,null); + wp_enqueue_script($id); + } +}

Wir verbinden und nutzen


 <?php //: -const E_CRYPTEX_JS ='e-cryptex_js'; -wp_register_script(E_CRYPTEX_JS,'/e-cryptex.js',array(),null); -wp_enqueue_script(E_CRYPTEX_JS); -const CHILD_REALFOREX_JS = 'child_realforex_js'; -wp_register_script( - CHILD_REALFOREX_JS, - '/wp-content/themes/tol-child/js/child_realforex.js', - array(E_CRYPTEX_JS), - null); -wp_enqueue_script(CHILD_REALFOREX_JS); // : //  +require_once(ABSPATH . 'configuration.php'); //  +const ECRYPTEX_JS = 'cryptex'; +const TRADEROOM_SCRIPT_FILES = array( + array(Migesco::SCRIPT => ECRYPTEX_JS, + Migesco::SOURCE=>'/e-cryptex.js'), + array(Migesco::SCRIPT => 'child_realforex', + Migesco::SOURCE=>'/wp-content/themes/tol-child/js/child_realforex.js', + Migesco::DEPENDENCY =>ECRYPTEX_JS) +); +Migesco::includeScriptFiles(TRADEROOM_SCRIPT_FILES); ?>

Es gab 12 Zeilen mit Quellcodes in einer Datei, es gab 35 und in zwei (unterstützen Sie es später, suchen Sie nach Amtsleitungen, die Sie sonst reparieren können, um nichts zu vergessen, nicht zu verpassen, nicht zu verpassen).


Und wieder umgestalten


Sah den neuen Code an:


  • einige statische Methoden
  • einige Konstanten ...

sieht ungeschickt aus! Ich erinnere mich an den folgenden Rat: "Wenn der Konstruktor keine Argumente hat, wird eine solche Klasse benötigt?"


Lassen Sie uns neu erstellen, aber eine normale Klasse mit einem normalen Konstruktor und Methoden.


Klasse


 // : -class Migesco { - - const SCRIPT = 'script'; - const SOURCE = 'source'; - const DEPENDENCY = 'dependency'; - - static function attachConfigurationJS(){ - $configurationFiles = array( - array(Migesco::SCRIPT => 'configuration.js', - Migesco::SOURCE=>'/configuration.js')); - Migesco::includeScriptFiles($configurationFiles); - } - static function includeScriptFiles($scriptFiles){ - foreach ($scriptFiles as $scriptFile){ - $dependency = array_key_exists(self::DEPENDENCY,$scriptFiles) - ? $scriptFile[self::DEPENDENCY] - : array(); - self::includeScript($scriptFile[self::SCRIPT],$scriptFile[self::SOURCE],$dependency); - } - } - static function includeScript($id,$source,$dependency){ - wp_register_script($id,$source,$dependency,null); - wp_enqueue_script($id); - } -} //: //      : //   //   //    //       +namespace Migesco; + + //      html- +class Configurator +{ //               + static function attachConfigurationJS() + { + $configurationFiles = array( + (new WebResource('configuration.js'))->setSource('/configuration.js')); + self::attachFiles($configurationFiles); + } + //      html- + static function attachFiles($resourceList) + { + (new Registrar($resourceList))->toRegistrate(); + } +} + //      html- +class Registrar +{ //     + public $list = array(); //     private (   ) + /** @var WebResource $resource */ + public $resource = null; + + public function __construct($list) + { + $isArray = is_array($list); + if ($isArray) { + $this->list = $list; + } + } + //      WordPress + function registerScript() + { + wp_register_script( + $this->resource->getName(), + $this->resource->getSource(), + $this->resource->getDependency(), + null); + } + //     + function enqueueScript() + { + wp_enqueue_script($this->resource->getName()); + } + //      + function toRegistrate() + { + $result = false; + foreach ($this->list as $resource) { + /** @var WebResource $resource */ + $isResource = $resource instanceof WebResource; + if ($isResource) { + $this->resource = $resource; + $this->registerScript(); + $this->enqueueScript(); + + $result = true; + } + } + return $result; + } +} + //     +class WebResource +{ //    + public $source = ''; //   + public $name = ''; //   + public $dependency = array(); + + public function __construct($name) + { + $this->setName($name); + } + + /** + * @param string $source + * @return WebResource + */ + public function setSource($source) + { + $this->source = strval($source); + return $this; + } + + /** + * @param string $name + * @return WebResource + */ + public function setName($name) + { + $this->name = strval($name); + return $this; + } + + /** + * @param array $dependency + * @return WebResource + */ + public function setDependency($dependency) + { + $isArray = is_array($dependency); + if ($isArray) { + $this->dependency = $dependency; + } + return $this; + } + + /** + * @return string + */ + public function getSource() + { + return $this->source; + } + + /** + * @return string + */ + public function getName() + { + return $this->name; + } + + /** + * @return array + */ + public function getDependency() + { + return $this->dependency; + } +}

Verwenden Sie


  <?php // : -const TRADEROOM_SCRIPT_FILES = array( - array(Migesco::SCRIPT => ECRYPTEX_JS, - Migesco::SOURCE=>'/e-cryptex.js'), - array(Migesco::SCRIPT => 'child_realforex', - Migesco::SOURCE=>'/wp-content/themes/tol-child/js/child_realforex.js', - Migesco::DEPENDENCY =>ECRYPTEX_JS) -); -Migesco::includeScriptFiles(TRADEROOM_SCRIPT_FILES); // : +$traderoomScriptFiles = array( + (new Migesco\WebResource(ECRYPTEX_JS)) + ->setSource('/e-cryptex.js'), + (new Migesco\WebResource('child_realforex')) + ->setSource('/wp-content/themes/tol-child/js/child_realforex.js') + ->setDependency(array(ECRYPTEX_JS)) +); +Migesco\Configurator::attachFiles($traderoomScriptFiles); ?>

Sie können das Refactoring erneut durchführen (die Plattform läuft unter PHP 5.6 - Ich würde die Typen gerne überall festlegen, aber leider nicht. Sie können die statische Konfiguratorklasse menschlicher gestalten, z. B. anhand einer Liste von Dateien initialisieren - Webressourcen und die Methode attachFiles statisch), aber die idealen Dinge für eine ideale Welt, wir leben in der Realität, und es nimmt seine eigenen Korrekturen vor - die Zeit, die für die Aufgabe aufgewendet wird - die Arbeit an der Aufgabe wird gestoppt.


Insgesamt: Es gab 35 Zeilen in der Quelle in zwei Dateien, es wurde ~ 170, auch in zwei Dateien.


Was haben wir bekommen?


  1. Jetzt müssen Sie nicht mehr in die WordPress-Hilfe gehen, um den Zweck der "Funktions" -Parameter zu verstehen.
  2. Jetzt haben wir einen Wrapper zum Verbinden von Dateien und können den Algorithmus zum Verbinden von Dateien problemlos ändern. Wir müssen nicht alle Aufrufe von wp_register_script und wp_enqueue_script bearbeiten
  3. Jetzt können wir WordPress in alles ändern und nur die Klasse muss neu schreiben
    Registrar, es ist nicht erforderlich, alle Aufrufe von wp_register_script und wp_enqueue_script zu ersetzen und der WordPress-Logik zu folgen.

War es das wert?


Jeder hat seinen eigenen Ansatz zur Unterstützung der Codebasis und seine eigene Meinung.


Meine Antwort lautet ja.

Source: https://habr.com/ru/post/de435216/

More articles:


All Articles