कोणीयज में संकलित और लिंक फ़ंक्शन के बीच अंतर क्या है

208

क्या कोई सरल शब्दों में समझा सकता है?

डॉक्स थोड़ा अटपटा लगता है। मुझे सार और बड़ी तस्वीर नहीं मिल रही है कि कब एक के ऊपर एक का उपयोग करना है। दोनों के विपरीत एक उदाहरण बहुत बढ़िया होगा।

javascript angularjs

— संमान सलाती
स्रोत

2

शायद निर्देशात्मक कार्यों का अधिक व्यापक अवलोकन: कोणीय निर्देश - जब संकलन, नियंत्रक, पूर्व-लिंक और पोस्ट-लिंक का उपयोग करना हो ।

— इज़्हाकी

jvandemo.com/…

— EMuentes

217

संकलित कार्य - टेम्पलेट डोम हेरफेर के लिए उपयोग (यानी, tElement = टेम्पलेट तत्व का हेरफेर), इसलिए जोड़तोड़ जो निर्देश के साथ जुड़े टेम्पलेट के सभी डोम क्लोन पर लागू होते हैं।
लिंक फ़ंक्शन - डोम श्रोताओं ( उदाहरण के पैमाने पर $ घड़ी अभिव्यक्ति) के साथ-साथ डोम हेरफेर (यानी, iElement = व्यक्तिगत उदाहरण तत्व का हेरफेर ) रजिस्टर करने के लिए उपयोग करें ।
टेम्पलेट के क्लोन होने के बाद इसे निष्पादित किया जाता है। जैसे, <li ng-repeat ...> के अंदर, उस विशेष <li> तत्व के लिए <li> टेम्पलेट (tElement) को क्लोन किया गया है (iElement में) के बाद लिंक फ़ंक्शन को निष्पादित किया गया है।
एक $ घड़ी () एक निर्देश को उदाहरण स्कोप गुण परिवर्तन (प्रत्येक उदाहरण के साथ एक इंस्टेंस स्कोप संबद्ध है) के बारे में सूचित करने की अनुमति देता है, जो निर्देश को डोम से एक अद्यतन आवृत्ति मान प्रस्तुत करने की अनुमति देता है - उदाहरण स्कोप से सामग्री की प्रतिलिपि बनाकर डोम।

ध्यान दें कि कंपाइल फ़ंक्शन और / या लिंक फ़ंक्शन में DOM ट्रांसफ़ॉर्मेशन किया जा सकता है।

अधिकांश निर्देशों को केवल एक लिंक फ़ंक्शन की आवश्यकता होती है, क्योंकि अधिकांश निर्देश केवल एक विशिष्ट DOM तत्व उदाहरण (और इसके उदाहरण के दायरे) के साथ व्यवहार करते हैं।

यह निर्धारित करने में मदद करने का एक तरीका कि किसका उपयोग करें: विचार करें कि संकलन फ़ंक्शन को एक scopeतर्क प्राप्त नहीं होता है । (मैं जानबूझकर लिंकिंग लिंक फ़ंक्शन तर्क की अनदेखी कर रहा हूं, जो ट्रांसकोडेड स्कोप प्राप्त करता है - यह शायद ही कभी उपयोग किया जाता है।) इसलिए कंपाइल फ़ंक्शन कुछ भी ऐसा नहीं कर सकता है जिसे आप करना चाहते हैं जिसे एक (उदाहरण) गुंजाइश की आवश्यकता होती है - आप '$ $ किसी भी मॉडल / उदाहरण के स्कोप गुण को देखते हैं, आप उदाहरण के स्कोप की जानकारी का उपयोग करके DOM में हेरफेर नहीं कर सकते, आप इंस्टेंस स्कोप पर परिभाषित फ़ंक्शंस को कॉल नहीं कर सकते, आदि।

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

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

यह निर्धारित करने में मदद करने के लिए एक और तरीका है: यदि आप लिंक फ़ंक्शन में "एलिमेंट" पैरामीटर का उपयोग नहीं करते हैं, तो संभवतः आपको लिंक फ़ंक्शन की आवश्यकता नहीं है।

चूंकि अधिकांश निर्देशों में एक लिंक फ़ंक्शन है, इसलिए मैं कोई उदाहरण प्रदान नहीं करने जा रहा हूं - उन्हें खोजने में बहुत आसान होना चाहिए।

ध्यान दें कि यदि आपको एक संकलन फ़ंक्शन और एक लिंक फ़ंक्शन (या प्री और पोस्ट लिंक फ़ंक्शन) की आवश्यकता है, तो संकलन फ़ंक्शन को लिंक फ़ंक्शन (एस) को वापस करना होगा क्योंकि 'लिंक' विशेषता को अनदेखा किया जाता है यदि 'संकलन' विशेषता को परिभाषित किया गया है।

यह सभी देखें

एक निर्देश को परिभाषित करते समय 'नियंत्रक', 'लिंक' और 'संकलन' कार्यों के बीच अंतर
डेव स्मिथ के उत्कृष्ट एनजी-कॉन्फिडेंस 2104 निर्देशों पर बात करते हैं (लिंक वीडियो के अनुभाग में जाता है जो संकलन और लिंक के बारे में बात करता है)

— मार्क राजकोक
स्रोत

5

संकलन बनाम लिंक पर सर्वश्रेष्ठ स्पष्टीकरण।

— Nexus23

1

जब आप कहते if you don't use the "element" parameter in the link function, then you probably don't need a link function.हैं कि आप का अर्थ "तत्व" के बजाय "गुंजाइश" है?

— जेसन लार्के

69

मैंने कुछ दिनों के लिए इस पर दीवार के खिलाफ अपना सिर पीटा, और मुझे लगता है कि थोड़ा और स्पष्टीकरण क्रम में है।

मूल रूप से, डॉक्स का उल्लेख है कि अलगाव काफी हद तक एक प्रदर्शन वृद्धि है। मैं दोहराऊंगा कि संकलन चरण का उपयोग मुख्य रूप से तब किया जाता है जब आपको DOM BEFORE को संशोधित करने की आवश्यकता होती है, उप-तत्वों को स्वयं संकलित किया जाता है।

हमारे उद्देश्यों के लिए, मैं शब्दावली पर जोर देने जा रहा हूं, जो अन्यथा भ्रामक है:

कंपाइलर सर्विस ($ संकलन) कोणीय तंत्र है जो DOM को प्रोसेस करता है और निर्देशों में कोड के विभिन्न बिट्स को चलाता है।

संकलित संकलन निर्देश के भीतर एक बिट कोड है, जो संकलक सेवा ($ संकलित) द्वारा एक विशेष समय पर चलाया जाता है।

संकलन के बारे में कुछ नोट्स:

आप ROOT तत्व को संशोधित नहीं कर सकते हैं (जो आपका निर्देश प्रभावित करता है), क्योंकि यह पहले से ही DOM के बाहरी स्तर से संकलित किया जा रहा है (उस तत्व पर निर्देशों के लिए संकलन सेवा पहले ही स्कैन की जा चुकी है)।
यदि आप (नेस्टेड) तत्वों को अन्य निर्देश जोड़ना चाहते हैं, तो आप:
1. संकलन चरण के दौरान उन्हें जोड़ना होगा।
2. संकलन सेवा को लिंकिंग चरण में इंजेक्ट करना होगा और तत्वों को मैन्युअल रूप से संकलित करना होगा। लेकिन, दो बार कुछ संकलन करने से सावधान रहें!

यह देखना भी मददगार है कि कैसे नेस्टिंग और स्पष्ट कॉल $ संकलन का काम करते हैं, इसलिए मैंने http://jsbin.com/imUPAMoV/1/edit पर यह देखने के लिए एक खेल का मैदान बनाया है । असल में, यह सिर्फ कंसोल.लॉग के चरणों को लॉग करता है।

मैं उस बिन में जो देखूंगा, उसके परिणाम बताऊंगा। कस्टम निर्देशों के एक डोम के लिए tp और sp नेस्टेड इस प्रकार है:

<tp>
   <sp>
   </sp>
</tp>

कोणीय संकलन सेवा कॉल करेगी:

tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link

Jsbin कोड में tp पोस्ट-लिंक FUNCTION भी स्पष्ट रूप से संकलन सेवा को तीसरे निर्देश (अप) पर कॉल करता है, जो अंत में सभी तीन चरणों को करता है।

अब, मैं कुछ परिदृश्यों के माध्यम से चलना चाहता हूं कि विभिन्न चीजों को करने के लिए संकलन और लिंक का उपयोग करने के बारे में कैसे पता चले:

SCENARIO 1: एक मैक्रो के रूप में निर्देश

आप अपने टेम्पलेट में गतिशील रूप से एक निर्देश (एनजी-शो कहना) को जोड़ना चाहते हैं जिसे आप एक विशेषता से प्राप्त कर सकते हैं।

मान लीजिए कि आपके पास एक टेम्पलेट है जो इस ओर इशारा करता है:

<div><span><input type="text"></span><div>

और आप एक कस्टम निर्देश चाहते हैं:

<my-field model="state" name="address"></my-field>

कि इस में डोम बदल जाता है:

<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>

मूल रूप से, आप कुछ सुसंगत मॉडल संरचना करके बॉयलरप्लेट को कम करना चाहते हैं जिसे आपका निर्देश व्याख्या कर सकता है। दूसरे शब्दों में: आप एक मैक्रो चाहते हैं।

यह संकलन चरण के लिए एक महान उपयोग है, क्योंकि आप उन सभी विशेषताओं पर DOM जोड़तोड़ को आधार बना सकते हैं जिन्हें आप सिर्फ विशेषताओं से जानते हैं। विशेषताएँ जोड़ने के लिए बस jQuery का उपयोग करें:

compile: function(tele, tattr) {
   var span = jQuery(tele).find('span').first();
   span.attr('ng-show', tattr.model + ".visible." + tattr.name);
   ...
   return { 
     pre: function() { },
     post: function() {}
   };
}

संचालन का क्रम होगा (आप पहले बताए गए jsbin के माध्यम से इसे देख सकते हैं):

संकलन सेवा मेरा क्षेत्र ढूँढती है
यह निर्देश पर संकलन FUNCTION को कॉल करता है, जो DOM को अपडेट करता है।
संकलन सेवा तब परिणामी DOM, और COMPILES (पुनरावर्ती) में चलती है
संकलन सेवा तब प्री-लिंक टॉप-डाउन कहती है
संकलन सेवा तब पोस्ट-लिंक BOTTOM UP को कॉल करती है, इसलिए मेरे क्षेत्र के लिंक फ़ंक्शन को AFTER आंतरिक नोड्स कहा जाता है।

उपरोक्त उदाहरण में, कोई लिंकिंग की आवश्यकता नहीं है, क्योंकि निर्देश के सभी कार्य संकलन FUNCTION में किए गए थे।

किसी भी बिंदु पर, एक निर्देश में कोड संकलक सेवा के लिए अतिरिक्त तत्वों को चलाने के लिए कह सकता है।

इसका मतलब है कि यदि आप संकलन सेवा को इंजेक्ट करते हैं तो हम लिंक फंक्शन में बिल्कुल वही काम कर सकते हैं:

directive('d', function($compile) {
  return {
    // REMEMBER, link is called AFTER nested elements have been compiled and linked!
    link: function(scope, iele, iattr) {
      var span = jQuery(iele).find('span').first();
      span.attr('ng-show', iattr.model + ".visible." + iattr.name);
      // CAREFUL! If span had directives on it before
      // you will cause them to be processed again:
      $compile(span)(scope);
    }
});

यदि आपको यकीन है कि आप जिन तत्वों को $ संकलन सेवा में भेज रहे हैं, वे मूल रूप से निर्देश-मुक्त थे (जैसे वे आपके द्वारा परिभाषित टेम्पलेट से आए थे, या आपने उन्हें angular.element ()) के साथ बनाया है, तो अंतिम परिणाम बहुत अधिक है पहले जैसा ही (हालांकि आप कुछ काम दोहरा सकते हैं)। हालांकि, अगर तत्व पर अन्य निर्देश थे, तो आप बस उन लोगों को फिर से संसाधित करने का कारण बनते हैं, जो सभी प्रकार के अनियमित व्यवहार का कारण बन सकते हैं (जैसे घटनाओं और घड़ियों का दोहरा पंजीकरण)।

इस प्रकार, मैक्रो-शैली के काम के लिए संकलन चरण एक बेहतर विकल्प है।

SCENARIO 2: गुंजाइश डेटा के माध्यम से DOM कॉन्फ़िगरेशन

यह एक ऊपर दिए गए उदाहरण से है। मान लें कि DOM को मैनिपुलेट करते समय आपको स्कोप तक पहुँच की आवश्यकता है। ठीक है, उस मामले में, संकलन खंड आपके लिए बेकार है, क्योंकि यह गुंजाइश उपलब्ध होने से पहले होता है।

तो, मान लें कि आप किसी इनपुट को सत्यापन के साथ जोड़ना चाहते हैं, लेकिन आप सर्वर-ओर ORM वर्ग (DRY) से अपनी मान्यताएँ निर्यात करना चाहते हैं, और उन्हें स्वतः-लागू करें और उन मान्यताओं के लिए उचित क्लाइंट-साइड UI जनरेट करें।

आपका मॉडल धक्का दे सकता है:

scope.metadata = {
  validations: {
     address: [ {
       pattern: '^[0-9]',
       message: "Address must begin with a number"
     },
     { maxlength: 100,
       message: "Address too long"
     } ]
  }
};
scope.state = {
  address: '123 Fern Dr'
};

और आप एक निर्देश चाहते हो सकता है:

<form name="theForm">
  <my-field model="state" metadata="metadata" name="address">
</form>

विभिन्न सत्यापन त्रुटियों को दिखाने के लिए उचित निर्देशों और divs को ऑटो में शामिल करें:

<form name="theForm">
  <div>
    <input ng-model="state.address" type="text">
    <div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...

इस मामले में आपको निश्चित रूप से स्कोप तक पहुंच की आवश्यकता है (क्योंकि यह वह जगह है जहां आपकी मान्यताएं संग्रहीत हैं), और मैन्युअल रूप से परिवर्धन संकलित करने जा रहे हैं, फिर से दोहरे-संकलन चीजों के लिए सावधान नहीं रहना चाहिए। (एक साइड नोट के रूप में, आपको युक्त फ़ॉर्म टैग पर एक नाम सेट करने की आवश्यकता होगी (मैं यहाँ पर TheForm मान रहा हूँ), और इसे iElement.parent ()। नियंत्रक ('फ़ॉर्म') $ नाम के साथ लिंक में एक्सेस कर सकता हूँ। ।

इस मामले में एक संकलन समारोह लिखने का कोई मतलब नहीं है। लिंक वास्तव में आप क्या चाहते हैं। चरण होंगे:

एक टेम्पलेट को परिभाषित करें जो पूरी तरह से कोणीय निर्देशों से रहित है।
एक लिंक फ़ंक्शन को परिभाषित करें जो विभिन्न विशेषताओं को जोड़ता है
किसी भी कोणीय निर्देशों को याद रखें जिन्हें आप अपने शीर्ष-स्तरीय तत्व (मेरा क्षेत्र निर्देश) पर अनुमति दे सकते हैं। उन्हें पहले ही संसाधित किया जा चुका है और यह उन्हें दोहरे-संसाधित होने से बचाने का एक तरीका है।
अपने शीर्ष-स्तरीय तत्व पर संकलन सेवा को कॉल करके समाप्त करें

इस तरह:

angular.module('app', []).
directive('my-field', function($compile) {
  return {
    link: function(scope, iele, iattr) {
      // jquery additions via attr()
      // remove ng attr from top-level iele (to avoid duplicate processing)
      $compile(iele)(scope); // will pick up additions
    }
  };
});

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

इस परिदृश्य पर एक अंतिम ध्यान दें: मुझे लगा कि आप एक सर्वर से मान्यताओं की परिभाषा को आगे बढ़ाएंगे, और मेरे उदाहरण में मैंने उन्हें पहले ही दायरे में डेटा के रूप में दिखाया है। मैं इसे पाठक के लिए यह जानने के लिए एक अभ्यास के रूप में छोड़ता हूं कि कोई व्यक्ति उस डेटा को REST API (संकेत: आस्थगित संकलन) से खींचने की आवश्यकता से कैसे निपट सकता है।

SCENARIO 3: लिंक के माध्यम से दो-तरफ़ा डेटा बाइंडिंग

बेशक लिंक का सबसे आम उपयोग दो तरह से डेटा बाइंडिंग को घड़ी / लागू करने के लिए हुक करना है। अधिकांश निर्देश इस श्रेणी में आते हैं, इसलिए यह पर्याप्त रूप से कहीं और कवर किया गया है।

— टोनी के।
स्रोत

2

Awsome और कूल जवाब!

— Nexus23

डबल संकलित किए बिना नेस्टेड तत्वों को कैसे जोड़ा जाए?

— Art713

50

डॉक्स से:

संकलक

कंपाइलर एक कोणीय सेवा है जो विशेषताओं की तलाश में डोम का पता लगाती है। संकलन प्रक्रिया दो चरणों में होती है।

संकलित करें: DOM को पीछे छोड़ें और सभी निर्देशों को एकत्रित करें। परिणाम एक लिंकिंग फ़ंक्शन है।

लिंक: निर्देशों को एक दायरे के साथ मिलाएं और एक जीवंत दृश्य उत्पन्न करें। स्कोप मॉडल में कोई भी परिवर्तन दृश्य में परिलक्षित होते हैं, और दृश्य मॉडल के साथ कोई भी उपयोगकर्ता सहभागिता परिलक्षित होती है। स्कोप मॉडल को सत्य का एकल स्रोत बनाना।

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

तो कम से कम कुछ मामलों में, दो चरण अलग-अलग अनुकूलन के रूप में मौजूद हैं।

@ UmurKontacı से :

यदि आप DOM परिवर्तन करने जा रहे हैं, तो यह होना चाहिए compile। यदि आप कुछ सुविधाएँ जोड़ना चाहते हैं जो व्यवहार परिवर्तन हैं, तो यह अंदर होना चाहिए link।

— मैट बॉल
स्रोत

46

यदि आप DOMपरिवर्तन करने जा रहे हैं , तो यह तब होना चाहिए compileजब आप जोड़ना चाहते हैं कि कुछ विशेषताएं व्यवहार परिवर्तन हैं, यह होना चाहिए link।

— उमूर कोंटासी

4

उपरोक्त टिप्पणी के लिए +1; यह अब तक का सबसे संक्षिप्त विवरण है। यह यहाँ पर मिलने वाले ट्यूटोरियल से मेल खाता है ।

— बेनी बोटेमा

18

यह दिशाओं पर मिस्को की बात से है। http://youtu.be/WqmeI5fZcho?t=16m23s

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

— SunnyShah
स्रोत

10

धागे तक थोड़ा देर से। लेकिन, भविष्य के पाठकों के लाभ के लिए:

मैं निम्नलिखित वीडियो के बारे में आया, जो बहुत ही शानदार तरीके से कोणीय जेएस में संकलन और लिंक की व्याख्या करता है:

https://www.youtube.com/watch?v=bjFqSyddCeA

यहां सभी सामग्री में कॉपी / टाइप करना अच्छा नहीं होगा। मैंने वीडियो से कुछ स्क्रीनशॉट लिए, जो संकलन और लिंक चरणों के हर चरण की व्याख्या करते हैं:

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

पहला चक्र: "संकलन" पहले सभी निर्देशों पर किया जाता है।
दूसरा चक्र: "नियंत्रक" और "प्री-लिंक" का प्रदर्शन किया जाता है (बस एक के बाद एक) तीसरा चक्र: "पोस्ट-लिंक" रिवर्स ऑर्डर में प्रदर्शन किया जाता है (अंतरतम से शुरू)

निम्नलिखित कोड है, जो ऊपर प्रदर्शित करता है:

var app = angular.module ('ऐप', []);

app.controller ('संदेश', ['$ गुंजाइश', समारोह ($ गुंजाइश) {

}]);

app.directive ('संदेश', फ़ंक्शन ($ इंटरपोलेट) {
    वापसी{

        संकलन: फ़ंक्शन (tElement, tAttributes) { 
            कंसोल.लॉग (tAttributes.text + "-In संकलन ..");
            वापसी {

                प्री: फंक्शन (स्कोप, iElement, iAttributes, कंट्रोलर) {
                    कंसोल.लॉग (iAttributes.text + "-In pre ..");
                },

                पद: फ़ंक्शन (गुंजाइश, iElement, iAttributes, नियंत्रक) {
                    कंसोल.लॉग (iAttributes.text + "-In Post ..");
                }

            }
        },

        नियंत्रक: फ़ंक्शन ($ गुंजाइश, $ तत्व, $ attrs) {
            कंसोल.लॉग ($ attrs.text + "-इन कंट्रोलर ..");
        },

    }
});

<body ng-app="app">
<div ng-controller="msg">
    <div message text="first">
        <div message text="..second">
            <div message text="....third">

            </div>              
        </div>  
    </div>
</div>

अपडेट करें:

इसी वीडियो का भाग 2 यहां उपलब्ध है: https://www.youtube.com/watch?v=1M3LZ1cu7rw वीडियो सरल उदाहरण में, कोणीय जेएस के संकलन और लिंक प्रक्रिया के दौरान DOM को संशोधित करने और ईवेंट को हैंडल करने के तरीके के बारे में अधिक बताता है। ।

— user203687
स्रोत

उपयोग किया जाता है compileऔर postइससे पहले कि यह templateएक विक्रेता के निर्देश से भाग पर संशोधित है एक डोम को संशोधित करने के लिए ।

— जेडी

6

दो चरण: संकलन और लिंक

संकलित करें:

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

संपर्क:

जब कोई तत्व जुड़ा होता है, तो DOM ट्री में उसके शाखा बिंदु पर DOM ट्री टूट जाता है, और सामग्री को टेम्पलेट के संकलित (और लिंक किए गए) उदाहरण से बदल दिया जाता है। मूल विस्थापित सामग्री या तो खारिज कर दी जाती है, या ट्रांसकॉक्शन के मामले में, फिर से टेम्पलेट में जुड़ जाती है। ट्रांसकॉर्पोरेशन के साथ, दो टुकड़े एक साथ वापस जुड़े हुए हैं (एक श्रृंखला की तरह, टेम्पलेट का टुकड़ा बीच में होने के साथ)। जब लिंक फ़ंक्शन कहा जाता है, तो टेम्पलेट पहले से ही एक दायरे से बंधा हुआ है, और तत्व के एक बच्चे के रूप में जोड़ा गया है। लिंक फ़ंक्शन DOM को आगे हेरफेर करने और श्रोताओं को बदलने के लिए आपका अवसर है।

— pixelbits
स्रोत

3

यह प्रश्न पुराना है जिसके द्वारा मैं संक्षिप्त सारांश बनाना चाहूंगा जो मदद कर सकता है:

संकलन को सभी निर्देश उदाहरण के लिए एक बार कहा जाता है
संकलन का मुख्य उद्देश्य लिंक (और संभवतः पूर्व / पोस्ट) फ़ंक्शन / ऑब्जेक्ट को वापस करना / बनाना है। आप ऐसे सामान भी कर सकते हैं जो निर्देश के उदाहरणों के बीच साझा किए जाते हैं।
मेरी राय में, "लिंक" इस सुविधा के लिए एक भ्रमित नाम है। मैं "प्री-रेंडर" पसंद करूंगा।
लिंक को प्रत्येक निर्देश उदाहरण के लिए कहा जाता है और इसका उद्देश्य DOM में निर्देश के प्रतिपादन को तैयार करना है।

— केफिर इरेज़
स्रोत

1

सुझाव नाम के लिए एक प्लस: "प्री-रेंडर"

— हैलॉन्ग काओ