2012-06-02 15 views
31

का उपयोग कर jQuery, अंडरस्कोर और बैकबोन लोड हो रहा है मैं RequJS 2.0.1 के साथ थोड़ा सा प्रयोग कर रहा हूं। मेरा लक्ष्य सही ढंग से jQuery, अंडरस्कोर और बैकबोन लोड करना है। मूल RequireJS doc से मैंने पाया कि लेखक जे। बुर्क ने (इस नई रिलीज में) new config option called shim जोड़ा।RequJS 2.0.1 और shim

तब मैं इस चीज यहाँ नीचे लिखा था:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing time</title> 
     <script data-main="scripts/main" src="scripts/require.js"></script> 
    </head> 
    <body> 
     <h1>Testing time</h1> 
    </body> 
</html> 

scripts/main.js

requirejs.config({ 
    shim: { 
     'libs/jquery': { 
      exports: '$' 
     }, 
     'libs/underscore': { 
      exports: '_' 
     }, 
     'libs/backbone': { 
      deps: ['libs/underscore', 'libs/jquery'], 
      exports: 'Backbone' 
     } 
    } 
}); 


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'], 

    function (jQueryLocal, underscoreLocal, backboneLocal) { 
     console.log('local', jQueryLocal); 
     console.log('local', underscoreLocal); 
     console.log('local', backboneLocal); 
     console.log('global', $); 
     console.log('global', _); 
     console.log('global', Backbone); 
    } 
); 

सब कुछ काफी अच्छा काम करने लगता है, लेकिन मैं लग रहा है कि मैं कुछ याद कर रहा हूँ है , मुझे पता है कि AMDed jQuery और अंडरस्कोर का संस्करण है, लेकिन यदि से टप इतना आसान है कि मुझे समझ में नहीं आता कि मुझे उनका उपयोग क्यों करना चाहिए।

तो, क्या यह सेटअप सही है या मुझे कुछ याद आ रहा है?

+0

'json2' के बारे में कैसे? क्या हमें भी इसकी ज़रूरत है? – Henry

उत्तर

32

यदि आपको मॉड्यूल घोषित करने के लिए लाइब्रेरी पहले से define() पर कॉल नहीं करता है तो आपको केवल "shim" कॉन्फ़िगरेशन का उपयोग करने की आवश्यकता है। jQuery पहले से ही ऐसा करता है, इसलिए आप इसे शिम कॉन्फ़िगरेशन से हटा सकते हैं। उपर्युक्त कोड इस तरह काम करेगा, लेकिन jQuery के लिए निर्यात शिम कॉन्फ़िगरेशन को अनदेखा कर दिया जाएगा क्योंकि चिमटा काम करने से पहले jQuery define() पर कॉल करेगा।

शिम साथ कमियां एक मॉड्यूल को परिभाषित करने के लिए स्क्रिप्ट कॉल define() होने बनाम:

  1. यह कम पोर्टेबल/विश्वसनीय है: हर डेवलपर शिम config करते हैं, और पुस्तकालय परिवर्तनों का ट्रैक रखने की जरूरत है। यदि पुस्तकालय लेखक पुस्तकालय में इनलाइन करता है, तो सभी को लाभ अधिक कुशलता से प्राप्त होते हैं। umdjs/umd पर कोड टेम्पलेट्स उस कोड परिवर्तन में मदद कर सकते हैं।

  2. कम इष्टतम कोड लोडिंग: वास्तविक लाइब्रेरी लोड करने से पहले शिम कॉन्फ़िगरेशन शिम deps लोड करके काम करता है। तो यह समानांतर की तुलना में थोड़ा अधिक अनुक्रमिक लोडिंग है। यह तेज़ है यदि सभी स्क्रिप्ट समानांतर में लोड की जा सकती हैं, जो संभव है जब define() का उपयोग किया जाता है। यदि आप अंतिम तैनाती के लिए बिल्ड/ऑप्टिमाइज़ेशन करते हैं और सभी स्क्रिप्ट को एक स्क्रिप्ट में जोड़ते हैं, तो यह वास्तव में नकारात्मक नहीं है।

8

तुम क्या कर रहे सही है, लेकिन jQuery क्योंकि यह एक AMD (अतुल्यकालिक मॉड्यूल परिभाषा) मॉड्यूल का निर्यात करता है शिम config में होने की जरूरत नहीं है। अंडरस्कोर ने इसे जोड़ने के तुरंत बाद AMD/Requ.js के लिए अपना समर्थन हटा दिया, देखें: Why underscore.js removed support for AMD

शिम पुस्तकालयों का उपयोग करने की सुविधा के रूप में लक्षित है जो एएमडी मॉड्यूल निर्यात नहीं करते हैं। यदि आप जिस लाइब्रेरी का उपयोग कर रहे हैं वह एएमडी का समर्थन करता है, या इसमें 2 संस्करण हैं (जो एएमडी का समर्थन करता है, और एक वैश्विक चर है) तो आपको एएमडी संस्करण का उपयोग करना चाहिए। आपको एएमडी संस्करण का उपयोग उसी कारण से करना चाहिए जिससे आप पहले स्थान पर एएमडी का उपयोग करेंगे और क्योंकि पुस्तकालय में इसके स्रोत में requ.js (या Almond) शामिल हो सकता है और आपके प्रोजेक्ट में अनावश्यक फ़ाइल आकार जोड़ देगा।

0

क्या आप वास्तव में मूल उदाहरण में "shimming" jquery से बच सकते हैं (जहां jquery का पथ 'libs/jquery' पर सेट है), क्योंकि jquery ने अपने amd मॉड्यूल परिभाषा में "jquery" नाम जोड़ा है?

परिभाषित करें ("jquery", [], फ़ंक्शन() {वापसी jQuery;});

मेरा अनुभव यह है कि आपको jquery.js को बेसुरल निर्देशिका में रखने की आवश्यकता है ताकि jquery amd मॉड्यूल अपेक्षित रूप से परिभाषित किया जा सके, या मूल उदाहरण में "shim" जैसा हो।