🚜 🤽🏻 📴 कोड की दो लाइनों से 200 कैसे बनाएं, और आपको ऐसा करने की आवश्यकता क्यों है 👇🏼 🎻 🎌

सभी को नमस्कार।

मैं (हम, एक कंपनी के रूप में) आपूर्तिकर्ता से मंच को समाप्त करते हैं, मंच वर्डप्रेस के लिए एक प्लगइन है। मैं फ्रंटएंड, जेएस, एचटीएमएल से केवल परिचित हूं, इसलिए, उपरोक्त समाधान साक्षर नहीं हो सकते हैं, लेकिन लेख का सार यह नहीं है ।

निचला रेखा स्पष्ट रूप से प्रदर्शित करना है कि कभी-कभी कोड की दो पंक्तियों के बजाय, दो सौ लिखने का सही निर्णय क्यों होगा।

शुरुआती डेवलपर्स, और ऐसे अनुभव वाले डेवलपर्स जिनके लिए ऐसा विचार संदिग्ध लगता है, मैं बिल्ली के नीचे पूछता हूं।

परिचय

कोड में टिप्पणियों को पढ़े बिना लेख को पढ़ना समझ में नहीं आता है, क्योंकि लेख के पाठ में कोड में टिप्पणियों की नकल नहीं की गई है और लेख के पाठ का अर्थ है कि पाठक ने टिप्पणियों को पढ़ा है।

कार्य

जेएस में परिवर्तन करना आवश्यक था, मैं अलग-अलग फाइलों में बदलाव करता हूं, ताकि मंच प्रदाता के स्रोत कोड को "प्रदूषण" जितना संभव हो सके, इसलिए भविष्य में मंच के स्रोतों के अपडेट को अनुकूलित करना आसान होगा।

तदनुसार, नई कार्यक्षमता का कोड नई फ़ाइलों में है जिन्हें पृष्ठ पर लोड करने की आवश्यकता है।

कार्य: पृष्ठ लोड करते समय कुछ फ़ाइलों को लोड करना आवश्यक है।

पहला पैनकेक गांठदार है

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

(स्रोत कोड में "+" वाली लाइनें नई लाइनें हैं)

मुख्य पृष्ठ के लिए समाधान का परीक्षण किया गया था और इसने वहां काम किया, बाद में यह पता चला कि example.com/about पते वाले पृष्ठों के लिए, समाधान काम नहीं करता था, क्योंकि ब्राउज़र उदाहरण लोड करने का प्रयास कर रहा था। , क्योंकि फ़ाइल वास्तव में रूट पर थी - example.com/e-cryptex.js।

दूसरा विकल्प

मैंने देखा कि कैसे प्लेटफ़ॉर्म डेवलपर्स पेज से चिपके रहते हैं:

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

वर्डप्रेस कार्यक्षमता का उपयोग करके फाइलें जुड़ी हुई हैं - ठीक है, चलो ऐसा ही करते हैं:

 // : -<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 हो गई, सभी एक ही फाइल के भीतर।

रिफैक्टरिंग

मैंने इस कोड को देखा, और मेरी सुंदरता की भावना विद्रोही हो गई:

एक व्यक्ति जो वर्डप्रेस से परिचित नहीं है वह कुछ भी नहीं समझेगा - आपको 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 पर चलता है - मुझे हर जगह प्रकार सेट करना पसंद है, लेकिन दुर्भाग्य से आप नहीं कर सकते, आप स्थैतिक विन्यासकर्ता वर्ग को और अधिक मानव बना सकते हैं, उदाहरण के लिए, फ़ाइलों की सूची से आरंभ करें - वेब संसाधन और संलग्नक विधि स्थैतिक), लेकिन एक आदर्श दुनिया के लिए आदर्श चीजें, हम वास्तविक में रहते हैं, और यह अपना सुधार करता है - कार्य पर खर्च किया गया समय - कार्य पर काम बंद कर दिया जाता है।

कुल: दो फ़ाइलों में स्रोत में 35 लाइनें थीं, यह ~ 170 बन गई, दो फ़ाइलों में भी।

हमें क्या मिला?

अब आपको "फ़ंक्शंस" पैरामीटर के उद्देश्य को समझने के लिए वर्डप्रेस मदद में नहीं जाना होगा।
अब हमारे पास फ़ाइलों को जोड़ने के लिए एक आवरण है और हम फ़ाइलों को जोड़ने के लिए एल्गोरिथ्म को दर्दरहित रूप से बदल सकते हैं - हमें wp_register_script और wp_enqueue_script के लिए सभी कॉल संपादित करने की आवश्यकता नहीं है
अब हम वर्डप्रेस को कुछ भी बदल सकते हैं और केवल कक्षा को फिर से लिखना होगा
रजिस्ट्रार, सभी कॉलों को wp_register_script और wp_enqueue_script को बदलने और वर्डप्रेस तर्क का पालन करने की आवश्यकता नहीं है।

क्या यह इसके लायक था?

प्रत्येक के पास कोड आधार और अपनी राय का समर्थन करने के लिए अपना दृष्टिकोण है।

मेरा जवाब है हां।

कोड की दो लाइनों से 200 कैसे बनाएं, और आपको ऐसा करने की आवश्यकता क्यों है