Webworker ohne separate Javascript-Datei?

Question

Webworker ohne separate Javascript-Datei?

Gefragt el 23 de Marsch, 2011: Wann wurde die Frage gestellt
107329 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Soweit ich das beurteilen kann, müssen Web Worker in einer separaten JavaScript-Datei geschrieben und wie folgt aufgerufen werden:

new Worker('longrunning.js')

Ich verwende den Closure-Compiler, um meinen gesamten JavaScript-Quellcode zusammenzufassen und zu verkleinern, und ich möchte meine Worker nicht in separaten Dateien verteilen müssen. Gibt es eine Möglichkeit, dies zu tun?

new Worker(function() {
    //Long-running work here
});

Angesichts der Tatsache, dass erstklassige Funktionen für JavaScript so wichtig sind, stellt sich die Frage, warum die Standardmethode für die Arbeit im Hintergrund eine weitere JavaScript-Datei vom Webserver laden muss.

Gefragt el 23 de Marsch, 2011 von Ben Dilts

Answer 1

5 Antworten

Answer 2

1voto

ifbamoq Punkte 317

Einzeiler für die Ausführung von Funktionen in Arbeitern:

const FunctionalWorker = fn => new Worker(window.URL.createObjectURL(new Blob(["(" + fn.toString() + ")()"], {type: "text/javascript"})));

Beispiel für die Verwendung:

let fn = FunctionalWorker(() => {
    self.postMessage("hi");
});
fn.onmessage = msg => {
    console.log(msg);
};

Beantwortet el 21 de Dezember, 2019 von ifbamoq (317 Punkte )

Answer 3

1voto

msanford Punkte 11045

Ich habe entdeckt, dass CodePen derzeit nicht Syntax-Highlight inline <script> Tags, die nicht type="text/javascript" (oder die kein Typ-Attribut haben).

Daher habe ich eine ähnliche, aber leicht abweichende Lösung entwickelt, indem ich beschriftete Blöcke mit break Dies ist die einzige Möglichkeit, aus einer Kaution zu entkommen. <script> Tag, ohne eine Wrapper-Funktion zu erstellen (was unnötig ist).

<!DOCTYPE html>
<script id="worker1">
  worker: { // Labeled block wrapper

    if (typeof window === 'object') break worker; // Bail if we're not a Worker

    self.onmessage = function(e) {
      self.postMessage('msg from worker');
    };
    // Rest of your worker code goes here.
  }
</script>
<script>
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], { type: "text/javascript" })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
</script>

Beantwortet el 14 de Kann, 2017 von msanford (11045 Punkte )

Answer 4

1voto

Tomáš Zato - Reinstate Monica Punkte 45495

Dies ist nur eine Ergänzung zu oben - ich habe eine schöne Vorlagen für das Testen von Web-Arbeiter in jsFiddle. Anstatt Blob verwendet es jsFiddles ?js api:

function workerFN() {
  self.onmessage = function(e) {
    switch(e.data.name) {
      case "" : 
      break;
      default:
        console.error("Unknown message:", e.data.name);
    }
  }
}
// This is a trick to generate real worker script that is loaded from server
var url = "/echo/js/?js="+encodeURIComponent("("+workerFN.toString()+")()");
var worker = new Worker(url);
worker.addEventListener("message", function(e) {
  switch(e.data.name) {
    case "" : 
    break;
    default:
      console.error("Unknown message:", e.data.name);
  }
})

Normal Web-Worker y gemeinsamer Mitarbeiter Vorlagen sind verfügbar.

Beantwortet el 20 de Juni, 2016 von Tomáš Zato - Reinstate Monica (45495 Punkte )

Answer 5

1voto

zevero Punkte 2054

Verwenden Sie mein kleines Plugin https://github.com/zevero/worker-create

var worker_url = Worker.createURL(function(e){
  self.postMessage('Example post from Worker'); //your code here
});
var worker = new Worker(worker_url);

Beantwortet el 18 de Oktober, 2015 von zevero (2054 Punkte )

Answer 6

1voto

hamboy75 Punkte 816

https://developer.mozilla.org/es/docs/Web/Guide/Performance/Using_web_workers

    // Syntax: asyncEval(code[, listener])

var asyncEval = (function () {

  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");

  oParser.onmessage = function (oEvent) {
    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
    delete aListeners[oEvent.data.id];
  };

  return function (sCode, fListener) {
    aListeners.push(fListener || null);
    oParser.postMessage({
      "id": aListeners.length - 1,
      "code": sCode
    });
  };

})();

Beantwortet el 10 de Januar, 2014 von hamboy75 (816 Punkte )

Webworker ohne separate Javascript-Datei?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Webworker ohne separate Javascript-Datei?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: