gpt4 book ai didi

遗留应用程序中的 requirejs 重新定义了 jQuery

转载 作者:行者123 更新时间:2023-12-01 04:13:39 25 4
gpt4 key购买 nike

我被分配了一项任务,为旧页面开发一个小型应用程序,以替换目前的 Flash 应用程序。

我使用 requirejs、knockout 和 jquery 开发了这个应用程序,但似乎在使用我的设置时,应用程序中某些文本区域上所有注册的更改事件都未注册。该行为可以用这个简单的 html 文件来说明:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#container .input").change(function() {
console.log($(this).val());
});
console.log($("#input").data("events"));
});
</script>
<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script>
<script>
require.config({
paths: {
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min",
},
shim: {
jquery: {
exports: "$"
}
}
});

require(
["jquery"],
function($) {
console.log("starting");
console.log($("#input").data("events"));
}
);
</script>
</head>
<body>
<div id="container">
<input type="text" id="input" class="input" />
</div>
</body>

此代码将在第一次调用时报告附加到输入元素的事件,但在第二次调用时报告为未定义。我需要附加的事件保持在原位,因为有一些遗留代码自动保存我更新的(隐藏)输入字段的内容。

这里发生了什么?

最佳答案

首先,您的代码可能有错误。选择器"#container .input"指的是 input 类,而其他代码引用 #input ,即 id input .

The following jsfiddle example将按预期工作。

该示例根本不使用 RequireJS 来加载 jQuery。相反,它 definejquery使用常规 <script> 加载 jQuery 后显式模块标签。

这将确保全局 jQuery 对象和 AMD jquery模块值是一回事。因此保留单个 jQuery 来注册事件等。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script>
<script>define("jquery", function() { return jQuery; });</script>
<script>
$(document).ready(function() {
console.log("page onready");
var inputs = $("#container .input");
console.log(inputs.length);
inputs.keypress(function() {
console.log($(this).val());
});
console.log($(".input").data("events"));
});
</script>
<script>
require(["jquery"], function($) {
console.log("module starting");
$(function() {
console.log("module onready");
console.log($(".input").data("events"));
});
});
</script>
<div id="container"><input class="input" type="text" /></div>

请记住,此示例旨在与您的示例接近。如果是我,我会删除 jQuery <script>标记并使用 RequireJS shim 引入 jQuery。

您是否可以执行此操作取决于您应用程序的其余部分。

什么情况下

  • 你不能使用“裸体”$jQuery对象(至少在 RequireJS 加载它之前 - 在这种情况下您应该使用 AMD 语法,请参阅下一步)。
  • 对 jQuery 的任何使用都应限制在 require 范围内。或define打电话。
  • jQuery <script>标签被删除(我们不希望 jQuery 加载两次;一次由 <script> 标签加载,一次由 RequireJS shim 加载)。

例如:

<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script>
<script>
require.config({
paths: {
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min",
},
shim: {
jquery: {
exports: "$"
}
}
});
</script>
<script>
require(["jquery"], function($) {
$(function() {
console.log("page onready");
var inputs = $("#container .input");
console.log(inputs.length);
inputs.keypress(function() {
console.log($(this).val());
});
console.log($(".input").data("events"));
});
});
</script>
<script>
require(["jquery"], function($) {
console.log("module starting");
$(function() {
console.log("module onready");
console.log($(".input").data("events"));
});
});
</script>
<div id="container"><input class="input" type="text" /></div>

关于遗留应用程序中的 requirejs 重新定义了 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17147202/

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