Comprendre les événements de travail, les astuces api_javascript en JavaScript

Si vous ne savez pas grand chose sur les événements Event, il est recommandé de commencer par cet article "Comprendre les événements DOM en JavaScript" .

Tout d'abord, nous devons instancier un objet Worker. Le navigateur ouvrira une nouvelle interface basée sur l'objet Worker nouvellement créé. Cette interface gérera la communication entre le client et la base de données indexedDB. La base de données fait ici référence à la base de données du navigateur. Si vous devez déterminer si le navigateur prend en charge les objets Worker, consultez le code suivant pour plus de détails. Ou si le navigateur prend en charge la base de données indexedDB, voir ci-dessous pour plus de détails. Il est préférable de choisir la première entre les deux. Parce qu'IE ne prend pas en charge indexedDB.

if(window.Worker){ dosomething }
// Worker
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; 
if(!window.indexedDB){ dosomething }
// indexedDB

Après cela, l'objet Worker enverra les données à la base de données indexedDB via le thread postMessage. Lorsque la base de données indexedDB reçoit les données envoyées par le client, elle stocke et enregistre d'abord la valeur clé des données dans la table de la base de données indexedDB. En fait, cela équivaut à sauvegarder les données dans une structure de table complète.

En conséquence, la base de données indexedDB renverra la valeur des données reçues à la nouvelle interface pour traitement. Lorsque la nouvelle interface obtiendra les données et les analysera, elle renverra une partie des données à la base de données via postMessage. reçoit les données renvoyées et les traite de la même manière que ci-dessus, à ce moment-là, la base de données indexedDB transmettra les données renvoyées au thread onmessage du client qui accepte les paramètres. Le thread onmessage derrière le thread principal reçoit principalement les données renvoyées.

var txt1 = document.querySelector("#txt1");
var txt2 = document.querySelector("#txt2");

var result = document.querySelector("#result");
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 if(!window.indexedDB)
 {
  console.log("你的浏览器不支持IndexedDB");
 }
 if(window.Worker){
  var _this = new Worker("../../js/build/scroll_ten1.js");
  txt1.onchange = function(){ 
   _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]
   console.log("message post to work");
  }
  txt2.onchange = function(){
   _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]
   console.log("message post to work");
  }
  _this.onmessage = function(s){ //接收到的数据 e
   result.textContent = s.data;
  }
 }

onmessage = function(e){ //e接收Worker.postmessage传的参数
 var s = (e.data[2]*e.data[1]);
 var workerResult = "result : " + s;
 postMessage(workerResult); //Worker.onmessage进行回调workerResult参数
}

Après avoir lu l'analyse ci-dessus, vous devez réfléchir à ce que vous pouvez faire avec Worker ? Concernant ce problème, le problème de non-blocage des threads peut actuellement être résolu. Comment dire, lorsque l'utilisateur modifie la taille du navigateur et fait glisser le navigateur, lorsque le thread principal accède aux données d'arrière-plan, le processus entre les données ne se déroulera pas. être interrompu.

Quels navigateurs prennent en charge Worker ?

Partagez un lien vers caniuse. Grâce à cet outil, vous pouvez voir les (hacks) de chaque navigateur de manière plus complète.

// *Notez que la première lettre de Worker doit être en majuscule

// *Notez que le répertoire du script Worker doit être un répertoire auquel HTML peut accéder

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'avoir une compréhension plus approfondie de l'API des événements de travail en JavaScript.