كيفية جعل 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.

هل كان يستحق كل هذا العناء؟

لكل منها منهجها الخاص لدعم قاعدة الكود والرأي الخاص بها.

جوابي نعم.