Geekly articles weekly

Comment faire 200 à partir de deux lignes de code et pourquoi vous devez le faire

Bonjour à tous.


Je (nous, en tant qu'entreprise) finissons la plateforme du fournisseur, la plateforme est un plugin pour WordPress. Je ne connais le frontend, JS, HTML que dans la mesure où, par conséquent, les solutions ci - dessus peuvent ne pas être alphabétisées, mais l'essence de l'article n'est pas cela .


L'essentiel est de démontrer clairement pourquoi parfois au lieu de deux lignes de code, ce serait la bonne décision d'écrire deux cents.


Développeurs débutants et développeurs expérimentés pour qui une telle pensée semble douteuse, je demande sous cat.


Présentation


La lecture de l'article sans lire les commentaires dans le code n'a pas de sens, car les commentaires dans le code ne sont pas dupliqués dans le texte de l'article et le texte de l'article implique que le lecteur a lu les commentaires.


Défi


Il était nécessaire d'apporter des modifications à JS, je fais les modifications dans des fichiers séparés, afin que le moins possible "pollue" le code source du fournisseur de la plateforme, donc à l'avenir il sera plus facile d'adapter les mises à jour des sources de la plateforme.


Par conséquent, le code de la nouvelle fonctionnalité se trouve dans de nouveaux fichiers qui doivent être chargés sur la page.


Tâche: il est nécessaire de charger certains fichiers lors du chargement de la page.


La première crêpe est grumeleuse


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

(les lignes avec "+" sont de nouvelles lignes dans le code source)


La solution a été testée pour la page principale et cela a fonctionné là-bas, plus tard, il s'est avéré que pour les pages avec l'adresse example.com/about, la solution n'a pas fonctionné, car le navigateur essayait de charger example.com/about/e-cryptex.js et le navigateur a reçu une erreur 404 , car le fichier était vraiment à la racine - example.com/e-cryptex.js.


Deuxième option


J'ai regardé comment les développeurs de la plateforme s'accrochent à la page:


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

Les fichiers sont joints en utilisant la fonctionnalité WordPress - ok, faisons de même:


 // : -<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); +?>

(les lignes avec "+" sont de nouvelles lignes dans le code source, les lignes avec "-" sont des lignes supprimées du code source).


Vérifié - fonctionne, env.


Il y avait deux lignes - c'est devenu 12, toutes dans le même fichier.


Refactoring


J'ai regardé ce code et mon sens de la beauté s'est rebellé:


  • une personne qui ne connaît pas WordPress ne comprendra rien - vous devez aller dans le répertoire pour comprendre le but des fonctions wp_register_script () et wp_enqueue_script ()
  • évidemment la même chose se fait deux fois de suite, les arguments ne sont que différents - DRY est violé

Ok, refactor.


Premièrement, nous créons une classe (un fichier), et deuxièmement, nous connectons et utilisons la classe (nous changeons un autre fichier).


Faire de la classe


 +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); + } +}

Nous nous connectons et utilisons


 <?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); ?>

Il y avait 12 lignes de codes sources dans un fichier, il y en avait 35, et dans deux (soutenez-le plus tard, cherchez des troncs où corriger, afin de ne rien oublier, de ne pas manquer, de ne pas manquer).


Et refactoring à nouveau


Regardé le nouveau code:


  • quelques méthodes statiques
  • quelques constantes ...

semble maladroit! Je me souviens du conseil suivant: "si le constructeur n'a pas d'arguments, une telle classe est-elle nécessaire?"


Refaisons, mais une classe normale, avec un constructeur et des méthodes normaux.


Classe


 // : -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; + } +}

Utiliser


  <?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); ?>

Vous pouvez refaire le refactoring (la plate-forme fonctionne sur PHP 5.6 - j'adorerais définir les types partout, mais malheureusement vous ne pouvez pas, vous pouvez rendre la classe Configurator statique plus humaine, par exemple, initialiser à partir d'une liste de fichiers - ressources Web et méthode attachFiles statique), mais les choses idéales pour un monde idéal, nous vivons dans le réel, et il fait ses propres corrections - le temps passé sur la tâche - le travail sur la tâche est arrêté.


Total: il y avait 35 lignes dans la source dans deux fichiers, elle est devenue ~ 170, également dans deux fichiers.


Qu'avons-nous obtenu?


  1. Maintenant, vous n'avez plus besoin d'accéder à l'aide de WordPress pour comprendre le but des paramètres "fonctions".
  2. Nous avons maintenant un wrapper pour connecter les fichiers et nous pouvons changer sans peine l'algorithme de connexion des fichiers - nous n'aurons pas à modifier tous les appels à wp_register_script et wp_enqueue_script
  3. Maintenant, nous pouvons changer WordPress en n'importe quoi et seule la classe devra réécrire
    Registrar, pas besoin de remplacer tous les appels wp_register_script et wp_enqueue_script et de suivre la logique WordPress.

Cela en valait-il la peine?


Chacun a sa propre approche pour prendre en charge la base de code et sa propre opinion.


Ma réponse est oui.

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

More articles:


All Articles