Como criar 200 a partir de duas linhas de código e por que você precisa fazer isso

Olá pessoal.

Eu (nós, como empresa) finalizamos a plataforma do fornecedor, a plataforma é um plugin para WordPress. Eu estou familiarizado com o frontend, JS, HTML, apenas na medida em que, portanto, as soluções acima podem não ser alfabetizadas, mas a essência do artigo não é essa .

O ponto principal é demonstrar claramente por que, às vezes, em vez de duas linhas de código, seria a decisão correta escrever duzentas.

Desenvolvedores iniciantes e desenvolvedores com experiência para quem esse pensamento parece duvidoso, pergunto em cat.

1. Introdução

Ler o artigo sem ler os comentários no código não faz sentido, porque os comentários no código não são duplicados no texto do artigo e o texto do artigo implica que o leitor tenha lido os comentários.

Desafio

Foi necessário fazer alterações no JS, faço as alterações em arquivos separados, para que o menos possível "polua" o código fonte do provedor da plataforma, para que no futuro seja mais fácil adaptar as atualizações da fonte da plataforma.

Assim, o código da nova funcionalidade está em novos arquivos que precisam ser carregados na página.

Tarefa: é necessário carregar determinados arquivos ao carregar a página.

A primeira panqueca é irregular

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

(as linhas com "+" são novas linhas no código fonte)

A solução foi testada para a página principal e funcionou lá; posteriormente, para as páginas com o endereço example.com/about, a solução não funcionou, porque o navegador estava tentando carregar example.com/about/e-cryptex.js e o navegador recebeu um erro 404 , porque o arquivo realmente estava na raiz - example.com/e-cryptex.js.

Segunda opção

Eu observei como os desenvolvedores da plataforma se apegam à página:

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

Os arquivos são anexados usando a funcionalidade do WordPress - ok, vamos fazer o mesmo:

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

(linhas com "+" são novas linhas no código fonte, linhas com "-" são linhas excluídas do código fonte).

Verificado - funciona, aprox.

Havia duas linhas - eram 12, todas no mesmo arquivo.

Refatoração

Eu olhei para esse código e meu senso de beleza se rebelou:

• uma pessoa que não esteja familiarizada com o WordPress não entenderá nada - você deve entrar no diretório para entender o objetivo das funções wp_register_script () e wp_enqueue_script ()
• obviamente a mesma coisa é feita duas vezes seguidas, os argumentos são apenas diferentes - DRY é violado

Ok, refatorar.

Primeiro, criamos uma classe (um arquivo) e, em segundo lugar, conectamos e usamos a classe (alteramos outro arquivo).

Faça aula

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

Nós conectamos e usamos

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

Havia 12 linhas de códigos-fonte em um arquivo, havia 35 e em dois (suporte posteriormente, procure troncos onde mais consertar, para não esquecer nada, não perder, não perder).

E refatorando novamente

Olhou para o novo código:

• alguns métodos estáticos
• algumas constantes ...

parece desajeitado! Lembro-me do seguinte conselho: "se o construtor não possui argumentos, essa classe é necessária?"

Vamos refazer, mas uma classe normal, com um construtor e métodos normais.

Class

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

Use

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

Você pode refatorar novamente (a plataforma roda no PHP 5.6 - eu adoraria definir os tipos em todos os lugares, mas infelizmente não é possível, você pode tornar a classe estática do Configurator mais humana, por exemplo, inicialize a partir de uma lista de arquivos - recursos da Web e o método attachFiles estático), mas as coisas ideais para um mundo ideal, vivemos no real, e ele faz suas próprias correções - o tempo gasto na tarefa - o trabalho na tarefa é interrompido.

Total: havia 35 linhas na fonte em dois arquivos, tornou-se ~ 170, também em dois arquivos.

O que conseguimos?

1. Agora você não precisa acessar a ajuda do WordPress para entender a finalidade dos parâmetros "funções".
2. Agora temos um invólucro para conectar arquivos e podemos alterar sem problemas o algoritmo para conectar arquivos - não precisamos editar todas as chamadas para wp_register_script e wp_enqueue_script
3. Agora podemos mudar o WordPress para qualquer coisa e apenas a classe terá que reescrever
   Registrador, não há necessidade de substituir todas as chamadas wp_register_script e wp_enqueue_script e seguir a lógica do WordPress.

Valeu a pena?

Cada um tem sua própria abordagem para apoiar a base de código e sua própria opinião.

Minha resposta é sim.