🍤 🔧 🤷 एन्यो 2. ओओपी 🥂 💇🏾 ⏪

पहले विषय को कई शुक्रवार के पदों के भाग्य का सामना करना पड़ा, लेकिन इससे कोई फर्क नहीं पड़ता!
मैं हार नहीं मानता, जिसका मतलब है कि हम आगे बढ़ते रहें ...

इस विषय में, हम निम्नलिखित विषयों को शामिल करेंगे:

क्लासेस। परिभाषा, तात्कालिकता, विरासत।
क्लास तरीके और फ़ील्ड, कंस्ट्रक्टर और बेस क्लास के तरीके

त्याग

हब्रज़ितली, मैं परम सत्य होने का दावा नहीं करता।
विशेष रूप से JS और Enyo का मेरा ज्ञान सीमित है, और इसलिए ट्यूटोरियल अधूरा है।
मैं बेहद दिलचस्पी से सभी को पढ़ने की सलाह देता हूं। प्रलेखन।
लिंक पहले भाग में उपलब्ध हैं, वर्तमान विषय पर परिशिष्ट में और निश्चित रूप से enyojs.com पर।

स्रोत डेटा

हम उसी "index.html" फ़ाइल का उपयोग करेंगे:

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Title</title> <link rel="stylesheet" href="http://enyojs.com/enyo-2.2.0/enyo.css"><!-- Enyo 2.2.0--> <script type="text/javascript" src="http://enyojs.com/enyo-2.2.0/enyo.js"></script><!-- Enyo 2.2.0--> </head> <body> <script type="text/javascript"> </script> </body> </html>

सभी उदाहरण टैग के अंदर कोड को संशोधित करेंगे।

क्लासेस। परिभाषा, तात्कालिकता, विरासत।

अपने प्रकारों को परिभाषित करना:

 class ClassName {}

Enyo में डिजाइन इस प्रकार होगा

 enyo.kind({name: 'ClassName'})

किसी वस्तु का उदाहरण बनाना मूल नहीं है:

 var class_name = new ClassName()

वंशानुक्रम तात्कालिकता की तुलना में थोड़ा अधिक जटिल है:

 class ClassNameA {} class ClassNameB extends ClassNameA {}

Enyo में निम्न रूप ले जाएगा:

 enyo.kind({name: 'ClassNameA'}) enyo.kind({kind: 'ClassNameA', name: 'ClassNameB'})

यहाँ यह उल्लेखनीय है कि यदि शास्त्रीय OOP भाषाओं में "ClassName" प्रकार का उदाहरण स्मृति स्थान को संदर्भित करता है और इसमें कोई उत्कृष्ट सुविधाएँ नहीं होती हैं (सबसे अच्छी स्थिति में यह ऑब्जेक्ट क्लास से विरासत में मिली है), तो Enyo में, आधार वर्ग "enyo.Control" के लिए डिफ़ॉल्ट होगा - DOM तत्व को div टैग (कठोर WEB विरासत) के साथ ब्लॉक करें, अर्थात "ClassNameA" प्रकार के लिए, बेस क्लास "enyo.Control" के रूप में निहित है। यदि मामलों की यह स्थिति आपके अनुरूप नहीं है - "enyo.Component" वारिस।
C ++ / Java / etc शैली में एकाधिक उत्तराधिकार। जहां भी संभव हो पाया नहीं जा सकता है - बतख टाइपिंग , हालांकि यह खराब तरीके से खोजा गया हो सकता है।

व्यावहारिक काम

हमारा "index.html" लें और निम्नलिखित कोड डालें:

 //   enyo.kind({name: 'ClassNameA'}) enyo.kind({kind: 'ClassNameA', name: 'ClassNameB'}) //   var cls_a = new ClassNameA() var cls_b = new ClassNameB() //    console.dir(cls_a) console.dir(cls_b)

अगर हम DOM को चेक करते हैं, तो हमें div एलिमेंट्स नहीं मिलेंगे। यह इस तथ्य के कारण है कि वर्गों में से किसी के पास "रेंडरइंटो ()" विधि के लिए कॉल नहीं था, हालांकि, ऑब्जेक्ट्स बनाए गए थे और आरंभ किए गए थे।

क्लास तरीके और फ़ील्ड, कंस्ट्रक्टर और बेस क्लास के तरीके

कक्षाएं अच्छी हैं, लेकिन अगर आप इसे कार्यक्षमता से नहीं भरते हैं तो एक वर्ग क्यों? - अब चलो!
छद्म कोड होने:

 class ClassNameA { object fieldName = "value" }

आइए कोड को Enyo में बदलते हैं:

 enyo.kind({name: 'ClassNameA', fieldName: 'value'})

अब हम कक्षा का एक उदाहरण बना सकते हैं और सत्यापित कर सकते हैं कि वर्ग फ़ील्ड उपलब्ध है:

 var cls_a = new ClassNameA() console.log(cls_a.fieldName)

ठीक है, लेकिन खेतों का मतलब थोड़ा कम है, तरीके कहां हैं? - हाँ, वहीं!
छद्म कोड होने:

 class ClassNameA { object method () { return "value" } }

आइए कोड को Enyo में बदलते हैं:

 enyo.kind({ name: 'ClassNameA', method: function(){ return 'value' } })

अब हम कक्षा का एक उदाहरण बना सकते हैं और सत्यापित कर सकते हैं कि कक्षा विधि उपलब्ध है:

 var cls_a = new ClassNameA() console.log(cls_a.method())

ठीक है, क्षेत्र हैं, विधियां हैं ... शायद एक निर्माणकर्ता / विध्वंसक भी है? - बिल्कुल! कंस्ट्रक्टरों के रूप में कई 2 टुकड़े !!! लेकिन, हम लगातार बने रहेंगे।
किसी भी Enyo ऑब्जेक्ट को बनाते समय, इसकी constructor विधि को कहा जाता है; यदि आरंभीकरण आवश्यक है, तो यह ओवरराइड करने के लायक है।
यह इस तरह दिखता है:

 enyo.kind({ name: 'ClassNameC', constructor: function() { //   console.log('constructor') } })

आधार वर्ग की विधि (इस मामले में, कंस्ट्रक्टर) तक पहुंचने के लिए, Enyo इस. this.inherited(arguments) का निर्माण प्रदान करता है। यह ध्यान देने योग्य है कि यह. this.inherited(arguments) उन सभी तरीकों के लिए काम करता है जिन्हें आप ओवरराइड करने की योजना बनाते हैं।
परिणामस्वरूप, कोड इस प्रकार होगा:

 enyo.kind({ name: 'ClassNameC', constructor: function() { console.log('my init befor constructor') this.inherited(arguments) console.log('my init after constructor') } })

उपरोक्त सभी उपयोगकर्ता द्वारा बनाई गई सभी Enyo वस्तुओं के लिए सही है, लेकिन एक अतिरिक्त है ...
"Enyo.Component" टाइप करें - संक्षेप में, यह जानवर "enyo.Control" (डिफ़ॉल्ट div का एक है) के लिए आधार वर्गों में से एक है।
इसके क्षेत्रों और विधियों में हैं:

नाम - ऑब्जेक्ट टाइपिंग / नामकरण के लिए जिम्मेदार क्षेत्र
createComponent / createCompords - गतिशील रूप से बच्चे के घटकों को बनाने के लिए तरीके
विध्वंसक - विधिवत् बाल घटकों को हटाने के लिए विधियाँ
मालिक - वर्तमान घटक के माता-पिता के लिए एक लिंक फ़ील्ड
आईडी - मुझे लगता है कि यह स्पष्ट है
और घटनाओं के साथ काम करने के लिए कई स्वादिष्ट तरीके, लेकिन निम्नलिखित विषयों में उनके बारे में

यह पसंद है या नहीं, इस तरह के एक कार्य ध्यान देने योग्य है। तो यह बहुत ही "enyo.Component" अपने "बच्चों" के जीवन चक्र में 2 और तरीके पेश करता है:

 enyo.kind({ name: 'ClassNameD', //      constructor: function() { this.inherited(arguments); }, //     createComponent / createComponents create: function() { this.inherited(arguments); }, //     destroyComponents destroy: function() { this.inherited(arguments); } });

नमक क्या है? हाँ, सब कुछ बहुत सरल है!
"Enyo.Component" के अंदर और विशेष रूप से "enyo.Control" में कई तत्वों को घोंसला बनाया जा सकता है, और उनके अंदर, आदि।
इस पेड़ का निर्माण कैसे करें? इस पेड़ को डोम से कैसे बांधें? तत्वों को जोड़ते / हटाते समय आयामों का पुनरावर्तन कैसे करें?
घटनाओं को कैसे बांधें / हटाएं? इसे महसूस करो? हाँ, चेकर्स और कवियों के साथ वस्तुओं का आपका थोड़ा ग्राफ!
न्याय के लिए, मैं यह सूचित करने के लिए जल्दबाजी करता हूं कि DOM में तत्वों के निर्माण / विलोपन और उनके वास्तविक प्रतिपादन को कार्यात्मक रूप से अलग किया गया है।

एक नया उदाहरण बनाते समय बाल तत्वों को हटाना / बनाना / नष्ट करना। माता-पिता नोड तक पहुंच "स्वामी" फ़ील्ड के माध्यम से है, और बच्चे नोड्स के माध्यम से "यह $।"
बंद। प्रलेखन कहता है: यदि आपकी वस्तु "enyo.Component" या इसके वंशजों से विरासत में मिली है, तो निर्माणकर्ता के रूप में उपयोग करें इसे कंस्ट्रक्टर के तुरंत बाद कहा जाता है, अन्यथा - कंस्ट्रक्टर।
परिणाम:

 enyo.kind({ name: 'ClassNameD', create: function() { // this.$ -  this.inherited(arguments) // this.$ -   ,    create   }, destroy: function() { // this.$ -    this.inherited(arguments); // this.$ -  } });

संदर्भ

Enyo में निहित है। गितुब विकी एन्यो
ऑब्जेक्ट जीवनचक्र Enyo। गितुब विकी एन्यो
enyo.Component। Enyo एपीआई
enyo.Control। Enyo एपीआई