个人中心
gpt4 book ai didi

javascript - RequireJS 加载依赖不一致

转载 作者：行者123 更新时间：2023-11-30 10:22:18 25 4
gpt4 key购买 nike

我有一个 jQuery 插件，它依赖于首先加载 jQuery。我正在使用 shim和 require([])以确保首先加载 jQuery。有时该应用程序可以运行，但通常不会运行，并会出现以下错误:

Uncaught TypeError: Object [object Object] 没有方法 'noUiSlider'

...这表示 jQuery 未首先加载。我做错了什么？

这是我的应用程序的主脚本:

requirejs.config({
    "baseUrl": "app/",
    "paths": {
        "app": "./app",
        "threejs" : "../lib/three.min",
        "jquery" : "../lib/jquery",
        "jquery.nouislider.min": "../lib/jquery.nouislider.min"
    },
    "shim": {
        "jquery.nouislider.min": {
            deps: ["jquery"],
            init: function($) {
                return this;
            }
        }
    }
});

require([
    "jquery",
    "jquery.nouislider.min",
    "threejs",
    "Scene"
],
function ($) {
    var glScene = new Scene();
    glScene.clockStart();

    $(function(){
        var slider = $("<div></div>");
        slider.attr("id", "sample-minimal");
        $("body").append(slider);
        $("#sample-minimal").noUiSlider({
             range: [0, 100]
            ,start: [20, 80]
            ,connect: true
        });
    });

    function onWindowResize(event) {
        glScene.windowResize();
    }
});

最佳答案

为什么您认为您提供的那个错误表明 jQuery 没有首先加载？ $(function(){ 正常工作的事实不是恰恰相反吗？

无论如何，试试这个:

requirejs.config({
    "baseUrl": "app/",
    "paths": {
        "app": "./app",
        "threejs" : "../lib/three.min",
        "jquery" : "../lib/jquery",
        "jquery.nouislider.min": "../lib/jquery.nouislider.min"
    },
    "shim": {
        "jquery.nouislider.min": {
            deps: ["jquery"],
            exports: '$'
        }
    }
});

require([
    "jquery.nouislider.min",
    "threejs",
    "Scene"
],
function ($) {
    var glScene = new Scene();
    glScene.clockStart();

    $(function(){
        var slider = $("<div></div>");
        slider.attr("id", "sample-minimal");
        $("body").append(slider);
        $("#sample-minimal").noUiSlider({
             range: [0, 100]
            ,start: [20, 80]
            ,connect: true
        });
    });

    function onWindowResize(event) {
        glScene.windowResize();
    }
});

更新 1:基本示例:

index.html

<!doctype html>
<html>
    <head>
        <link href="./jquery.nouislider.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="stage"></div>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

ma​​in.js

require.config({
    paths : {
        jquery : 'jquery-2.0.3',
        'jquery.nouislider' : 'jquery.nouislider'
    },
    shim : {
        'jquery.nouislider' : {deps : ['jquery'], exports : '$'}
    }
});

require(['jquery.nouislider'], function($) {
    $(function(){
        $("#stage").noUiSlider({
             range: [0, 100]
            ,start: [20, 80]
            ,connect: true
        });
    });
});

更新 2:优先选项:

此外，您可能想使用优先选项:

priority: An array of module/file names to load immediately, before tracing down any other dependencies. This allows you to set up a small set of files that are downloaded in parallel that contain most of the modules and their dependencies already built in. More information is in the Optimization FAQ, Priority Downloads.Note: resources loaded by loader plugins (like 'text!template.html') cannot be specified in the priority array: the priority mechanism only works with regular JavaScript resources.

应该这样使用:

paths : {
   ....
},
shim : {
   ....
},
priority : ['jquery']

关于javascript - RequireJS 加载依赖不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21050851/

25 4 0
文章推荐： javascript - 如何防止禁用 javascript 的用户提交表单？
文章推荐： swift - 将选择器 View 返回到先前选择的行
文章推荐： javascript - 在 bootstrap 3 中切换侧边栏？
文章推荐： javascript - 匹配 0 或 1 的正则表达式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com