如何从两行代码中获得200,以及为什么需要这样做

大家好


我(作为一家公司)从供应商那里完成了该平台,该平台是WordPress的插件。 我只在前端熟悉JS,HTML,因此, 上述解决方案可能并不识字,但本文的本质并非如此


底线是清楚地说明为什么有时编写两百篇而不是两行代码是正确的决定。


我开始问起初来的开发人员,以及对这种想法似乎有疑问的经验的开发人员。


引言


阅读文章而不阅读代码中的注释是没有意义的,因为代码中的注释不会在文章的文本中重复,并且文章的文本意味着读者已阅读了注释。


挑战赛


有必要对JS进行更改,我在单独的文件中进行更改,以便尽可能少地“污染”平台提供者的源代码,因此将来更容易适应平台源代码的更新。


因此,新功能的代码位于需要在页面上加载的新文件中。


任务:加载页面时需要加载某些文件。


第一块煎饼块状


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

(带有“ +”号的行是源代码中的新行)


该解决方案已针对主页进行了测试,并且可以在其中使用,后来发现,对于包含example.com/about地址的页面,该解决方案不起作用,因为浏览器正在尝试加载example.com/about/e-cryptex.js,并且浏览器收到错误404 ,因为该文件实际上位于根目录-example.com/e-cryptex.js。


第二选择


我研究了平台开发人员如何紧贴该页面:


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

使用WordPress功能附加文件-好的,让我们做同样的事情:


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

(带有“ +”的行是源代码中的新行,带有“-”的行是从源代码中删除的行)。


已检查-正常工作。


有两行-变为12行,所有行都在同一文件中。


重构


我看了一下这段代码,我的美丽反叛了:


  • 一个不熟悉WordPress的人不会了解任何内容-您必须进入目录才能了解wp_register_script()和wp_enqueue_script()函数的用途
  • 显然,同一件事连续两次完成,参数只是不同-违反了DRY

好,重构。


首先,我们创建一个类(一个文件),其次,我们连接并使用该类(我们更改另一个文件)。


上课


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

连接并使用


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

在一个文件中有12行源代码,在35个文件中有两行(稍后提供支持,请在其他地方查找要修复的主干,以免遗忘,不要错过,不要错过)。


并再次重构


看了一下新代码:


  • 一些静态方法
  • 一些常数...

看起来笨拙! 我回想起以下建议:“如果构造函数没有参数,是否需要这样的类?”


让我们用普通的构造函数和方法重做一个普通的类。


班级


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

使用方法


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

您可以再次进行重构(该平台在PHP 5.6上运行-我很乐意在各处设置类型,但是不幸的是,您不能使静态Configurator类更加人性化,例如,从文件列表(网络资源和attachFiles方法)进行初始化静态),但理想世界中的理想事物,我们生活在真实世界中,它会做出自己的修正-花费在任务上的时间-停止在任务上的工作。


总计:在两个文件中的源代码中有35行,在两个文件中也变为〜170。


我们得到了什么?


  1. 现在,您无需进入WordPress帮助即可了解“功能”参数的用途。
  2. 现在我们有了一个用于连接文件的包装器,并且可以轻松地更改用于连接文件的算法-我们将不必编辑对wp_register_script和wp_enqueue_script的所有调用
  3. 现在,我们可以将WordPress更改为任何内容,并且只需要重写该类
    注册商,无需替换对wp_register_script和wp_enqueue_script的所有调用,并遵循WordPress逻辑。

值得吗?


每个人都有自己的方法来支持代码库和自己的意见。


我的回答是。

Source: https://habr.com/ru/post/zh-CN435216/


All Articles