सारणी jQuery

Nicholas Zakas और Addy Osmani द्वारा इन वार्ता में वे अंतर्निहित आधार पुस्तकालयों से आवेदन को कम करने के लिए बड़े पैमाने पर जावास्क्रिप्ट अनुप्रयोगों का निर्माण करते समय एक सैंडबॉक्स के रूप में मुखौटा पैटर्न का उपयोग करने के विचार पर चर्चा करते हैं।सारणी jQuery

यह decoupling सिद्धांत में आपको अपने आवेदन मॉड्यूल को फिर से लिखने के बिना बेस लाइब्रेरी को स्विच करने की अनुमति देगा। हालांकि अभ्यास में यह लागू करना अधिक कठिन लगता है।

इस प्रस्तावित आर्किटेक्चर, जैसे कि AuraJS के ठोस कार्यान्वयन हैं। हालांकि स्रोत को देखने से ऐसा लगता है कि सैंडबॉक्स में अभी भी कुछ तरीकों से jQuery ऑब्जेक्ट्स लौटकर रिसाव अबास्ट्रक्शन हैं।

मैं विशेष रूप से AuraJS से चिंतित नहीं हूं, लेकिन इतनी अधिक कार्यक्षमता खोए बिना jQuery जैसी लाइब्रेरी को सारणी बनाने की कोशिश करने की सामान्य अवधारणा।

उदाहरण के तौर पर, मेरा मुखौटा/सैंडबॉक्स में एक डोम विधि .find(selector) है। मैं यह क्या वापस कर सकती है के लिए 3 विकल्प के बारे में सोच सकते हैं:

एक jQuery वस्तु - यह लेने वाली मॉड्यूल में बाहर jQuery का रिसाव करेगा।
एक कच्चा डोम तत्व - कार्यक्षमता का नुकसान, कोई भी वास्तव में इसके साथ काम करना नहीं चाहता! कोई चेनिंग नहीं
एक कस्टम jQuery-like wrapper - काफी जटिल हो सकता है, लेकिन आदर्श समाधान की तरह लगता है।

तो मेरे सवाल है, कैसे हैं आप सार बहुत अधिक कार्यक्षमता खोने के बिना jQuery की तरह एक पुस्तकालय, ऐसी है कि वह कम से कम प्रयास के साथ भविष्य में कुछ बिंदु पर बदला जा सकता है?

स्रोत

2013-04-16 Brett Postin

jQuery आंतरिक रूप से काफी जटिल है, जिससे एक अमूर्तता बनती है जैसे कि इसे किसी भी (या यहां तक कि एक) द्वारा प्रतिस्थापित किया जा सकता है, अन्य पुस्तकालय बेहद मुश्किल लगता है। और बात क्या है? यदि आपको लगता है कि आप भविष्य में पुस्तकालयों को स्वैप करना चाहते हैं, तो शायद आपको उस स्थान का उपयोग नहीं करना चाहिए जिसका आप पहले उपयोग कर रहे हैं। – RobG

@RobG मैं मानता हूं कि यह मुश्किल लगता है, यही कारण है कि मैं सवाल पूछ रहा हूं। हालांकि मेरे मुकाबले कहीं ज्यादा स्मार्ट लोग इन प्रस्तावों को बना रहे हैं और उनके लिए वैध कारण उपलब्ध करा रहे हैं (प्रदान की गई बातचीत के लिंक देखें)। –

निकोलस के आर्किटेक्चर में, यदि आप बेस लाइब्रेरी बदलते हैं, तो आपको एप्लिकेशन कोर को फिर से लिखना होगा। एक बार जब आप कोर से ऊपर हो जाते हैं, तो आप लाइब्रेरी का उपयोग करने वाले कोड को नहीं लिख रहे हैं। यदि आप jQuery का उपयोग कर रहे हैं, तो मॉड्यूल लिखने वाला व्यक्ति ** कोई ** jQuery नहीं लिखता है। – RobG

मुझे लगता है कि आप अधिक मॉड्यूलर कोड लिखने के बारे में पूछ रहे हैं, लेकिन jquery इसके लिए एक अच्छा मामला नहीं है।

अतुल्यकालिक मॉड्यूल परिभाषा http://addyosmani.com/writing-modular-js/

स्रोत

2013-04-16 09:14:05

कृपया दी गई वार्ता के लिंक देखें। यह मॉड्यूलर कोड लिखने से भी अधिक है। –

यहाँ एक वास्तुकला के रूप में मॉड्यूल का उपयोग करने का एक बहुत ही सरल उदाहरण है:

<!DOCTYPE html> 
<title>Module play</title> 
<body> 
<script> 

// myCore provides all functionality required by modules 
// Could use a library in here 
var myCore = { 

    getContainer: function() { 
    // code in here to find a suitable container in which to put widgets 
    // This is where different client capabilities will be tested to ensure the 
    // widget behaves in it's user agent context - desktop, phone, tablet, pad, etc. 

    // very simple shortcut 
    return { 
      element: document.body, 

      // This function could use a general purpose library 
      add: function(widget) { 
       this.element.appendChild(widget.getElement()); 
      } 
    }; 

    }, 

    // This function could use a general purpose library 
    getNewWidget: function() { 
    var element = document.createElement('div'); 

    return { 

     getElement: function() { 
     return element; 
     }, 

     display: function(text) { 

     // Tightly couple to itself or not? 
     this.getElement().innerHTML = '<em>' + text + '</em>'; 

     // or 
     element.innerHTML = '<em>' + text + '</em>'; 
     } 
    } 
    } 
}; 

// Missing sandbox layer... 

// Add a module - only uses myCore API (access should be controlled by 
// the sandbox), does not deal with underlying library or host objects 
(function() { 

    // Get a container to add a widget too 
    var container = myCore.getContainer(); 

    // Create a widget 
    var widget = myCore.getNewWidget(); 

    // Add the widget to the container 
    container.add(widget); 

    // Give something to the widget to display 
    widget.display('Hello World'); 

}()); 

</script> 
</body>

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

(function() { 
    var container, widget; 

    if (!myCore) return; 

    if (myCore.getContainer) { // Some would include an isCallable test too 

     container = myCore.getContainer(); 
    } 

    // getWidget could be a method of container instead so that 
    // everything you need is either a method or property of container 
    // or widget 
    if (myCore.getWidget) { 
     widget = myCore.getWidget(); 
    } 

    ... 
}

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

स्रोत

2013-04-17 03:53:14 RobG

इस विस्तृत उत्तर के लिए धन्यवाद, मैं देखता हूं कि आप कहां से आ रहे हैं। हालांकि ऐसा लगता है कि आप अनिवार्य रूप से विजेट कार्यक्षमता और व्यवहार को मूल में दबा रहे हैं, वास्तविक मॉड्यूल को वास्तव में गूंगा उपभोक्ताओं के रूप में छोड़कर। मुझे लगता है कि यह बहुत ही सीमित है और ऐसा नहीं लगता कि यह एक एंटरप्राइज़ एप्लिकेशन के लिए स्केल करेगा। मेरी समझ यह है कि कोर ** कार्यक्षमता ** (यानी डोम मैनिपुलेशन/AJAX/मध्यस्थ) के सेट प्रदान करना चाहिए जो बेस लाइब्रेरी कार्यान्वयन को छुपाते हैं और फिर एक सैंडबॉक्स के माध्यम से उजागर होते हैं जो मॉड्यूल के बीच एक सतत "गोंद" परत के रूप में कार्य करता है और कोर। –

निकोलस की बातचीत के 40/51/66 स्लाइड्स देखें। मॉड्यूल का सुझाव देने के लिए कुछ भी नहीं है कि डोम अपने दायरे में डोम को नियंत्रित नहीं कर सकता है। ऐसा करने के लिए कोर/सैंडबॉक्स से कुछ प्रकार के डोम हेरफेर "सेवा" की आवश्यकता होती है। मेरे मतलब के उदाहरण के लिए एडी की बात के 105-10 9 स्लाइड्स देखें। अनिवार्य रूप से सैंडबॉक्स को मॉड्यूल में "सेवाओं" का एक सेट प्रदान करना चाहिए। यह उन सेवा कॉलों का रिटर्न वैल्यू (यदि कोई है) है जो मुझे अमूर्त करना मुश्किल लगता है। –

[AuraJS] के लिए स्रोत भी देखें (https://github.com/aurajs/aura/tree/master/lib) (निकोलस के आर्किटेक्चर के एडी का कार्यान्वयन)। आप देखेंगे कि sand.js से सैंडबॉक्स कैसे बनाए जाते हैं, और जो मैं सैंडबॉक्स विधियों (मुख्य रूप से jQuery ऑब्जेक्ट्स) से वापस लौटा रहा है, में लीकी अबास्ट्रक्शन के रूप में देखता हूं। आपके समय बीटीडब्ल्यू के लिए धन्यवाद! –

सारणी jQuery

उत्तर

संबंधित मुद्दे