javascript - RequireJS 加载我的 JS 文件，但在使用时触发错误

Question

我被困在这里两天了，我真的希望你能帮助我。

我正在尝试使用我在 wrapbootstrap （https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR）上使用backboneJS和requireJS的主题

所以，基本上，我有这个例子的文件结构：

index.html
app/
 |___ js/
 |____ main.js
assets/
 |___ js
       |___ ace.min.js
       |___ ace-extra.min.js
       |___ ace-elements.min.js
       |___ bootstrap.min.js
       |___ jquery.min.js
libs
 |___ require
       |___ require.js

所以，当我使用这个基本模板时：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Blank Page - Ace Admin</title>

    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--basic styles-->

    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

    <!--[if IE 7]>
              <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
            <![endif]-->

    <!--page specific plugin styles-->

    <!--fonts-->

    <link rel="stylesheet" href="assets/css/ace-fonts.css" />

    <!--ace styles-->

    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
    <link rel="stylesheet" href="assets/css/ace-skins.min.css" />

    <!--[if lte IE 8]>
              <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
            <![endif]-->

    <!--inline styles related to this page-->

    <!--ace settings handler-->

    <script src="assets/js/ace-extra.min.js"></script>

</head>

<body>

    <!--basic scripts-->

    <script src='assets/js/jquery-2.0.3.min.js'></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <!--page specific plugin scripts-->

    <!--ace scripts-->

    <script src="assets/js/ace-elements.min.js"></script>
    <script src="assets/js/ace.min.js"></script>
</body>

</html>

没有错误，一切正常。然后，我想加载所有脚本

ace-extra.min.js
jquery.min.js
bootstrap.min.js
王牌元素.min.js
王牌最小.js

按照这个顺序，就像模板一样。

所以，我在头部添加了这一行

<script async data-main="app/main" src="libs/require/require.js"></script>

并像这样创建了 main.js：

require.config({
    // The shim config allows us to configure dependencies for
    // scripts that do not call define() to register a module
    shim: {
        bootstrap: {
            deps: ['jquery']
        },
        ace: {
            deps: ['aceElement']
        },
        aceElement: {
            deps: ['aceExtra', 'bootstrap', 'jquery']
        }
    },
    paths: {
        jquery: '../assets/js/uncompressed/jquery-2.0.3',
        bootstrap: '../assets/js/uncompressed/bootstrap',
        ace: '../assets/js/uncompressed/ace',
        aceExtra: '../assets/js/uncompressed/ace-extra',
        aceElement: '../assets/js/uncompressed/ace-elements'
    }
});
require([
    'jquery',
    'bootstrap',
    'ace'
], function() {

});

我删除了所有脚本，所以我有这个：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Blank Page - Ace Admin</title>

        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!--basic styles-->

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

        <!--[if IE 7]>
          <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
        <![endif]-->

        <!--page specific plugin styles-->

        <!--fonts-->

        <link rel="stylesheet" href="assets/css/ace-fonts.css" />

        <!--ace styles-->

        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
        <link rel="stylesheet" href="assets/css/ace-skins.min.css" />

        <!--[if lte IE 8]>
          <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
        <![endif]-->

        <!--inline styles related to this page-->

        <!--ace settings handler-->
    <script async data-main="app/main" src="libs/require/require.js"></script>
    </head>

    <body>
              ...
    </body>
</html>

但在这里，我有一个错误

     Uncaught TypeError: Object #<Object> has no method 'handle_side_menu'

来自这里：

jQuery(function($) {
    //ace.click_event defined in ace-elements.js
    ace.handle_side_menu(jQuery);

    ace.enable_search_ahead(jQuery);    

    ace.general_things(jQuery);//and settings

    ace.widget_boxes(jQuery);

    /**
    //make sidebar scrollbar when it is fixed and some parts of it is out of view
    //>> you should include jquery-ui and slimscroll javascript files in your file
    //>> you can call this function when sidebar is clicked to be fixed
    $('.nav-list').slimScroll({
        height: '400px',
        distance:0,
        size : '6px'
    });
    */
});

尽管生成了这个代码，（Chrome开发工具）：

    <html lang="en"><head>
        <meta charset="utf-8">
        <title>Blank Page - Ace Admin</title>

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--basic styles-->

        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/font-awesome.min.css">

        <!--[if IE 7]>
          <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
        <![endif]-->

        <!--page specific plugin styles-->

        <!--fonts-->

        <link rel="stylesheet" href="assets/css/ace-fonts.css">

        <!--ace styles-->

        <link rel="stylesheet" href="assets/css/ace.min.css">
        <link rel="stylesheet" href="assets/css/ace-responsive.min.css">
        <link rel="stylesheet" href="assets/css/ace-skins.min.css">

        <!--[if lte IE 8]>
          <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
        <![endif]-->

        <!--inline styles related to this page-->

        <!--ace settings handler-->
        <script async="" data-main="app/main" src="libs/require/require.js"></script>
    <script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="app/main.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="app/../assets/js/uncompressed/jquery-2.0.3.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="app/../assets/js/uncompressed/bootstrap.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceExtra" src="app/../assets/js/uncompressed/ace-extra.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceElement" src="app/../assets/js/uncompressed/ace-elements.js">
    </script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="ace" src="app/../assets/js/uncompressed/ace.js">
    </script></head>

    <body style=""></body></html>

所以，我真的不明白，如果有人有答案，我会很高兴。谢谢！

开23

score 3 · Accepted Answer

因此，事实证明这是您在 ace.min.js 文件中执行操作的顺序。要修复它，只需将包含的第二个 jQuery 函数移动ace.handle_side_menu到 ace.min.js 文件的底部。这有点巧合，但这就是原因。

当 require 加载你的 main.js 文件时，它会开始异步加载你的 js 文件。这让页面的其余部分和 DOM 有机会加载（这正是我们喜欢 require.js 的原因）。当您的 ace.min.js 文件被加载时，窗口已经发出了onReady事件信号。因此，在您拥有的 ace 文件中

jQuery(function($) {
    ace.handle_side_menu(jQuery);

jQuery 立即意识到 DOM 已准备好并立即调用您传入的函数（function($)部分）。handle_side_menu然后，此函数在附加到 ace 对象之前开始运行。如果您使用 Chrome 调试器工具并在您拥有的两个地方都放置断点handle_side_menu，您会看到 jQuery 回调中的那个首先被命中。

score 0 · Accepted Answer

哥们儿，真是巧合。我为我的项目使用了相同的主题，您可以查看我的 html 模板：

https://github.com/pjyong/chenxi/blob/master/src/ChenXi/MainBundle/Resources/views/Default/index.html.twig

和我的主要 JS 文件：

https://github.com/pjyong/chenxi/blob/master/web/app/js/main.js

如果您有更多问题，我会回答。

javascript - RequireJS 加载我的 JS 文件，但在使用时触发错误

2 回答 2

Related

Reference