2012-01-04 11 views
6

में jQuery नाम का उपनाम नहीं कर सकता मैं एक आवश्यकताजेएस नोब हूं। जब मैं "require.config" का उपयोग करता हूं और jQuery से भिन्न नाम के साथ jQuery के लिए पथ शामिल करता हूं, तो परिणाम अपेक्षित नहीं होते हैं।RequJS में - पथ

मेरी समस्या को समझाने में सहायता के लिए यहां एक बहुत ही सरल उदाहरण है। फ़ाइलों की

संरचना

root 
├── Index.htm 
└── scripts 
    ├── libs 
    │   ├── jquery-1.7.1.js 
    │   └── require.js 
    ├── main.js 
    └── someModule.js 

index.htm

<html> 
<head> 
    <title>BackboneJS Modular app with RequireJS</title> 
    <script data-main="scripts/main" src="scripts/libs/require.js"></script> 
</head> 
<body> 
    <h3>BackboneJS is awesome</h3> 
</body> 
</html> 

यहाँ स्क्रिप्ट टैग संदर्भ लिपियों/libs में आवश्यकता होती है। जब आवश्यकताएं चलती हैं तो स्क्रिप्ट्स निर्देशिका में main.js नामक जावास्क्रिप्ट फ़ाइल निष्पादित की जानी चाहिए।

main.js

require.config({ 
    "paths": { 
      "mod1": "someModule" 
    } 
}); 
require(["mod1"], function (sm) { 
    console.log(sm.someValue); 
}); 

मेरे अनुभव में "mod1" जब तक कुछ भी हो सकता है क्योंकि यह require.config रास्ते में और विधि की आवश्यकता होती है में एक ही संदर्भित है।

someModule.js

define([], function() { 
    console.log(); 
    return { someValue: "abcd" }; 
}); 

बस संपूर्णता के लिए मैं someModule.js

कथित चंचलता तब होता है जब मैं JQuery शामिल शामिल थे।

निम्नलिखित main.js में मैंने कॉन्फ़िगरेशन और आवश्यकता विधि में jQuery जोड़ा।

main.js

require.config({ 
    "paths": { 
     "jquery": "libs/jquery-1.7.1" 
     ,"mod1": "someModule" 
    } 
}); 

require(["mod1", "jquery"], function (sm, $) { 
    console.log(sm.someValue); 
    console.log($); 
}); 
jQuery सब कुछ के अतिरिक्त के साथ

अभी भी काम करता है लगता है। "Console.log ($)" jQuery फ़ंक्शन लिखता है।

अब किकर। निम्नलिखित कोड में मैं दोनों रास्तों में "jQuery" से "jqueryA" बदल सकते हैं और आवश्यकता होती है

require.config({ 
    "paths": { 
     "jqueryA": "libs/jquery-1.7.1" 
     ,"mod1": "someModule" 
    } 
}); 

require(["mod1", "jqueryA"], function (sm, $) { 
    console.log(sm.someValue); 
    console.log($); 
}); 

अब "console.log ($)" शून्य लिखता है।

क्या इसकी अपेक्षा की जानी चाहिए? क्या कोई कारण है कि नाम jquery होना चाहिए, लेकिन mod1 के लिए यह कुछ भी हो सकता है?

मैं बिना किसी समस्या के काम कर सकता हूं, लेकिन यह समस्या विषम प्रतीत होती है। मुझे पता है कि मैं संयुक्त RequJS और jQuery फ़ाइल का उपयोग कर सकता हूं, लेकिन जब jQuery में एक अद्यतन होता है तो मैं नई jQuery को शामिल करने के लिए RequJS पर निर्भर नहीं होना चाहता हूं।

उत्तर

9

jQuery में 1.7 उन्होंने एएमडी लोडिंग का समर्थन करने का निर्णय लिया। ऐसा करने के लिए, यह 'jquery' नामक एक मॉड्यूल को परिभाषित करता है जो jQuery ऑब्जेक्ट के संदर्भ को वापस भेजता है। जब आप किसी अन्य नाम के साथ jquery के लिए अपना रास्ता परिभाषित करते हैं (जैसे 'jqueryA'), चीजें बिल्कुल तोड़ नहीं रही हैं जैसा कि आपको लगता है कि वे हैं।

jquery स्क्रिप्ट हमेशा स्वयं को 'jquery' नामक मॉड्यूल के रूप में परिभाषित करता है, जो आपके ऐप के लिए आवश्यक है।जब आपने अपना पथ शॉर्टकट 'jquery' और 'jquery' नाम दिया था, तो निर्भरता के रूप में लोड किया गया था, वास्तव में jquery-1.7.1.js द्वारा परिभाषित 'jquery' मॉड्यूल को संदर्भित करना आवश्यक था, जो सही संदर्भ को वापस भेजता है। जब आप अपने मॉड्यूल शॉर्टकट jqueryA को नाम देते हैं, तो अब आप एक अपरिभाषित संदर्भ का संदर्भ दे रहे हैं, क्योंकि jquery स्क्रिप्ट स्वयं 'jquery' नामक मॉड्यूल को छोड़कर संदर्भ को वापस नहीं भेजती है। यह मूर्खतापूर्ण है, मुझे पता है।

jquery स्क्रिप्ट मॉड्यूल को 'jquery' के रूप में परिभाषित करता है और उम्मीद करता है कि आप इसे 'jquery' के रूप में संदर्भित करेंगे।

Use requirejs and jquery, without clobbering global jquery?

+0

धन्यवाद! इस ज्ञान के साथ मैंने अपना खुद का jquery/requjs मुद्दा हल किया। – bunnyhero

2

मुझे विश्वास है कि मुझे अपने मुद्दे का उत्तर मिला है।

वैकल्पिक रूप से एएमडी को परिभाषित() मॉड्यूल रजिस्टर करने के लिए https://github.com/documentcloud/underscore/pull/338#issuecomment-3253751

यहाँ पिछले लिंक से एक उद्धरण है कहते हैं। हालांकि यह अंडरस्कोर से संबंधित है, मुझे विश्वास है कि यह JQuery से भी संबंधित है।

requirejs.config ({ पथ:

सभी एएमडी लोडर एक आंशिक पथ के लिए एक मॉड्यूल आईडी मानचित्रण की अनुमति है, आमतौर पर विन्यास कहा जाता है 'पथ', तो क्या आप करना चाहते हैं अंडरस्कोर: 'जेएस/libs/underscore-1.2.3.min' }}); आवश्यकता है (['अंडरस्कोर'], फ़ंक्शन() {}); चूंकि अंडरस्कोर का उपयोग अन्य उच्च स्तरीय मॉड्यूल द्वारा किया जाता है, जैसे रीढ़ की हड्डी, एक आम निर्भरता नाम को अंडरस्कोर पर एक सामान्य निर्भरता को संवाद करने के लिए उपयोग करने की आवश्यकता है, और यह निर्भरता 'underscore' को कॉल करने के लिए समझ में आता है। पथ कॉन्फ़िगरेशन उस विशिष्ट URL पर मैपिंग करने का एक तरीका देता है जिसे आप उस निर्भरता के लिए उपयोग करना चाहते हैं।

यहां एक रान है जो एएमडी और नाम मॉड्यूल के साथ मुद्दों का वर्णन करने का बहुत अच्छा काम करता है।

एएमडी मॉड्यूल नामित परिभाषाओं के साथ। क्या लाभ के लिए इतना दर्द? लिंक से http://dvdotsenko.blogspot.com/2011/12/amd-modules-with-named-defines-so-much.html

उद्धरण ऊपर

मॉड्यूल ठीक से उपभोग करने के लिए एक ही रास्ता है, एक कॉन्फ़िग फ़ाइल में हार्ड कोड जैसा कि इसके नाम फिर को अंत डेवलपर के लिए मजबूर करने की जाती है पर खपत बिंदु, (केवल उस सम्मान में) क्यों समय, प्रयास और हार्ड कोड को मॉड्यूल में पहली जगह में नाम दें (अकेले उन देवताओं को दुःख दें जो विभिन्न नाम के तहत मॉड्यूल को लोड करने की आवश्यकता है/वैकल्पिक स्रोतों से)?

इस पोस्ट में जेम्स बर्क नाम मॉड्यूल का उपयोग न करने की सिफारिश करता है। https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon

आम तौर पर आप एक नामित मॉड्यूल पंजीकरण करना होगा नहीं, लेकिन इसके बजाय एक गुमनाम मॉड्यूल के रूप में रजिस्टर:

यह आपके कोड के उपयोगकर्ताओं को अपने परियोजना लेआउट के लिए उपयुक्त एक नाम के अपने पुस्तकालय का नाम बदलने की अनुमति देता है। यह उन्हें आपके मॉड्यूल को एक निर्भरता नाम पर मैप करने की अनुमति देता है जिसका उपयोग अन्य पुस्तकालयों द्वारा किया जाता है। उदाहरण के लिए, 'jquery' मॉड्यूल आईडी के लिए मॉड्यूल ड्यूटी को पूरा करने के लिए Zepto.js को मैप किया जा सकता है।

• jQuery • रेखांकित

अपवाद चूसना:

कुछ उल्लेखनीय अपवाद कि नामित मॉड्यूल के रूप में पंजीकृत है कर रहे हैं। अपवादों को नोबस के लिए मुश्किल बनाता है।

+0

मेरा उत्तर देखें। उम्मीद है कि यह आपके लिए चीजों को साफ़ कर देगा। स्पष्टीकरण के लिए –

4

यहाँ मेरी वैकल्पिक हल, कार्यान्वयन मैं पढ़ के आधार पर दिया गया है: यदि आप किसी अन्य नाम के रूप में इसे संदर्भ (और एक बोनस के रूप में, यह अन्य लोड jQuery पुस्तकालयों के साथ परस्पर विरोधी से रखने के लिए) चाहते हैं, इस विधि का उपयोग आवश्यकताएँ। जेएस 2.1.0:

define.amd.jQuery = false; 

require.config({ 
    ... 

    shim: { 
     "jQuery-1.8.2": { 
      exports: "jQuery" 
     } 
    } 

    ... 
});