Fatal编程技术网
  • javascript/
  • Javascript RequireJS加载我的JS文件，但在使用它们时会触发错误

Javascript RequireJS加载我的JS文件，但在使用它们时会触发错误

javascript requirejs

Javascript RequireJS加载我的JS文件，但在使用它们时会触发错误,javascript,requirejs,Javascript,Requirejs,我被困在这里两天了，我真的希望你能帮助我 我正在尝试将我在wrapbootstrap（）上搜索的主题与backboneJS和requireJS一起使用 因此，基本上，我有这个示例的文件结构： index.html app/ |___ js/ |____ main.js assets/ |___ js |___ ace.min.js |___ ace-extra.min.js |___ ace-elements.min.js |___

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

我正在尝试将我在wrapbootstrap（）上搜索的主题与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>
我删除了所有的脚本，所以我有：

<!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>
尽管生成了这些代码，（Chrome开发工具）：


空白页-Ace管理员
所以，我真的不明白，如果有人能回答我，我会非常高兴。 坦斯克

Kai23

老兄，这是巧合。 我的项目使用了相同的主题，您可以查看我的html模板：

和我的主JS文件：

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

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

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


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



jQuery立即意识到DOM已经就绪，并立即调用您正在传递的函数（函数（$）
部分）。然后，在
handle\u side\u菜单
连接到ace对象之前，此函数开始运行。如果您使用Chrome调试器工具，并将断点放在具有
handle\u side\u菜单的两个位置上，您将看到jQuery回调中的断点首先被命中。
首先，根据您的结构，data main属性可能应该是data main=“app/js/main”。其次，main.js文件是什么样子的？您是如何通过require请求文件的？谢谢，我完全忘了包含它。那么，带有ace.handle\u side\u菜单的代码在哪里运行？通常使用require时，您会使用
require（）
函数定义一个模块或至少依赖项（例如
require（['ace'，'acetra'，'jquery']，function（ace，extra，$）{/*Do stuff*/}）
）您的垫片没有任何导出。@legacybass它在ace.js中。我已经在github上建立了一个存储库，暂时是：Gaurav:需要导出吗？谢谢你的回答，我肯定会查看一下你的项目设置，但我认为Legacybas给了我正确的答案。谢谢你，它解决了我的问题！我将这些函数放在main.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 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'
    });
    */
});



    <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>



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