Übergabe der jQuery-Referenz über Web Worker

Question

Ich arbeite daran, einige URL-Abfrageanforderungen an einen Web-Mitarbeiter zu übertragen. Dazu muss ich bestimmte Attribute aus dem DOM-Element der Invokation abrufen, sie an eine URL-Anforderung übergeben und dann das ursprüngliche DOM-Element mit den Ergebnissen aktualisieren. Da mehrere DOM-Elemente diese Funktion zum Abrufen von Aktualisierungen verwenden, muss ich $(this) oder eine gleichwertige eindeutige Kennung übergeben, um sicherzustellen, dass das richtige Element aktualisiert wird.

Ich verstehe von Fragen wie "Passing objects to a web worker" und "Can I pass a jQuery object to a web worker", dass dies nicht möglich ist, also suche ich nach einem Mittel, um dies zu emulieren.

Hier ist eine grobe Skizze von meinem Code:

//main.js 
function update(){ 
    var data = { 'id'  : $(this).attr('itemid'), 
       'filter' : $(this).attr('filter')} 
    updatePoller.postMessage(data); 
} 

//worker.js 
this.onmessage = function(e){ 
    //format params from e.data 
    //make GET request to url 
    //when done... 
    postMessage(req.responseText); 
} 

//main.js (again) 
updatePoller.onmessage = function(message){ 
    //process response 
    //update child elements of $(this) 
} 

Wie Sie sehen können, ich brauche nicht $(this) innerhalb der Web-Arbeiter zugreifen zu können, aber ich brauche die Referenz, sobald die Anforderung, um zurückgekehrt um das korrekte Element zu aktualisieren. Gibt es Möglichkeiten, einen eindeutigen Verweis auf ein DOM-Element durch einen Web-Mitarbeiter zu übergeben?

Answer 1

Die übliche Methode zur eindeutigen Identifizierung eines Elements, wenn Sie seine Referenz nicht verwenden können, ist die Verwendung eines id. Alternativ könnten Sie ein data-* Attribut verwenden, aber wirklich id s wurden für diesen bestimmten Zweck gemacht.

So (siehe Kommentare):

//main.js 
var lastId = 0; 
function update(){ 
    // Assign ID if necessary 
    if (!this.id) { 
     ++lastId; 
     this.id = "__auto" + lastId; 
    } 
    var data = { 'id'  : $(this).attr('itemid'), 
       'filter' : $(this).attr('filter'), 
       'elementId': this.id} 
    updatePoller.postMessage(data); 
} 

//main.js (again) 
updatePoller.onmessage = function(message){ 
    // Use the `element` value sent back to look it up by ID: 
    $("#" + message.data.elementId).xyz(); 
} 

Wenn alle diese automatischen Globals mit (seit id Werte automatische Globals erstellen) stört Sie, könnten Sie die ID entfernen, wenn mit ihm getan:

//main.js (again) 
updatePoller.onmessage = function(message){ 
    var elm = $("#" + message.data.elementId); 
    if (elm.attr("id").startsWith("__auto")) { // auto ID? 
     elm.attr("id", "");      // remove it 
    } 
    elm.xyz(); 
} 

oder mit weniger jQuery:

//main.js (again) 
updatePoller.onmessage = function(message){ 
    var elm = $("#" + message.data.elementId)[0]; 
    if (elm && elm.id.startsWith("__auto")) { 
     elm.id = ""; 
    } 
    $(elm).xyz(); 
}