我遇到一个问题,处理原型方法只在IE中消失(在这种情况下是Array.prototype方法),只有当数组通过SignalR时.
我写了一个小/愚蠢但简单的概念证明Web应用程序来演示这个问题(代码全部在下面).请注意,当您单击“更新所有客户端”,然后单击“包含字母’r’的水果”时,_list中的原型方法将丢失,从而导致异常.在这种情况下,阵列来自SignalR.现在,当您单击“重置”并将阵列重置为硬编码值时,“包含字母’r’的水果”按钮突然起作用 – 原型方法又回来了.请记住,此问题仅发生在IE中.
提示:当我第一次写出概念证明时,我无法重现这个问题.当数组来自SignalR时,IE仍然有原型方法,但是当页面加载时我确实有另一个错误.我不小心把jQuery包括了两次.当我拿出冗余脚本来包含第二个jQuery时,它修复了这个错误(显然),但现在问题可以重现了.然后IE错过了我创建的Array原型方法,但只有当数组来自SignalR时.
myExtensions.js:
Array.prototype.where = function (del)
{
var ret = new Array();
for (var i = 0; i < this.length; i++)
{
if (del(this[i])) ret.push(this[i]);
}
return ret;
}
Array.prototype.select = function (del)
{
var ret = new Array();
for (var i = 0; i < this.length; i++)
{
ret.push(del(this[i]));
}
return ret;
}
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/Scripts/myExtensions.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/jquery-1.7.1.js")
@Scripts.Render("~/Scripts/jquery.signalR-1.0.0-rc1.js")
<script src="~/signalr/hubs"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("IE/SignalR error POC", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@*@Scripts.Render("~/Scripts/myExtensions.js")*@
</body>
</html>
ListHub.cs
using System.Linq;
using Microsoft.AspNet.SignalR.Hubs;
namespace SignalR_Bug_POC.Hubs
{
public class ListHub : Hub
{
public void RunTest()
{
Clients.All.updateList(new string[]
{
"apple", "pear", "grape", "strawberry", "rasberry", "orange", "watermelon"
}.Select(f => new { Name = f }).ToList());
}
}
}
Index.cshtml
@{
ViewBag.Title = "Home Page";
}
@if(false)
{
@Scripts.Render("~/Scripts/jquery.signalR-1.0.0-rc1.js")
@Scripts.Render("~/Scripts/myExtensions.js")
<script src="~/signalr/hubs"></script>
}
<script type="text/javascript">
var _fruits = ["blueberry", "grape", "orange", "strawberry"].select(function (f) { return { "Name": f } });
var _list;
var conn = $.connection.listHub;
$.connection.hub.start();
conn.client.updateList = function (data)
{
_list = data;
$("#theList").html("");
for (var i = 0; i < _list.length; i++)
{
$("#theList").append("<li>" + _list[i].Name + "</li>");
}
}
$(document).ready(function ()
{
$("#cmdUpdateClients").click(function ()
{
conn.server.runTest();
});
$("#cmdReset").click(function ()
{
conn.client.updateList(_fruits);
});
$("#cmdRunTest").click(function ()
{
var message = "";
var fruitsContaining = _list
.where(function (f) { return f.Name.indexOf('r') >= 0 })
.select(function (f) { return f.Name });
for (var i = 0; i < fruitsContaining.length; i++)
{
message += " - " + fruitsContaining[i] + "\n";
}
alert(message);
});
conn.client.updateList(_fruits);
});
</script>
<input type="button" id="cmdUpdateClients" value="Update All Clients" />
<input type="button" id="cmdReset" value="Reset" />
<input type="button" id="cmdRunTest" value="Fruits containing the letter r." />
<ul id="theList"></ul>
我不确定这是否是我在代码中做错了(即我正在以错误的顺序做的事情)或者它是IE错误还是SignalR错误.当我在conn.client.updateList JS方法的第一行设置断点并跟踪调用堆栈到最顶层时,看到即使在那里(在SignalR接收方法中)’data’对象中的数组也没有没有我的原型方法.
最佳答案 通过以下修改,它对我来说效果很好:
var fruitsContaining = _list
.where(function (f) { return f.indexOf('r') >= 0 })
.select(function (f) { return f});
where和select实际上在那里,它是f.Name不是,因为数组成员是字符串.
更新:
好的,忽略上面的内容.这是修复:
var list = list
if (navigator.appName == 'Microsoft Internet Explorer') {
list = Array.prototype.slice.call(_list);
}
var fruitsContaining = list
.where(function (f) { return f.Name.indexOf('r') >= 0 })
.select(function (f) { return f.Name });
for (var i = 0; i < fruitsContaining.length; i++) {
message += " - " + fruitsContaining[i] + "\n";
}
我不完全理解这个问题,但我相信它可能是jquery中的一个错误.虽然问题有点不同,但我从这个问题中偷走了解决方案:
Why does this change to the Array prototype not work in my jQuery plugin?
其他更新
添加了IE检查.