問題描述

我是新手，需要js，問題是我不太了解如何加載jQuery插件.

I am new to require js, and the problem is I don't really understand how to load jQuery plugins.

我想加載多個插件，但第一個插件已經出現問題，選擇的插件

I would like to load multiple plugins but I already have problems with the first one, with the chose plugin

js

//site full url
var siteUrl = window.location.protocol+"http://"+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();
});

我的測試 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>

當我嘗試加載它時，我收到以下錯誤

and when I try to load it I get the following error

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

誰能指出我做錯了什么?

Could someone please point out what I am doing wrong?

推薦答案

當你加載你的依賴時，requirejs 會同時加載它們.當您收到該錯誤時，這意味著您的插件在加載 jQuery 之前已被加載和執行.您需要設置一個 shim 來告訴 requirejs 該插件依賴于已加載的 jQuery.

When you're loading your dependencies, requirejs loads them all concurrently. When you're getting that error, it means that your plugin is being loaded and executed before jQuery has been loaded. You need to set up a shim to tell requirejs that the plugin depends on jQuery already being loaded.

此外，大多數 jQuery 插件不支持 AMD，因此您還需要告訴 requirejs 尋找什么來告訴它正確加載的腳本.您可以通過 shim 中的導出"條目來執行此操作.

Also, most jQuery plugins are not AMD aware, so you'll also want to tell requirejs what to look for to tell it the script loaded correctly. You can do this with an 'exports' entry in your shim.

我也不相信 jqueryUI 是 AMD 感知的，所以在 shim 中的一個條目可能也是為了這個.我不使用引導程序，所以我不確定你是否需要那里的任何東西.

I don't believe jqueryUI is AMD-aware either, so an entry in the shim is probably in order for that too. I don't use bootstrap, so I'm not sure if you'll need anything there.

這是您的插件和 jQueryUI 的 shim，將其添加到您對 requirejs.config 的調用中:

Here's a shim for your plugin and jQueryUI, add this to your call to requirejs.config:

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

您可能還有一些我還沒有發現的問題，但這至少應該能讓您繼續前進.此外，這可能值得一讀:http://requirejs.org/docs/api.html#config-shim.如果您還沒有閱讀，我絕對會建議您閱讀整頁.

You may still have some issues that I'm not seeing yet, but this should at least get you moving forward. Also, this is probably worth a read: http://requirejs.org/docs/api.html#config-shim. I would definitely recommend reading that whole page if you haven't yet.

這篇關于使用 require js 加載 jquery 插件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！