अपनी जावास्क्रिप्ट संरचित और साफ (ओओ प्रोग्रामर के रूप में)

Question

मैं हाल ही में जावास्क्रिप्ट, एचटीएमएल 5, क्रोम एक्सटेंशन, jQuery, और सभी अच्छी चीजों के साथ खेल रहा हूं। मैं जावास्क्रिप्ट की संभावनाओं के साथ अब तक बहुत प्रभावित हूं, केवल एक चीज जिसके साथ मैं संघर्ष करता हूं वह मेरे कोड को संरचित करता है और इसे साफ रखता है। इससे पहले कि मैं इसे जानता हूं, कार्य पूरे स्थान पर बिखरे हुए हैं। मैंने हमेशा अपना प्रोग्रामिंग ऑब्जेक्ट उन्मुख तरीके से किया है (सी ++ और सी #), और मुझे लगता है कि मैं चीजों को साफ रखने में सक्षम नहीं हूं। ऐसा लगता है कि मैं हमेशा स्थिर उपयोग कार्यों के समूह के साथ समाप्त होता हूं, क्या मैं सी # में 'सोच' था।

मैं जावास्क्रिप्ट में वस्तुओं पर कुछ जानकारी ढूंढ रहा हूं, लेकिन यह seems to come down to wrapping functions in functions. क्या यह आपके कोडबेस को संरचित करने का एक अच्छा तरीका है? सतह पर यह थोड़ा सा हैक लगता है। या ओओ मानसिकता के लिए चीजों को साफ रखने के अन्य तरीके हैं?

Answer 1

सबसे अच्छा OOP जावास्क्रिप्ट लाइब्रेरियों बाहर गूगल के बंद के पुस्तकालय http://closure-library.googlecode.com/svn/docs/index.html

यह एक तरह से संरचित है कि OOP प्रोग्रामर खासकर यदि आप एक जावा/सी # पृष्ठभूमि से आते हैं के साथ परिचित हो जाएगा है में से एक। किसी भी फाइल के स्रोत कोड पर नज़र डालें और इसे ओओपी प्रोग्रामर के रूप में घर पर सही महसूस करना चाहिए। http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_canvasgraphics.js.source.html

Answer 2

मैंने कभी इसका व्यक्तिगत रूप से उपयोग नहीं किया है, लेकिन इस सवाल के लिए कई बार backbone.js को संदर्भित किया है। देखें में: http://documentcloud.github.com/backbone/

Answer 3

समान आवश्यकताओं को पूरा करने के लिए डिज़ाइन किए गए कुछ ढांचे का उपयोग करना एक अच्छा विचार हो सकता है।

लेकिन वहाँ कुछ चीजें आप वास्तव में कुशल होने का पालन करना चाहिए रहे हैं:

• जावास्क्रिप्ट में बंद के बारे में याद है और भूल नहीं है var के बारे में कीवर्ड,
• उपयोग कॉलबैक जहां संभव और उचित, जावास्क्रिप्ट द्वारा अतुल्यकालिक है प्रकृति,

Answer 4

जावास्क्रिप्ट के बारे में याद रखने का एक महत्वपूर्ण पहलू यह है कि यह एक प्रोटोटाइपिकल भाषा है। कार्य वस्तुएं हो सकती हैं, और वस्तु पर कुछ भी लगाया जा सकता है, अक्सर प्रक्रिया में संबंधित वस्तुओं को प्रभावित करता है। इस वजह से किसी ऑब्जेक्ट को 'विस्तारित' करने का कोई आधिकारिक तरीका नहीं है। यह एक अवधारणा है कि मुझे अभी भी कठिन समय समझ है।

कुछ अपवादों के साथ जावास्क्रिप्ट 'किसी भी अन्य ओओपी भाषा की तरह' कार्य करता है, अर्थात् वस्तुओं का विस्तार (http://jsweeneydev.net84.net/blog/Javascript_Prototype.html)।

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

extend : function(SuperFunction, SubFunction) { 

    //'Extends' an object 

    SubFunction.prototype = new SuperFunction(); 
    SubFunction.prototype.constructor = SubFunction; 
}, 

इस कड़ी में कुछ समस्याएं और गलत धारणाओं को स्पष्ट कर सकता है: http://www.coolpage.com/developer/javascript/Correct%20OOP%20for%20Javascript.html

व्यक्तिगत रूप से, मैं विरोधी ढांचे हो जाते हैं, और मैं नहीं देखा है एक रूपरेखा अभी तक कि करने के लिए प्रोग्रामर के लिए मजबूर नहीं करता है वैसे भी इस संबंध में अपनी प्रोग्रामिंग शैली में काफी बदलाव करें। यदि आपको कोई मिल जाए तो आपको अधिक शक्ति मिलती है, लेकिन संभावना है कि आपको वास्तव में एक की आवश्यकता नहीं होगी।

मेरी सबसे अच्छी सलाह है कि जावास्क्रिप्ट की प्रोटोटाइपिकल शैली को अनुकूलित करने की कोशिश करें, इसके बजाय पुरानी पद्धतियों को बल दें। मुझे पता है कि यह मुश्किल है; मैं अभी भी खुद की कोशिश कर रहा हूँ।

शुभकामनाएं diggingforfire।

Answer 5

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

var FancyWidget = (function($) { 
    // jQuery is passed as an argument, not referred to directly 
    // So it can work with other frameworks that also use $ 

    // Utility functions, constants etc can be written here 
    // they won't escape the enclosing scope unless you say so 
    function message(thing) { 
     alert("Fancy widget says: " + thing); 
    } 

    // Make a simple class encapsulating your widget 
    function FancyWidget(container) { 
     container = $(container); // Wrap the container in a jQuery object 
     this.container = container; // Store it as an attribute 

     var thisObj = this; 
     container.find("#clickme").click(function() { 
      // Inside the event handler, "this" refers to the element 
      // being clicked, not your FancyWidget -- so we need to 
      // refer to thisObj instead 
      thisObj.handleClick(); 
     }); 
    } 

    // Add methods to your widget 
    FancyWidget.prototype.handleClick = function() { 
     this.container.find("#textbox").text("You clicked me!"); 
     message("Hello!"); 
    }; 

    return FancyWidget; // Return your widget class 
         // Note that this is the only thing that escapes; 
         // Everything else is inaccessible 
})(jQuery); 

अब, के बाद यह सब कोड निष्पादित करता है, तो आप एक वर्ग, FancyWidget, जिसे फिर आप का दृष्टांत कर सकते हैं के साथ समाप्त।

आप इस तरह से कई कक्षाएं भी परिभाषित कर सकते हैं; return FancyWidget उपयोग करने के बजाय, आप एक वस्तु शाब्दिक बजाय लौट सकते हैं:

return { 
     FancyWidget: FancyWidget, 
     Frobnicator: Frobnicator, 

     // Nested namespaces! 
     extra: { 
      thing: thing, 
      blah: blah 
     } 
    };