👇🏿 🗿 🤜🏿 हम पायथन में अपना टेम्प्लेट इंजन लिखते हैं 😙 👲🏾 🧑🏽

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

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

भाषा वाक्य रचना

यद्यपि हमारे मामले में भाषा बहुत सरल हो जाएगी, उदाहरण के लिए, हम चर और ब्लॉक के साथ काम करेंगे, जो कुछ इस तरह दिखाई देगा:

<!—-     `{{`  `}}` --> <div>{{my_var}}</div> <!—-    `{%`  `%}` --> {% each items %} <div>{{it}}</div> {% end %}

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

चक्र

उनकी मदद से, हम संग्रह को बायपास कर सकते हैं और एक तत्व प्राप्त कर सकते हैं जिसके साथ यह आवश्यक संचालन करेगा:

 {% each people %} <div>{{it.name}}</div> {% end %} {% each [1, 2, 3] %} <div>{{it}}</div> {% end %} {% each records %} <div>{{..name}}</div> {% end %}

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

स्थिति

परिचय देने की जरूरत नहीं। हमारा इंजन समर्थन करेगा यदि ... और भी , साथ ही साथ ऑपरेटरों: ==, <=,> =, =, =,>, <! ।

 {% if num > 5 %} <div> 5</div> {% else %} <div>   5</div> {% end %}

फंक्शन कॉल

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

 <!—-   ... --> <div class='date'>{% call prettify date_created %}</div> <!-- ...   --> <div>{% call log 'here' verbosity='debug' %}</div>

सैद्धांतिक भाग

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

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

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

सिंटेक्स परिभाषा;

हमारे कठिन व्यवसाय में पहला कदम सामग्री को टुकड़ों में विभाजित करना होगा। प्रत्येक स्निपेट एक HTML टैग है। नियमित अभिव्यक्ति, साथ ही विभाजन () फ़ंक्शन का उपयोग सामग्री को अलग करने के लिए किया जाएगा।

 VAR_TOKEN_START = '{{' VAR_TOKEN_END = '}}' BLOCK_TOKEN_START = '{%' BLOCK_TOKEN_END = '%}' TOK_REGEX = re.compile(r"(%s.*?%s|%s.*?%s)" % ( VAR_TOKEN_START, VAR_TOKEN_END, BLOCK_TOKEN_START, BLOCK_TOKEN_END ))

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

यहाँ एक सरल उदाहरण है जो दर्शाता है कि यह नियमित काम कैसे करता है:

 >>> TOK_REGEX.split('{% each vars %}<i>{{it}}</i>{% endeach %}') ['{% each vars %}', '<i>', '{{it}}', '</i>', '{% endeach %}']

इसके अलावा, प्रत्येक संसाधित टुकड़े का अपना प्रकार होगा, जिसे प्रसंस्करण और संकलन के दौरान ध्यान में रखा जाएगा। टुकड़ों को चार प्रकारों में विभाजित किया जाएगा:

 VAR_FRAGMENT = 0 OPEN_BLOCK_FRAGMENT = 1 CLOSE_BLOCK_FRAGMENT = 2 TEXT_FRAGMENT = 3

एएसडी गठन

हमारे टेम्पलेट इंजन से संबंधित अंशों वाले HTML पृष्ठ के स्रोत पाठ के नियमित अभिव्यक्ति विश्लेषण के बाद, हमारी "भाषा" से संबंधित तत्वों के आधार पर एक पेड़ का निर्माण करना आवश्यक है। हमारे पास एक नोड वर्ग होगा, जो पेड़ की जड़ है और इसमें बाल नोड्स होते हैं, जो प्रत्येक प्रकार के नोड के लिए उपवर्ग हैं। उपवर्गों में process_fragment () और रेंडर () विधियाँ होनी चाहिए:
- प्रक्रिया_फ्रैगमेंट () का उपयोग नोड ऑब्जेक्ट की सामग्री और आवश्यक विशेषताओं का विश्लेषण करने के लिए किया जाता है।
- संबंधित कोड को HTML कोड में बदलने के लिए रेंडर () की जरूरत होती है

यह कंपाइलर ऑपरेशन के दौरान कहे जाने वाले enter_scope () और exit_scope () विधियों को लागू करने के लिए वैकल्पिक है। पहला फ़ंक्शन, enter_scope () कहलाता है, जब नोड एक नया क्षेत्र बनाता है (बाद में उस पर अधिक), और बाहर निकलें_scope () वर्तमान क्षेत्र को संसाधित करने के लिए छोड़ दिया जाता है जब क्षेत्र का प्रसंस्करण पूरा हो जाता है।

आधार वर्ग नोड :

 class _Node(object): def __init__(self, fragment=None): self.children = [] self.creates_scope = False self.process_fragment(fragment) def process_fragment(self, fragment): pass def enter_scope(self): pass def render(self, context): pass def exit_scope(self): pass def render_children(self, context, children=None): if children is None: children = self.children def render_child(child): child_html = child.render(context) return '' if not child_html else str(child_html) return ''.join(map(render_child, children))

और यहाँ चर उपवर्ग का एक उदाहरण है:

 class _Variable(_Node): def process_fragment(self, fragment): self.name = fragment def render(self, context): return resolve_in_context(self.name, context)

नोड को परिभाषित करते समय, पाठ के एक टुकड़े का विश्लेषण किया जाएगा, जो हमें इस टुकड़े का प्रकार बताएगा (यानी यह एक चर, ब्रैकेट, आदि है)
पाठ और चर को उनके संबंधित उपवर्गों में परिवर्तित किया जाएगा।
यदि ये लूप हैं, तो उनके प्रसंस्करण में थोड़ा अधिक समय लगेगा, क्योंकि इसका मतलब है कि कई आदेशों को निष्पादित करने की आवश्यकता है। यह पता लगाने के लिए कि यह कमांड का एक ब्लॉक है, बहुत सरल है: आपको बस "{%" और "%}" में संलग्न पाठ के एक टुकड़े का विश्लेषण करने की आवश्यकता है। यहाँ एक सरल उदाहरण है:

 {% each items %}

जहां प्रत्येक कमांड का इच्छित ब्लॉक है

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

 def compile(self): root = _Root() scope_stack = [root] for fragment in self.each_fragment(): if not scope_stack: raise TemplateError('nesting issues') parent_scope = scope_stack[-1] if fragment.type == CLOSE_BLOCK_FRAGMENT: parent_scope.exit_scope() scope_stack.pop() continue new_node = self.create_node(fragment) if new_node: parent_scope.children.append(new_node) if new_node.creates_scope: scope_stack.append(new_node) new_node.enter_scope() return root

प्रतिपादन

एसडीए को HTML में बदलने के लिए अंतिम चरण है। ऐसा करने के लिए, हम पेड़ के सभी नोड्स पर जाते हैं और रेंडर () विधि कहते हैं। रेंडरिंग प्रक्रिया में, यह ध्यान रखना आवश्यक है कि वर्तमान में क्या काम कर रहा है: शाब्दिक या चर नाम का संदर्भ। ऐसा करने के लिए, ast.literal_eval () का उपयोग करें, जो सुरक्षित रूप से आपको एक स्ट्रिंग पार्स करने की अनुमति देता है:

 def eval_expression(expr): try: return 'literal', ast.literal_eval(expr) except ValueError, SyntaxError: return 'name', expr

यदि हम एक चर नाम के संदर्भ में काम कर रहे हैं, तो हम विश्लेषण करते हैं कि इसके साथ क्या संकेत दिया गया है: "।" या "..":

 def resolve(name, context): if name.startswith('..'): context = context.get('..', {}) name = name[2:] try: for tok in name.split('.'): context = context[tok] return context except KeyError: raise TemplateContextError(name)

निष्कर्ष

यह लेख एक अनुवाद है जो एक सामान्य विचार देता है कि टेम्पलेट इंजन कैसे काम करते हैं। हालांकि यह सबसे सरल कार्यान्वयन उदाहरण है, इसका उपयोग अधिक जटिल टेम्पलेट इंजन के निर्माण के लिए आधार के रूप में किया जा सकता है।

पूर्ण स्रोत कोड, साथ ही उपयोग के उदाहरण यहां देखे जा सकते हैं।

हम पायथन में अपना टेम्प्लेट इंजन लिखते हैं