4

我有以下 javascript 在调试中运行良好，但由于不正确的缩小而在生产中失败：

function buildNotification(config) {

    var notificationWrapper = $('<div>', {
        'id': _.uniqueId('notification_'),
        'class': 'notificationWrapper'
    });

    var notification = $('<div>', {
        'class': 'notification ui-widget ui-state-default'
    });
    notification.addClass(config.notificationClass);
    notification.appendTo(notificationWrapper);

    var notificationList = $('<ul/>', {
        'class': 'notificationList'
    }).appendTo(notification);

    //  THIS CODE IS IMPROPERLY MINIFIED: 
    $.each(config.messages, function() {
        $('<li/>', {
            html: this
        }).appendTo(notificationList);
    });

    return notificationWrapper;
}

Cuplrit 是我根据配置设置列表项的 HTML 标记的地方。

缩小后的标记如下所示：

function g(a) {
    var b = $("<div>", { id: _.uniqueId("notification_"), "class": "notificationWrapper" }), c = $("<div>", { "class": "notification ui-widget ui-state-default" });
    c.addClass(a.notificationClass);
    c.appendTo(b);
    var d = $("<ul/>", { "class": "notificationList" }).appendTo(c);
    $.each(a.messages, function() { $("<li/>", { html: this }).appendTo(d); });
    return b;
}

这是我收到的错误消息：

在此处输入图像描述

有人可以告诉我一些知识吗？我在做一些不好的做法吗？我通过 JSHint 运行代码，没有任何抱怨，而且文件顶部还有“use strict”。

更新：我在使用 Google Closure 进行缩小时遇到了同样的问题。它生成的代码是：

function g(a) {
    var b = $("<div>", { id: _.uniqueId("notification_"), "class": "notificationWrapper" }), c = $("<div>", { "class": "notification ui-widget ui-state-default" });
    c.addClass(a.notificationClass);
    c.appendTo(b);
    var d = $("<ul/>", { "class": "notificationList" }).appendTo(c);
    $.each(a.messages, function() { $("<li/>", { html: this }).appendTo(d); });
    return b;
}

这与 YUI Compressor 相同。

更新 2： http: //jscompress.com/如果我使用这个软件压缩我的文件，它可以工作。

生成的代码：

function r(e) {
    var t = $("<div>", { id: _.uniqueId("notification_"), "class": "notificationWrapper" });
    var n = $("<div>", { "class": "notification ui-widget ui-state-default" });
    n.addClass(e.notificationClass);
    n.appendTo(t);
    var i = $("<ul/>", { "class": "notificationList" }).appendTo(n);
    $.each(e.messages, function() { $("<li/>", { html: this }).appendTo(i); });
    return t;
}
4

2 回答 2

4

问题是当循环时$.each()--this期待/指向一个 jQuery 包装的元素。如果字符串中有 HTML，它会显示<i>Test</i>为：

String {0: "<", 1: "i", 2: ">", 3: "T", 4: "e", 5: "s", 6: "t", 7: "<", 8: "/", 9: "i", 10: ">"}

因此给出错误：

Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

如果您指向 jQuery 包装的元素，例如：$('#test')，那么this将按预期工作。但是由于您要传递一个字符串或字符串数​​组（其中包含 HTML），因此您必须使用函数的第二个参数element来获得所需的内容。

这是一个 jsFiddle 示例：http: //jsfiddle.net/BJBV5/

var messages = $('#test');

$.each(messages, function(index, element) {
    console.log(element);
    console.log(this); // <-- notice this works as intended
    $("<li/>", { 
        html: this
    }).appendTo('div');
});

var messages = ['<i>Test</i>'];

$.each(messages, function(index, element) {
    console.log(element);
    console.log(this); // <-- notice this will show an array of each letter in the string
    $("<li/>", { 
        html: element
    }).appendTo('div');
});
于 2013-09-26T18:23:11.737 回答
0

如果我将有问题的代码段更改为：

$.each(config.messages, function () {
    $('<li/>', {
        html: this
    }).appendTo(notificationList);
});

到

$.each(config.messages, function (index, message) {
    $('<li/>', {
        html: message
    }).appendTo(notificationList);
});

缩小的代码有效。

我有兴趣了解原因，但这解决了我的问题。

于 2013-09-26T18:02:34.297 回答