Geek Answers Handbook

Mining javascript generating incorrect functionality, bad code?

I have the following javascript that works fine when debugging, but doesn't work in the process due to a misconfiguration:

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

Cookies, where I set the HTML markup of the list item based on the configuration.

The configured premium is as follows:

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

And here is the error message I get:

enter image description here

Can someone throw me some knowledge? Am I doing something bad? I ran the code through JSHint, no complaints, and I also have a "strict use" at the top of the file.

UPDATE: I have the same problem when using Google Closure. The code he created is:

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

This is identical to the 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

, $.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');
});
+4

:

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


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

.

, , .

0

More articles:


All Articles