gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:02:41 25 4
gpt4 key购买 nike

我卡在这里2天了,真心希望你能帮帮我。

我正在尝试将我在 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>

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

  1. ace-extra.min.js
  2. jquery.min.js
  3. bootstrap.min.js
  4. ace-elements.min.js
  5. ace.min.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

最佳答案

所以,事实证明这是您在 ace.min.js 文件中执行操作的顺序。要修复它,只需将包含 ace.handle_side_menu 的第二个 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 已准备就绪,并立即调用您传入的函数(function($) 部分)。然后,此函数在 handle_side_menu 附加到 ace 对象之前开始运行。如果您使用 Chrome 调试器工具并在您拥有 handle_side_menu 的两个地方放置断点,您会看到 jQuery 回调中的断点首先被击中。

关于javascript - RequireJS 加载我的 JS 文件,但在使用它们时触发错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18364244/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com