Geekly articles weekly

Cara membuat 200 dari dua baris kode, dan mengapa Anda perlu melakukan ini

Halo semuanya.


Saya (kami, sebagai perusahaan) menyelesaikan platform dari pemasok, platform adalah plugin untuk WordPress. Saya kenal dengan frontend, JS, HTML hanya sejauh, oleh karena itu, solusi di atas mungkin tidak terpelajar, tetapi esensi dari artikel ini bukan itu .


Intinya adalah untuk menunjukkan dengan jelas mengapa kadang-kadang alih-alih dua baris kode, itu adalah keputusan yang tepat untuk menulis dua ratus.


Pengembang awal, dan pengembang dengan pengalaman yang pemikiran seperti itu tampaknya diragukan, saya bertanya di bawah kucing.


Pendahuluan


Membaca artikel tanpa membaca komentar dalam kode tidak masuk akal, karena komentar dalam kode tidak digandakan dalam teks artikel dan teks artikel menyiratkan bahwa pembaca telah membaca komentar.


Tantangan


Itu perlu untuk membuat perubahan pada JS, saya membuat perubahan dalam file terpisah, sehingga sesedikit mungkin "mencemari" kode sumber penyedia platform, sehingga di masa depan akan lebih mudah untuk mengadaptasi pembaruan dari sumber platform.


Dengan demikian, kode fungsi baru ada di file baru yang perlu dimuat di halaman.


Tugas: diperlukan untuk memuat file tertentu saat memuat halaman.


Pancake pertama kental


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

(baris dengan "+" adalah baris baru dalam kode sumber)


Solusinya diuji untuk halaman utama dan berfungsi di sana, kemudian ternyata untuk halaman dengan alamat example.com/about, solusinya tidak berfungsi, karena browser sedang mencoba memuat example.com/about/e-cryptex.js dan browser menerima kesalahan 404 , karena file tersebut benar-benar di root - example.com/e-cryptex.js.


Opsi kedua


Saya melihat bagaimana pengembang platform menempel pada halaman:


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

File dilampirkan menggunakan fungsionalitas WordPress - ok, mari kita lakukan hal yang sama:


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

(baris dengan "+" adalah baris baru dalam kode sumber, baris dengan "-" adalah baris yang dihapus dari kode sumber).


Diperiksa - berfungsi, kira-kira.


Ada dua baris - menjadi 12, semua dalam file yang sama.


Refactoring


Saya melihat kode ini, dan indera kecantikan saya memberontak:


  • seseorang yang tidak terbiasa dengan WordPress tidak akan mengerti apa pun - Anda harus masuk ke direktori untuk memahami tujuan fungsi wp_register_script () dan wp_enqueue_script ()
  • jelas hal yang sama dilakukan dua kali berturut-turut, argumennya hanya berbeda - KERING dilanggar

Ok, refactor.


Pertama, kami membuat kelas (satu file), dan kedua, kami menghubungkan dan menggunakan kelas (kami mengubah file lain).


Buat kelas


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

Kami terhubung dan menggunakan


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

Ada 12 baris kode sumber dalam satu file, ada 35, dan di dua (mendukungnya nanti, cari batang di mana lagi untuk memperbaikinya, agar tidak melupakan apa pun, tidak ketinggalan, tidak ketinggalan).


Dan refactoring lagi


Melihat kode baru:


  • beberapa metode statis
  • beberapa konstanta ...

terlihat canggung! Saya ingat saran berikut: "jika konstruktor tidak memiliki argumen, apakah kelas seperti itu diperlukan?"


Mari kita membuat ulang, tetapi kelas normal, dengan konstruktor dan metode normal.


Kelas


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

Gunakan


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

Anda dapat melakukan refactoring lagi (platform berjalan pada PHP 5.6 - Saya ingin mengatur jenisnya di mana-mana, tetapi sayangnya Anda tidak bisa, Anda dapat membuat kelas statis Configurator lebih manusiawi, misalnya, menginisialisasi dari daftar file - sumber daya web dan metode attachFiles statis), tetapi hal-hal ideal untuk dunia ideal, kita hidup di dunia nyata, dan itu membuat koreksi sendiri - waktu yang dihabiskan untuk tugas tersebut - mengerjakan tugas dihentikan.


Total: ada 35 baris dalam sumber dalam dua file, menjadi ~ 170, juga dalam dua file.


Apa yang kita dapatkan?


  1. Sekarang Anda tidak perlu masuk ke bantuan WordPress untuk memahami tujuan dari parameter "fungsi".
  2. Sekarang kami memiliki pembungkus untuk menghubungkan file dan kami tanpa kesulitan dapat mengubah algoritma untuk menghubungkan file - kami tidak perlu mengedit semua panggilan ke wp_register_script dan wp_enqueue_script
  3. Sekarang kita dapat mengubah WordPress menjadi apa saja dan hanya kelas yang harus menulis ulang
    Registrar, tidak perlu mengganti semua panggilan wp_register_script dan wp_enqueue_script dan ikuti logika WordPress.

Apakah itu sepadan?


Masing-masing memiliki pendekatan sendiri untuk mendukung basis kode dan pendapatnya sendiri.


Jawaban saya adalah ya.

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

More articles:


All Articles