4

我是 RequireJS 的新手，由于某种原因，我无法通过 CDN 加载脚本。

我的代码：

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

// requirejs config
requirejs.config({
    baseUrl: siteUrl + "assets/js/",
    paths: {
        "plugins": "plugins",
        "scripts": "scripts",
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min",
        "jquery-ui": "https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min",
        "bootstrap": "https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min",
    }
});

require(['jquery', 'jquery-ui', 'bootstrap', 'plugins/chosen'], function($, chosen){

/*
    loading global selectors and variables
*/ 

//chosen for select boxes
$(".chzn-select").chosen();

});

并且 jquery 无法加载。我收到以下错误：

ReferenceError: jQuery is not defined
[Megszakítás ennél a hibánál]   

...h"):this.container.removeClass("chzn-container-single-nosearch")),e="",s=this.re...

chosen.js (1. sor)

ReferenceError: jQuery is not defined


TypeError: $(...).chosen is not a function
$(".chzn-select").chosen();

请有人指出我做错了什么？

PS：我正在定义站点 URL，因为我使用的是 Laravel，如果没有该定义，它会在基本 URL 中包含 URL 段。

4

3 回答 3

4

Brandon 是正确的，而我认为 shim 无法解决问题

来自RequireJS 文档：

不要在构建中混合 CDN 加载和 shim 配置。示例场景：您从 CDN 加载 jQuery，但使用 shim 配置加载依赖于 jQuery 的 Backbone 的库存版本。进行构建时，请确保在构建文件中内联 jQuery，并且不要从 CDN 加载它。否则，Backbone 将内联在构建的文件中，并在加载 CDN 的 jQuery 加载之前执行。这是因为 shim 配置只是延迟加载文件，直到加载依赖项，但不执行任何自动包装定义。构建后，依赖项已经内联，shim 配置不能延迟执行非define()'d 代码直到以后。define()'d 模块在构建后确实与 CDN 加载的代码一起工作，因为它们正确地将其源代码包装在定义工厂函数中，该函数在加载依赖项之前不会执行。所以教训：shim config 是非模块化代码、遗留代码的权宜之计。define()'d 模块更好。

简而言之，我相信当您拥有不是 requirejs 的模块并且它们依赖于其他一些模块（jQuery）时，您将无法在 RequireJS 中使用 CDN 中的 jQuery。

在这种情况下，我同意 Brandon 的建议，直接在页面上要求它们可能会更好。

于 2013-06-29T13:45:27.423 回答
2

这是因为您引用的“选择”库需要定义 jQuery。RequireJS 不会以保证的顺序加载给定模块的依赖项。它并行加载它们。这是出于性能原因。因此，如果您希望首先加载 jQuery，您可以：

  • require jquery 直接在页面上，所以它在任何 AMD 东西开始之前被加载

-或者-

  • 创建一个围绕 'chosen' 的包装模块，将 jQuery 列为依赖项

就个人而言，我选择第一选择。我认为通过 AMD 加载 jQuery 没有任何好处，因为每个页面都需要它，而且许多库都依赖它。没有理由延迟加载您总是需要的东西。

编辑：

看起来您也可以使用 RequireJS 的 shim 功能来执行此操作：

http://requirejs.org/docs/api.html#config-shim

您需要为“选择”定义一个 shim 并列出 jQuery 和任何其他库作为其依赖项。

于 2013-02-20T22:22:35.740 回答
-6 
$(document).ready({

   //all your jquery code should go here
});

想知道为什么？看到这个

于 2013-02-07T13:34:40.307 回答