使用require js加载jquery插件 [英] loading jquery plugins with require js

问题描述

我是新手，需要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+"//"+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();
});

my test html

my test 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之前正在加载并执行。你需要设置一个垫片来告诉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要找什么来告诉它正确加载的脚本。您可以使用垫片中的导出条目来执行此操作。

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感知的，所以垫片中的条目可能在订购也是如此。我不使用bootstrap，所以我不确定你是否需要任何东西。

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的垫片，把它添加到你的通话中to requirejs.config：

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

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

你可以还有一些我还没有看到的问题，但这至少应该让你前进。此外，这可能值得一读： http://requirejs.org/docs/api。 HTML＃配置-垫片。如果你还没有，我肯定会建议阅读整页。

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插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！