How to make 200 lines from two lines of code, and why do you need to do that

Hello.

I (we as a company) finish the platform from the supplier, the platform is a plugin for WordPress. I am familiar with the frontend, JS, HTML only insofar as, therefore, the given solutions may not be literate, but this is not the essence of the article .

The point is to show clearly why sometimes instead of two lines of code, it would be the right decision to write two hundred.

Beginner developers, and developers with experience for which such a thought looks dubious, please under the cat.

Introduction

Reading the article without reading the comments in the code does not make sense, because the comments of the code are not duplicated in the text of the article and the text of the article implies that the reader has read the comments.

Task

It was necessary to make changes to JS, I make changes to separate files in order to "pollute" the source code of the platform provider as little as possible, so in the future it will be easier to adapt updates to the source code of the platform.

Accordingly, the code of the new functionality is in the new files that need to be uploaded on the page.

Task: it is required when loading the page to load certain files.

First damn lump

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

(lines with "+" are new lines in the source code)

The solution was tested for the main page and it worked there, it later turned out that for the pages with the example.com/about address, the solution did not work, because the browser tried to load example.com/about/e-cryptex.js and the browser received - error 404 , because the file really lay in the root - example.com/e-cryptex.js.

Second option

I looked at how the developers of the platform cling to the page:

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

Files are attached using WordPress functionality - ok, let's do the same:

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

(lines with "+" are new lines in the source code, lines with "-" are lines deleted from the source code).

Checked - works, ok.

There were two lines - it was 12, all within the same file.

Refactoring

I looked at this code, and my sense of beauty rebelled:

• a person not familiar with WordPress will not understand anything - you will have to go into the directory to understand the purpose of the functions wp_register_script () and wp_enqueue_script ()
• obviously the same thing is done twice in a row, the arguments are just different - DRY is broken

Ok, refactor.

First, we make a class (one file), and second, we connect the class and use it (we change another file).

Making a class

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

We connect and use

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

There were 12 lines of source in one file was 35, and in two (support it later, look for rysch where else to correct, whatever you forget, not to miss, not to miss).

And again refactoring

Looked at the new code:

• what static methods
• what are the constants ...

looks clumsy! I remember this advice: "if the constructor has no arguments, is such a class necessary?"

Let's redo it, but a normal class, with a normal constructor and methods.

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

Using

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

You can do refactoring again (the platform works on PHP 5.6 - I would like to place types everywhere, but unfortunately it’s impossible, you can make the static class Configurator more human, for example, initialize from the list of files - web resources and the attachFiles method do not static), but ideal things for an ideal world, we live in a real world, and this makes its own corrections - time is spent on the task - work on the task is stopped.

Total: there were 35 lines in source codes in two files, it became ~ 170, also in two files.

What did we get?

1. Now it is not necessary to go into Help WordPress ʻa, to understand the purpose of the parameters of "functions".
2. Now we have a wrapper for connecting files and we can painfully change the file connection algorithm - we don’t have to edit all wp_register_script and wp_enqueue_script calls
3. Now we can change WordPress to anything and only have to rewrite the class
   Registrar, it is not necessary to replace all wp_register_script and wp_enqueue_script calls and follow the logic of WordPress.

Is it worth it?

Everyone has their own approach to the support of the code base and their opinion.

My answer is yes.