👧🏽 🚴🏻 🚵 जावास्क्रिप्ट में कक्षाओं का उपयोग करना 👨🏽‍✈️ 🥡 🎄

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

शुरू करने के लिए, मैं वर्णन करूंगा कि हमें जिन प्रकारों की आवश्यकता है, उनकी कक्षाएं कैसे बनाई जा सकती हैं, कक्षाओं में साधारण सार्वजनिक गुण, निजी गुण और स्थिर गुण हो सकते हैं।

वर्ग निर्माण

एक क्लास बनाने के लिए, बस क्लास का नाम घोषित करें और उसे एक ऑब्जेक्ट असाइन करें।
एक खाली वर्ग बनाने का एक उदाहरण:

classes.Class( "EmptyClass", {} ); //    classes.EmptyClass alert( classes.EmptyClass ); //  [class EmptyClass]

जैसा कि आप पहले ही समझ चुके हैं, क्लास बनाने से कोड लिखने के लिए भारी खर्च की आवश्यकता नहीं होती है।

निजी गुणों के साथ एक वर्ग बनाने के लिए, यह घोषित करने के लिए पर्याप्त है कि दूसरा पैरामीटर एक ऑब्जेक्ट नहीं है, लेकिन एक फ़ंक्शन जिसमें क्लास ऑब्जेक्ट वापस आ जाएगा

निजी गुणों वाले वर्ग का एक उदाहरण:

 classes.Class( "PrivatePropertyClass", function(){ //   / var privateProp = "tratata", twoPrivateProp = "lalala"; //     return { } }); //    var privateTest = new classes.PrivatePropertyClass(); //     alert( privateTest.privateProp ); //  undefined

आप न केवल कक्षाओं के संदर्भ में कक्षाएं बना सकते हैं, बल्कि किसी अन्य में भी।

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

यहां किसी भी सुविधाजनक संदर्भ में एक क्लास बनाने के तरीके दिए गए हैं:

 //      window classes.Class.call( window, "GlobalClass", {} ); //      var CurrentContextClass = classes.Class( {} ); //           //     classes c  ClassesContextClass var CurrentContextClass = classes.Class( "ClassesContextClass", {} );

इस पर और कक्षाओं के निर्माण के साथ वास्तव में समाप्त होता है, मुझे लगता है और अन्य तरीकों की आवश्यकता नहीं है।

कक्षाओं के साथ काम करें

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

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

 classes.Class( "Debug", function() { //   var //       BODY   body = null, //           body   cache = []; return { //  ,        //  callback   ,     constructor: function( callback ) { //          var listener = window.addEventListener ? [ "addEventListener", "" ] : [ "attachEvent", "on" ]; //       , //      if ( document.readyState === "complete" ) { //      ,     //       BODY body = document.body; //        //     if ( callback && typeof callback === "function" ) { callback.call( this ); } //      return; } //        callback' var self = this; //   ,       window[ listener[ 0 ] ]( listener[ 1 ] + "load", function() { //     ,     //      BODY body = document.body; //        ,   . for( var i = 0; i < cache.length; i++ ) { body.appendChild( cache[ i ] ); cache[ i ] = null; } //   cache.length = 0; //        //     if ( callback && typeof callback === "function" ) { callback.call( self ); } // bubbling - : http://learn.javascript.ru/bubbling-and-capturing }, false ); }, //             write: function() { //  DIV      var div = document.createElement( "DIV" ), //       ,   //       TRUE  //          DOM // . isPlainText = arguments.length ? arguments[ arguments.length - 1 ] === true : false, //      dataArray = Array.prototype.slice.call( arguments ); //       HTML   DOM  if ( isPlainText && dataArray.pop() ) { //       ,   //            DOM div.appendChild( document.createTextNode( dataArray.join( ", " ) ) ); } else { //        DOM . div.innerHTML = dataArray.join( ", " ); } //           if ( body ) { //        BODY  body.appendChild( div ); } else { //          BODY cache[ cache.length ] = div; } } } });

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

उदाहरण के लिए, हम अब इस वर्ग का एक उदाहरण बना सकते हैं और अपना पहला संदेश प्रिंट कर सकते हैं।

 var debug = new classes.Debug(); debug.write( "  <var>classes.Debug</var>  !" );

"कुछ खास नहीं!" आप कहते हैं, एक अलग तरीके से सामान्य अनावश्यक वर्ग निर्माण। हां, मैं आपको जवाब दूंगा, यहां बहुत कुछ नहीं है, लेकिन सबसे अच्छा उपहार अभी तक नहीं बताया गया है।

विरासत

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

 //   ButtonClass      Debug classes.Class( "ButtonClass extends Debug", function() { //   var mouseState = 0, //   ,  DOM  button = null; //   function switchState( type ) { //     if ( type === 1 ) { mouseState++; //             button.style.backgroundColor = "green"; return; } else if ( type === 2 ) { mouseState--; } else { mouseState = 0; } //     button.style.backgroundColor = "red"; } return { //     constructor: function() { //     button = document.createElement( "SPAN" ); //      button.style.border = "1px solid blue"; button.style.color = "white"; button.style.textAlign = "center"; button.style.backgroundColor = "red"; button.style.borderRadius = "5px"; button.style.padding = "4px"; button.style.cursor = "default"; //      button.innerHTML = "  "; //    -   Debug //            //  ,   Debug      this.parent.constructor( function() { //      var self = this; //      DOM document.body.appendChild( button ); //     IE      button.onselectstart = function() { return false; } //     button.onmousedown = function( e ) { //     var e = e || window.event; //   ,    switchState( 1 ); //        //     . if ( e.preventDefault ) { e.preventDefault(); } else { e.returnValue = false; } } //      button.onmouseup = function() { //   , -  switchState( 2 ); //         if ( mouseState === 0 ) { //      //     self.click(); } } //       button.onmouseout = function() { //     ,    if ( mouseState && mouseState++ ) { //       switchState( 2 ); } } //        button.onmouseover = function() { //     ,   if ( mouseState && mouseState-- ) { //      switchState( 1 ); } } //          var handler = window.document.onmouseup; window.document.onmouseup = function( e ) { //        switchState(); //       if ( handler ) { handler.call( window, e ); } } }); }, //     DOM    node: function() { return button; }, //    ,       //          . click: function() { } } });

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

यह विरासत का एकमात्र तरीका नहीं है, इसे दूसरे तरीके से किया जा सकता है, उदाहरण के लिए:

 var Child = classes.Class( classes.Debug, {} );

जैसा कि हम देखते हैं कि बाल वर्ग कक्षाओं का एक उत्तराधिकारी बन गया है

अब हमारे लिखे बटन को आजमाते हैं

 //    var button = new classes.ButtonClass(); //        button.click = function() { //  write     Debug this.write( "         " ); } //         :) button.write( "  <var>classes.ButtonClass</var>  !" );

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

सेटर्स / गेटर्स

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

आइए हम अपने बटन वर्ग का विस्तार करें और कुछ प्रकार के सुपर क्लास बनाएं जिससे गेटर्स / सेटर के माध्यम से बटन टेक्स्ट को बदलना संभव हो सके। इस वर्ग में, हम किसी भी निर्माता या निजी तरीकों का उपयोग नहीं करेंगे, लेकिन केवल एक संपत्ति बनाएं जो एक मैजिक गेट्टर / सेटर द्वारा इंटरसेप्ट की जाएगी

 classes.Class( "SuperButtonClass extends ButtonClass", { //        / //  ,         //             //              $text: null, //  ,         //    property     ,   //       ,      //    set__: function( property, value ) { //             this.write( " SETTER   <var>" + property + "</var>   <var>" + value + "</var>" ); //    text if ( property === "text" ) { //        this.node().innerHTML = value; } }, //  ,           //  ,             // ,     . get__: function( property ) { //             this.write( " GETTER   <var>" + property + "</var>" ); //    text if ( property === "text" ) { //      return this.node().innerHTML; } } });

यहां हमने एक बटन के लिए एक सुपर क्लास बनाया है, जो साधारण रूप से टेक्स्ट प्रॉपर्टी के साथ बटन टेक्स्ट को बदलना संभव बनाता है, हमें जो मूल्य चाहिए, यह निश्चित रूप से सभी गेट्टर / सेटर विकल्प नहीं है, आप उन्हें किसी भी स्थिति में उपयोग कर सकते हैं, किसी भी प्रकार के डेटा के साथ, आदि। ।

अब देखते हैं कि हमें क्या मिला:

 //      var superButton = new classes.SuperButtonClass(); //  ,       //        superButton.write( "    : <var>" + superButton.text + "</var>" ); //              //         superButton.text = "   "; //           superButton.write( "  <var>classes.SuperButtonClass</var>  !" );

आप इस लिंक पर कार्रवाई में सभी वर्णित उदाहरण देख सकते हैं।

स्थैतिक गुण

यह विशेष रूप से स्थिर गुणों का वर्णन करने के लिए समझ में नहीं आता है, जैसा कि सभी जानते हैं, वे सामान्य रूप से सभी के लिए जाने जाते हैं:

 classes.SuperButtonClass.NEW_STATIC = " ";

अंत में, मैं इस तथ्य पर ध्यान आकर्षित करना चाहता हूं कि माता-पिता के तरीकों का जिक्र करते समय आपको संदर्भ को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता नहीं है। मुझे लगता है कि आपने ध्यान दिया कि मैं डिबग क्लास के कंस्ट्रक्टर को हमारे बटन वर्ग से कहता हूं, सामान्य कॉल द्वारा इस.परेंट.कंस्ट्रक्टर () में, डिबग क्लास में पहले से ही अंतिम वंशज, यानी क्लास सर्जक का संदर्भ होगा। आपको जाने-माने कॉल, आवेदन आदि के माध्यम से माता-पिता के तरीकों को कॉल करने की आवश्यकता नहीं है। बस इसे कॉल करें ।parent.parentMethod (args); और रिश्तेदार वंश के संदर्भ में काम करेंगे।

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

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

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

मैं यह भी जोड़ना चाहता हूं कि मूल उदाहरण इन वर्गों के लिए सही ढंग से प्रतिक्रिया नहीं देगा, इसलिए इन मामलों के लिए मैंने classes.instanceOf विधि को यह जांचने के लिए जोड़ा है कि क्या उदाहरण उस वर्ग से संबंधित है जिसकी हमें हमारे कॉल में आवश्यकता है:

 alert( classes.instanceOf( superButton, classes.Debug ) ); //  TRUE

इस लेख में उन सभी कक्षाओं के बारे में बताया गया है, भविष्य में संभवतः कुछ अतिरिक्त होंगे,
परिवर्तन और निश्चित रूप से बग को ठीक करता है। हालांकि विकास के दौरान उनकी पहचान नहीं की गई थी।

एक अच्छी क्लास बिल्डिंग, शुभकामनाएँ और आपका ध्यान और भविष्य की आलोचना के लिए धन्यवाद!

आप लिंक पर कक्षाओं के साथ काम करने के लिए पुस्तकालय डाउनलोड कर सकते हैं: http://code.spb-piksel.ru/?classes.latest.zip
मैं इसे Github: https://github.com/devote पर भी पोस्ट करूँगा जहाँ आप न केवल इसे डाउनलोड कर सकते हैं, बल्कि मेरी अन्य परियोजनाओं को भी डाउनलोड कर सकते हैं।

UPD: जैसा कि अशोट की टिप्पणियों में से एक है, जावास्क्रिप्ट में कक्षाओं के निर्माण के लिए पहले से ही आविष्कृत कई पुस्तकालय हैं। लेकिन यह पुस्तकालय उन सभी से अलग है जिसमें यह एक्सेसर्स (सेटर / गेट्टर) बनाने की क्षमता रखता है। मुझे उल्लिखित पुस्तकालयों में से किसी में भी समान कार्यान्वयन नहीं मिला। एक्सेसर्स न केवल आधुनिक ब्राउज़र में, बल्कि IE में भी 9 वें संस्करण से नीचे काम करते हैं। यह वही है जो मैं कक्षाओं को बनाने के अन्य कार्यान्वयन से अपने कार्यान्वयन को अलग करना चाहता हूं।

जावास्क्रिप्ट में कक्षाओं का उपयोग करना

वर्ग निर्माण

कक्षाओं के साथ काम करें

विरासत

सेटर्स / गेटर्स

स्थैतिक गुण

More articles: