जेडपीएचपीपी का परिचय

वेब डेवलपर # 17 के लिए दिलचस्प और उपयोगी चीजों के लेखक के सुझाव पर, मैंने अपने लेख का परिचय जेडीपीएचपी से परिचय कराया ।



दर्जनों टेम्पलेट इंजन हैं। सबसे प्रसिद्ध में से स्मार्ट, ट्विग (ड्रुपल के अगले संस्करण में प्रयुक्त), ब्लेड (लारावेल में डिफ़ॉल्ट रूप से उपयोग किया जाता है) और, ज़ाहिर है, वेनिला PHP। PHP के बारे में विशेष रूप से बोलते हुए, रूबी / रूबी और जावास्क्रिप्ट के लिए eRuby / ERB और Haml के लिए कई लोकप्रिय विकल्प हैं, जैसे कि मूंछें , हैंडलबार्स , होगन और EJS । कुछ में मामूली वाक्यविन्यास अंतर हैं, जबकि अन्य में अधिक स्पष्ट अंतर हैं।



जेड टेम्पलेट इंजन, जो दूसरों से महत्वपूर्ण रूप से भिन्न होता है, आमतौर पर जावास्क्रिप्ट अनुप्रयोगों से जुड़ा होता है, उदाहरण के लिए, यह एक्सप्रेस फॉर नोड्स .js. इस लेख में, मैं जेड के बारे में बात करूंगा या, विशेष रूप से, PHP के लिए जेड के बारे में - जेडएडपीपीपी ।

हमल और जेड

हेम का उल्लेख किए बिना जेड के बारे में बात करना गलत होगा, जो जेड के लिए एक प्रेरणादायक विचार था। और वास्तव में, PHP में Haml का समर्थन करने के लिए कई पुस्तकालय हैं । जेड एचएएमएल के रूप में एक ही दर्शन का पालन करता है, अर्थात्, "सुंदर" टेम्पलेट्स का निर्माण और लेखक हाइकू को अस्थायी कहते हैं। जो कुछ भी इसका मतलब है, हेमल और जेड में कुछ समान गुण हैं जो उन्हें मूल रूप से अधिकांश अन्य टेम्पलेट इंजनों से अलग करते हैं।

अंतर क्या है?

अधिकांश टेम्पलेट इंजनों को प्लेसहोल्डर के "कार्यान्वयन" और उसमें मुख्य तर्क के साथ अंतिम मार्कअप लिखने की आवश्यकता होती है। जेड के पास न केवल प्लेसहोल्डर और तर्क हैं, बल्कि एक्सएमएल जैसे तत्वों के लेखन को छोटा करने का एक तरीका भी है। सामान्य तौर पर, इसका मतलब HTML है, हालांकि आप इसे आरएसएस और एक्सएमएल के लिए ही उपयोग कर सकते हैं।



संक्षेप में, यदि आप चाहें, तो आप अपनी "पारंपरिक" टेम्पलेट क्षमताओं के बिना HTML के लिए जेड के रूप में शॉर्टकट का उपयोग कर सकते हैं।

रिपॉजिटरी का उपयोग कैसे करें

दुर्भाग्य से, इस समय, कोड संगीतकार के माध्यम से उपलब्ध नहीं है , हालांकि किसी को एक और घंटे होने पर इसे पैक करना मुश्किल नहीं है। लेकिन आप इसे रिपॉजिटरी को क्लोन करके और autoload.php.dist



सक्षम करके चला सकते हैं (Github रिपॉजिटरी में सिम्फनी से UniversalClassLoader



शामिल है)।



नीचे, README परियोजना से एक अनुकूलित उदाहरण। यह माना जाता है कि रिपॉजिटरी को jade



डायरेक्टरी में रखा गया है।

 use Everzet\Jade\Dumper\PHPDumper, Everzet\Jade\Visitor\AutotagsVisitor, Everzet\Jade\Filter\JavaScriptFilter, Everzet\Jade\Filter\CDATAFilter, Everzet\Jade\Filter\PHPFilter, Everzet\Jade\Filter\CSSFilter, Everzet\Jade\Parser, Everzet\Jade\Lexer\Lexer, Everzet\Jade\Jade; $dumper = new PHPDumper(); $dumper->registerVisitor('tag', new AutotagsVisitor()); $dumper->registerFilter('javascript', new JavaScriptFilter()); $dumper->registerFilter('cdata', new CDATAFilter()); $dumper->registerFilter('php', new PHPFilter()); $dumper->registerFilter('style', new CSSFilter()); // Initialize parser & Jade $parser = new Parser(new Lexer()); $jade = new Jade($parser, $dumper); $template = __DIR__ . '/template.jade'; // Parse a template (both string & file containers) echo $jade->render($template);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह कोड tempalte.jade



को संकलित करेगा और इसकी सामग्री दिखाएगा।



जहां इसे लागू किया जा सकता है, वह आपके वर्कफ़्लो पर निर्भर करता है, उदाहरण के लिए, क्या आप किसी फ़्रेमवर्क का उपयोग करते हैं, आदि। उदाहरण के लिए, आप वॉचमैन , गार्ड या रिसोर्स वॉचर जैसी सेवा का उपयोग फाइल सिस्टम की निगरानी करने और अपने जेड टेम्प्लेट में बदलाव करने के लिए कर सकते हैं और विकास प्रक्रिया के दौरान एक विशिष्ट समय पर उन्हें संकलित कर सकते हैं।

सरल उदाहरण है

एक सरल उदाहरण पर विचार करें, जो दो वैरिएबल के साथ पूर्ण HTML पृष्ठ प्रदर्शित करता है, अब तक तर्क के बिना।

 !!! 5 html(lang="en-us") meta(charset="utf-8") meta(http-equiv="X-UA-Compatible", content="IE=Edge;chrome=1") title(dir="ltr")= pageTitle meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", media="screen", href="/css/styles.css") body header h1 My Jade Application div#content div.inner =$bodyContent script(data-main="js/main.js", src="js/libs/require.js")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

महत्वपूर्ण: आपको इंडेंट करने के लिए दो स्थानों का उपयोग करने की आवश्यकता है। यह वर्तमान में एकमात्र तरीका है जिसे जेड पीएचडी समझता है। अन्यथा, त्रुटियां होंगी या यह गलत मार्कअप होगा।

तुरंत यह स्पष्ट हो जाता है, जेड सामान्य HTML से काफी अलग है। सबसे पहले, इसमें कोण कोष्ठक <> और समापन टैग नहीं हैं। और इसके अलावा कोई घुंघराले कोष्ठक, दोहरे घुंघराले कोष्ठक या अन्य आम तौर पर स्वीकार किए जाने वाले तरीकों को टेम्प्लेटों में नामित करने के लिए नहीं हैं। (हालांकि, आप डबल कर्ली ब्रेस सिंटैक्स का उपयोग कर सकते हैं। लेकिन यह जेड का हिस्सा नहीं है।)



मार्कअप उत्पन्न करने के लिए जेड एक बहुत ही संक्षिप्त विधि की तरह दिखता है। आइए परिणामी HTML को देखें:

 <!DOCTYPE html> <html lang="en-us"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" /> <title dir="ltr"><?php echo pageTitle ?></title> <meta name="viewport" content="width=device-width" initial-scale="1.0" /> <link rel="stylesheet" media="screen" href="/css/styles.css" /> <body> <header> <h1>My Jade Application</h1> </header> <div id="content"> <div class="inner"> <?php echo $bodyContent ?> </div> </div> <script data-main="js/main.js" src="js/libs/require.js"></script> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTML टेम्पलेट कैसे काम करते हैं, इसे समझने के लिए जेड टेम्पलेट में सभी प्रमुख लाइनों से गुजरते हैं।



!!! 5



!!! 5



HTML5 सिद्धांत के लिए एक आशुलिपि है। यह एकमात्र ऐसी जगह है जहाँ आपको वाक्यविन्यास में एक ट्रिपल विस्मयादिबोधक चिह्न दिखाई देगा। आप भी उपयोग कर सकते हैं !!! xml



!!! xml



पाने के लिए <?xml version="1.0" encoding="utf-8" ?>



। transitional



, आप उपयोग कर सकते हैं !!! transitional



!!! transitional



पाने के लिए <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



। डिफ़ॉल्ट रूप से !!! default



!!! default



दे देंगे <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

नोट: जावास्क्रिप्ट, घोषणा के साथ स्वाद के नवीनतम संस्करण में !!! 5



!!! 5



को doctype html



में बदल !!! 5



गया है। शायद जेडएडपीपी इस उदाहरण का पालन करेगा, हालांकि यह संभावना नहीं है, जीथब पर गतिविधि की कमी को देखते हुए।

HTML टैग को एक नाम से इंगित किया जाता है, इसे बंद करने की आवश्यकता के बिना। उदाहरण के लिए:

 body header
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

... यदि आप वहाँ रुकेंगे, तो आपको निम्नलिखित परिणाम प्राप्त होंगे:

 <body> <header></header> </body>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ध्यान दें कि दस्तावेज़ की संरचना कैसे इंडेंट की जाती है।



आप किसी टैग की सामग्री को उसके नाम के साथ रिक्त स्थान पर रख सकते हैं:

 h1 My Jade Application
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

... बन जाता है

 <h1>My Jade Application</h1>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि आप सामग्री के बड़े ब्लॉक को लाइनों में तोड़ना चाहते हैं, तो पाइप वर्ण का उपयोग करें |

 p | Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. | Aenean eu leo quam. | Pellentesque ornare sem lacinia quam venenatis vestibulum.
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह संकलन:

 <p>Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आप HTML तत्वों में आईडी और वर्ग विशेषताओं को जोड़ने के लिए CSS चयनकर्ताओं के समान प्रारूप का उपयोग कर सकते हैं:

 div#content div.inner
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

... होता है:

  <div id="content"> <div class="inner">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अन्य विशेषताएँ जैसे src, href, lang, media, आदि। कोष्ठक का उपयोग करके निर्दिष्ट किया जा सकता है:

 html(lang="en-us") === <html lang="en-us"> link(rel="stylesheet", media="screen", href="/css/styles.css") === <link rel="stylesheet" media="screen" href="/css/styles.css" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

समान चिह्न का उपयोग चर को स्थानापन्न करने के लिए किया जाता है। जैसा कि आप ऊपर देख सकते हैं, जब आप जेड टेम्पलेट संकलित करते हैं, तो यह परिवर्तित होता है:

 = $pageTitle
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

निम्नलिखित में:

 <?php echo $pageTitle ?>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कुछ तर्क जोड़ें

आप सशर्त तर्क के लिए डैश का उपयोग कर सकते हैं। यहाँ एक ठोस उदाहरण दिया गया है:

 header h1= $pageTitle - if ($loggedIn): p.greeting Welcome back! - else: a(href="/login") Please login - endif;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि आप इस टेम्पलेट को संकलित करते हैं, तो परिणाम निम्न है:

 <header> <h1><?php echo $pageTitle ?></h1> <?php if ($loggedIn) ?> <p class="greeting">Welcome back!</p> <?php else ?> <a href="/login">Please login</a> <?php endif ?> </header>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

छोरों के लिए, कोड बहुत समान है:

 ul - foreach ($items as $item): li= $item
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

फिल्टर

JadePHP में कई तरह से टेक्स्ट के ब्लॉक को प्रोसेस करने के लिए फिल्टर का उपयोग करने की क्षमता है। उदाहरण के लिए:

 :php | $value = 10; | $computed_value += 100; | print $computed_value;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

... में परिवर्तित किया जाएगा:

 <?php $value = 10; $computed_value += 100; print $computed_value; ?>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

संभवतः अधिक उपयोगी फ़िल्टर जावास्क्रिप्ट और सीएसएस के लिए होंगे। उदाहरण के लिए:

 :style | body { | background: yellow; | }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

... में परिवर्तित किया जाएगा:

 <style type="text/css"> body { background: yellow; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ये फ़िल्टर निम्नानुसार सेट किए गए हैं (इन विज्ञापनों के संदर्भ की समझ के लिए ऊपर दिए गए कोड के साथ उदाहरण देखें):

 $dumper->registerFilter('javascript', new JavaScriptFilter()); $dumper->registerFilter('php', new PHPFilter()); $dumper->registerFilter('style', new CSSFilter());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पहला तर्क वह पाठ है जिसे आप अपने टेम्पलेट में एक बृहदान्त्र के अतिरिक्त के साथ चिह्नित करते हैं। ऊपर दिए गए उदाहरण के लिए, आप क्रमशः :javascript



:php



और :style



उपयोग कर सकते हैं।



यदि आप Everzet\Jade\Filter\FilterInterface



सक्षम Everzet\Jade\Filter\FilterInterface



, तो आप अपने स्वयं के फ़िल्टर को भी परिभाषित कर सकते हैं।

जेड का उपयोग क्यों करें?

कौन से टेम्पलेट इंजन का उपयोग करना है, इस बारे में बहस अंततः बहुत बेकार है। आप यह निर्धारित करने के लिए परीक्षण कर सकते हैं कि कौन से टेम्पलेट इंजन विभिन्न परिस्थितियों में प्रदर्शन में बेहतर हैं, और जो कुछ वातावरण में अधिक उपयुक्त हैं, उदाहरण के लिए, क्लाइंट या सर्वर पर। लेकिन अंत में, विकल्प अक्सर इस बात पर निर्भर करता है कि आपके लिए अधिक आरामदायक क्या है। मेरा आग में ईंधन जोड़ने का कोई इरादा नहीं है, साथ ही सबसे अच्छी प्रोग्रामिंग भाषा के बारे में विवादों में भाग लेता हूं।



जेड संक्षिप्त विधि सभी के लिए नहीं है। कुछ लोग तर्क देंगे कि इसे पढ़ना आसान है, जबकि अन्य लोग इससे असहमत होंगे। लेकिन अगर आपको लगता है कि यह एक योग्य विधि है, तो इसे चुनने का यह एक अच्छा कारण है।



एक और कारण है कि आप जेड (टेम्प्लेट इंजन की संख्या के बारे में) का उपयोग करने का निर्णय ले सकते हैं। यदि आप अक्सर, Node.js और PHP के बीच स्विच करते हैं, तो स्थिरता बनाए रखने के लिए कुछ तर्क है। क्यों एक उपकरण का अध्ययन करें और फिर कुछ पूरी तरह से अलग उपयोग करें यदि यह कई भाषाओं में उपलब्ध है?

सारांश

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