jquery प्लगइन्स को जरूरी जेएस

Question

लोड करने के लिए मैं जेएस की आवश्यकता के लिए नया हूं, और समस्या यह है कि मैं वास्तव में समझ नहीं पा रहा हूं कि jQuery प्लगइन्स कैसे लोड करें।

मैं कई प्लग इन लोड करने के लिए चाहते हैं, लेकिन मैं पहले से ही प्लगइन चुना

js

//site full url 
var siteUrl = window.location.protocol+"//"+window.location.host + "/"; 

requirejs.config({ 
    baseUrl: siteUrl + "assets/js", 

    paths: { 
     "jquery": "libs/jquery", 
     "jquery-ui": "libs/jquery-ui", 
     "bootstrap": "libs/bootstrap", 
     "scripts": "scripts", 
     "plugins": "plugins", 
    }, 
}); 

requirejs(['jquery', 'jquery-ui', 'bootstrap', 'plugins/chosen'], 
function($, chosen){ 
    $('.chzn-select').chosen(); 
}); 

अपने परीक्षण एचटीएमएल

<select data-placeholder="Choose a country..." style="width:350px;" class="chzn-select"> 
    <option value="">Test</option> 
    <option value="">Test</option> 
    <option value="">Test</option> 
</select> 

और जब मैं के साथ, पहले एक साथ कोई समस्या है इसे लोड करने का प्रयास करें मुझे निम्न त्रुटि मिलती है

TypeError: $ is not a function 


...tion(){"in"==self.hoverState&&self.show()},self.options.delay.show),void 0):self... 

bootstrap.js (line 6) 

TypeError: $(...).chosen is not a function 


$('.chzn-select').chosen(); 

क्या कोई यह बता सकता है कि मैं क्या गलत कर रहा हूं?

Answer 1

जब आप अपनी निर्भरताओं को लोड कर रहे हैं, तो आवश्यकताएं उन्हें सभी समवर्ती रूप से लोड करती हैं। जब आपको वह त्रुटि मिल रही है, तो इसका मतलब है कि jQuery को लोड होने से पहले आपकी प्लगइन लोड और निष्पादित की जा रही है। आपको requjs को बताने के लिए एक शिम सेट अप करने की आवश्यकता है कि प्लगइन पहले से ही लोड होने पर jQuery पर निर्भर करता है।

इसके अलावा, अधिकांश jQuery प्लगइन्स एएमडी से अवगत नहीं हैं, इसलिए आप यह भी कहना चाहेंगे कि स्क्रिप्ट को सही तरीके से लोड करने के लिए क्या देखना है। आप इसे अपने शिम में 'निर्यात' प्रविष्टि के साथ कर सकते हैं।

मुझे विश्वास नहीं है कि jqueryUI एएमडी-जागरूक है, इसलिए शिम में एक प्रविष्टि शायद इसके लिए भी है। मैं बूटस्ट्रैप का उपयोग नहीं करता, इसलिए मुझे यकीन नहीं है कि आपको वहां कुछ भी चाहिए।

यहाँ अपने प्लगइन और jQueryUI के लिए एक परत है, अपने कॉल करने के लिए इस जोड़ने requirejs.config रहे हैं:

shim: { 
    'plugins\chosen': { 
     deps: [ 'jquery' ], 
     exports: 'jQuery.fn.chosen' 
    }, 
    'jquery-ui': { 
     deps: [ 'jquery' ], 
     exports: 'jQuery.ui' 
    } 
} 

तुम अब भी कुछ मुद्दों है कि मैं अभी तक नहीं दिखाई दे रहा है, लेकिन यह कम से कम मिलना चाहिए आप आगे बढ़ रहे हैं। इसके अलावा, यह शायद पढ़ने के लायक है: http://requirejs.org/docs/api.html#config-shim। यदि आप अभी तक नहीं हैं तो मैं निश्चित रूप से उस पूरे पृष्ठ को पढ़ने की अनुशंसा करता हूं।

Answer 2

हाय मैं आपको यहां बताना चाहता हूं कि यदि आप गैर एएमडी स्क्रिप्ट्स (जिसमें परिभाषित() कॉल शामिल नहीं है) शामिल हैं, तो हम शिम कॉन्फ़िगरेशन का उपयोग करते हैं। मैं jquery हाइटलाइट प्लगइन के एक साधारण उदाहरण के साथ समझाऊंगा।

यह आपके कॉन्फ़िग फ़ाइल जहां सभी रास्ते

paths:{ 
    "jquery":"/path/to/jquery", 
    "jgHighlight":"/path/to/jquery.highlight" 
}, 
    shim:{ 

     deps:["jquery"], // jquery.highlight dependeps on jquery so it will load after jquery has been loaded 
     exports:"jqHighlight" 

    } 

अब एक मॉड्यूल जो परिभाषित के साथ शुरू होता में परिभाषित किया जाएगा, इस तरह

define(["requireModulesArray","jgHighlight"],function(requiredModulesAliasArray){ 

    // no need to include any alias for jgHighlight in function(...) 
    //use it like this now 

    $("#divT").highlight("someText"); 

}); 

इसी तरह अन्य गैर AMD मॉड्यूल शामिल किया जाएगा jqHighlight शामिल और इस्तेमाल किया। धन्यवाद