ładowanie wtyczek jQuery z wymaganiem js

Question

Jestem nowy, aby wymagać js, a problemem jest to, że tak naprawdę nie rozumiem, jak załadować wtyczki jQuery.

Chciałbym załadować wiele wtyczek, ale mam już problemów z pierwszego, ze wybrali plugin

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(); 
}); 

moje testy html

<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> 

i kiedy spróbuj go załadować Otrzymuję następujący błąd:

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(); 

Czy ktoś mógłby wskazać, co robię źle?

Answer 1

Podczas ładowania zależności program requirejs ładuje je wszystkie jednocześnie. Kiedy dostajesz ten błąd, oznacza to, że twoja wtyczka jest ładowana i wykonywana przed załadowaniem jQuery. Musisz ustawić shim, aby powiedzieć requirejs, że wtyczka zależy od już załadowanego jQuery.

Ponadto, większość wtyczek jQuery nie jest AMD świadoma, więc powinieneś również powiedzieć wymagającym programistom, na co zwracać uwagę, aby skrypt był poprawnie załadowany. Możesz to zrobić, wpisując "eksport" w swoim podkładce.

Nie wierzę, że jqueryUI jest również świadomy AMD, więc wpis w shim jest prawdopodobnie również w tym celu. Nie używam bootstrap, więc nie jestem pewien, czy będziesz czegoś potrzebować.

Oto podkładka dla wtyczki i jQueryUI, dodać do swojej rozmowy do requirejs.config:

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

można jeszcze pewne problemy, że nie jestem jeszcze widzenie, ale to powinno przynajmniej dostać posuwasz się naprzód. Warto również przeczytać: http://requirejs.org/docs/api.html#config-shim. Zdecydowanie polecam przeczytanie całej strony, jeśli jeszcze tego nie zrobiłeś.

Answer 2

Witam Chciałbym państwu powiedzieć, że jeśli chcesz dołączyć skrypty inne niż AMD (które nie zawierają funkcji define(), użyjemy shim config. Chciałbym wyjaśnić na prostym przykładzie wtyczki jquery hightlight.

będzie to plik konfiguracyjny, gdzie można zdefiniować wszystkie ścieżki

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" 

    } 

Teraz w module, który zaczyna się od zdefiniowania, m.in. jqHighlight tak

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

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

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

}); 

Podobnie inne moduły non AMD zostaną uwzględnione i używane. Dzięki