JavaScript生成不正確的功能縮小，是我的代碼壞？

我有以下的javascript它工作在調試正常，但在生產中由於不當的微小失敗：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; 
}

在哪裏設置列表項的HTML標記的cuplrit是基於配置。

縮小的加價樣子：

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

而這裏的錯誤消息我收到：

enter image description here

可能有人砸我的一些知識？我在做一些不好的練習嗎？我通過JSHint運行代碼，沒有任何抱怨，並且我還在文件的頂部使用'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; 
}

來源

2013-09-26 Sean Anderson

嘗試用不同的工具來縮小第一，像谷歌關閉：HTTP：//closure-compiler.appspot。com/home – Evgeny

它是現有項目中包含數千個文件的一部分。目前我不太喜歡改變縮小工具。我會比較縮小的結果，看看是否有差異。 –

@EugeneXa我遇到與Google Closure相同的錯誤。 –

問題是，當循環瀏覽$.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-26 18:23:11

如果我改變違規的代碼片段來自：

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

到

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

縮小的代碼工作。

我會感興趣的理解爲什麼，但這解決了我的問題。

來源

2013-09-26 18:02:34

JavaScript生成不正確的功能縮小，是我的代碼壞？

回答

相關問題