दिलचस्प पोस्ट
जावा एचटीएमएल पार्सिंग क्या एक विशिष्ट पंक्ति को अनदेखा कर सकते हैं? जावास्क्रिप्ट पृष्ठभूमि में एजेएक्स प्रतिक्रियाओं को कैसे संभालता है? गिट के साथ एक विशिष्ट टैग डाउनलोड करें एचटीएमएल / पीएचपी के साथ एक्सएसएस कैसे रोकें? हाइबरनेट ओपन सत्र में क्यों एक बुरा अभ्यास माना जाता है? XMLHttpRequest का उपयोग करके डाक डेटा भेजें UI तालिका दृश्य सेल के अंदर बटन क्लिक करें जावा में आधुनिक के लिए सिंटैक्स क्या है जावास्क्रिप्ट की तारीख रेगेक्स डीडी / एमएम / वाई वाई वाई वाई बेस कन्स्ट्रक्टर को सी # में कॉल करना का उपयोग करने के बीच कोई महत्वपूर्ण अंतर क्या है / else और switch-case सी # में है? मैं वॉल्यूम पर केवल हटाए गए, परिवर्तित और बनाई गई फ़ाइलों का कैसे पता लगा सकता हूं? स्थैतिक चर initialisation आदेश जब dequeueReusableCellWithIdentifier बनाम dequeueReusableCellWithIdentifier का उपयोग करने के लिए: forIndexPath

एक अलग जावास्क्रिप्ट फाइल के बिना वेब श्रमिक?

जहां तक ​​मैं बता सकता हूं, वेब श्रोताओं को एक अलग जावास्क्रिप्ट फाइल में लिखे जाने की जरूरत है, और इस तरह से यह कहा जाता है:

new Worker('longrunning.js') 

मैं अपने सभी जावास्क्रिप्ट सोर्स कोड को गठबंधन और संक्षिप्त करने के लिए क्लोजर कंपाइलर का उपयोग कर रहा हूं, और मुझे अपने श्रमिकों को वितरण के लिए अलग-अलग फाइलों में नहीं रखना होगा क्या ऐसा करने का कोई तरीका है?

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

यह देखते हुए कि प्रथम श्रेणी के फ़ंक्शन जावास्क्रिप्ट के लिए बहुत महत्वपूर्ण हैं, तो पृष्ठभूमि से काम करने का मानक तरीका सर्वर से पूरी तरह से 'नोटर जावास्क्रिप्ट फ़ाइल' लोड करना है?

वेब के समाधान से एकत्रित समाधान "एक अलग जावास्क्रिप्ट फाइल के बिना वेब श्रमिक?"

http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers

क्या होगा यदि आप मक्खी पर अपनी कार्यकर्ता स्क्रिप्ट बनाना चाहते हैं, या अलग-अलग वर्कर फाइल बनाने के बिना एक आत्म-निहित पृष्ठ बनाना चाहते हैं? ब्लॉब () के साथ, कार्यकर्ता कोड को स्ट्रिंग के रूप में यूआरएल हैंडल बनाकर आप अपने कार्यकर्ता को उसी HTML फ़ाइल में अपने मुख्य तर्क के रूप में "इनलाइन" कर सकते हैं

ब्लॉब्ल इनलाइन कार्यकर्ता का पूरा उदाहरण:

 <!DOCTYPE html> <script id="worker1" type="javascript/worker"> // This script won't be parsed by JS engines because its type is javascript/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> 

एचटीएमएल में वेब वर्कर कोड को एम्बेड करने का html5 स्ट्रोक समाधान काफी भयानक है।
और बच निकलने वाली जावास्क्रिप्ट के रूप में एक स्ट्रिंग बेहतर नहीं है, कम से कम नहीं क्योंकि यह काम प्रवाह (क्लोजर कंपाइलर स्ट्रिंग्स पर काम नहीं कर सकता) को पेचीदगी बनाता है।

निजी तौर पर मैं वास्तव में toString तरीकों की तरह है, लेकिन @ दान-आदमी कि regex!

मेरा पसंदीदा दृष्टिकोण:

 // Build a worker from an anonymous function body var blobURL = URL.createObjectURL( new Blob([ '(', function(){ //Long-running work here }.toString(), ')()' ], { type: 'application/javascript' } ) ), worker = new Worker( blobURL ); // Won't be needing this anymore URL.revokeObjectURL( blobURL ); 

समर्थन इन तीन तालिकाओं का प्रतिच्छेदन है:

यह शेयर्ड वर्कर के लिए काम नहीं करेगा, क्योंकि यूआरएल को एक सटीक मिलान होना चाहिए, भले ही ऐच्छिक "नाम" पैरामीटर मेल खाता हो। एक साझा वर्कर के लिए, आपको एक अलग JavaScript फ़ाइल की आवश्यकता होगी।


2015 अपडेट – सेवावेत्ता की विलक्षणता आती है

अब इस समस्या को सुलझाने का एक और भी शक्तिशाली तरीका है। फिर, कार्यकर्ता कोड को फ़ंक्शन के रूप में स्टोर करें, (स्थिर स्ट्रिंग के बजाय) और .toString () का उपयोग करके कनवर्ट करें, फिर CacheStorage में कोड को अपनी पसंद के एक स्थिर URL के अंतर्गत डालें।

 // Post code from window to ServiceWorker... navigator.serviceWorker.controller.postMessage( [ '/my_workers/worker1.js', '(' + workerFunction1.toString() + ')()' ] ); // Insert via ServiceWorker.onmessage. Or directly once window.caches is exposed caches.open( 'myCache' ).then( function( cache ) { cache.put( '/my_workers/worker1.js', new Response( workerScript, { headers: {'content-type':'application/javascript'}}) ); }); 

दो संभावित पतन-पीठ हैं ऊपर के रूप में ObjectURL, या अधिक विषम, /my_workers/worker1.js पर एक असली जावास्क्रिप्ट फाइल डाल

इस दृष्टिकोण के फायदे हैं:

  1. SharedWorkers को भी समर्थन किया जा सकता है
  2. टैब्स एक निश्चित पते पर एक कैश्ड कॉपी साझा कर सकते हैं। ब्लॉब दृष्टिकोण प्रत्येक टैब के लिए यादृच्छिक ऑब्जेक्ट URL को फैलता है।

आप एक एकल जावास्क्रिप्ट फ़ाइल बना सकते हैं जो उसके निष्पादन संदर्भ से अवगत है और एक अभिभावक स्क्रिप्ट और एक कार्यकर्ता दोनों के रूप में कार्य कर सकती है। आइए इस तरह एक फाइल के लिए बुनियादी ढांचे के साथ आरंभ करें:

 (function(global) { var is_worker = !this.document; var script_path = is_worker ? null : (function() { // append random number and time to ID var id = (Math.random()+''+(+new Date)).substring(2); document.write('<script id="wts' + id + '"></script>'); return document.getElementById('wts' + id). previousSibling.src; })(); function msg_parent(e) { // event handler for parent -> worker messages } function msg_worker(e) { // event handler for worker -> parent messages } function new_worker() { var w = new Worker(script_path); w.addEventListener('message', msg_worker, false); return w; } if (is_worker) global.addEventListener('message', msg_parent, false); // put the rest of your library here // to spawn a worker, use new_worker() })(this); 

जैसा कि आप देख सकते हैं, स्क्रिप्ट में माता-पिता और कार्यकर्ता दोनों के दृष्टिकोण के लिए सभी कोड शामिल हैं, यह जांच कर कि क्या इसकी व्यक्तिगत इजाजत है !document साथ कार्यकर्ता !document कुछ script_path कंप्यूटिंग को मूल पृष्ठ के सापेक्ष स्क्रिप्ट के पथ की सही गणना करने के लिए उपयोग किया जाता है, क्योंकि new Worker को दिए गए पथ मूल पृष्ठ के सापेक्ष है, स्क्रिप्ट नहीं।

Blob पद्धति का उपयोग करना, इसके बारे में एक कार्यकर्ता कारखाने के लिए कैसे:

 var BuildWorker = function(foo){ var str = foo.toString() .match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]; return new Worker(window.URL.createObjectURL( new Blob([str],{type:'text/javascript'}))); } 

तो आप इसे इस तरह इस्तेमाल कर सकते हैं …

 var myWorker = BuildWorker(function(){ //first line of worker self.onmessage(){....}; //last line of worker }); 

संपादित करें:

मैंने इस विचार को आगे बढ़ाया है ताकि क्रॉस-धागा संचार करने में आसान हो सके: bridged-worker.js

2 संपादित करें:

उपरोक्त लिंक्स मैंने बनाई गई एक सार के लिए है। बाद में किसी ने इसे एक वास्तविक रेपो में बदल दिया

वेब श्रमिक व्यक्तिगत कार्यक्रम के रूप में पूरी तरह अलग संदर्भों में काम करते हैं।

इसका अर्थ है कि कोड को एक संदर्भ से दूसरे वस्तु में स्थानांतरित नहीं किया जा सकता है, क्योंकि वे अन्य संदर्भ से जुड़े क्लोजर के माध्यम से ऑब्जेक्ट को संदर्भित करने में सक्षम होंगे।
यह विशेष रूप से महत्वपूर्ण है क्योंकि ECMAScript को एक ही थ्रेडेड भाषा के लिए डिज़ाइन किया गया है, और जब से वेब कर्मचारी अलग थ्रेड्स में काम करते हैं, तब आपके पास गैर-थ्रेड-सुरक्षित संचालन के जोखिम का प्रदर्शन होता है।

इसका मतलब यह भी है कि वेब श्रोताओं को स्रोत के रूप में कोड के साथ आरंभ किया जाना चाहिए।

WHATWG से युक्ति बताती है

यदि परिणामस्वरूप पूर्ण यूआरएल की उत्पत्ति प्रविष्टि स्क्रिप्ट की उत्पत्ति के समान नहीं होती है, तो एक SECURITY_ERR अपवाद डालें

इस प्रकार, लिपियों को मूल फाइल के रूप में एक ही योजना के साथ बाहरी फाइलें होनी चाहिए: आप किसी डेटा से एक स्क्रिप्ट नहीं लोड कर सकते हैं: यूआरएल या जावास्क्रिप्ट: यूआरएल, और एक https: पेज कर्मचारियों को http: URLs के साथ स्क्रिप्ट का उपयोग नहीं कर सका।

लेकिन दुर्भाग्य से यह सचमुच समझा नहीं है कि कंस्ट्रक्टर को सोर्स कोड के साथ एक स्ट्रिंग पास करने की अनुमति क्यों नहीं दे सकती।

एक इनलाइन कार्यकर्ता के लिए रास्ता पढ़ने के लिए बेहतर है ..

  var worker_fn = function(e) { self.postMessage('msg from worker'); }; var blob = new Blob(["onmessage ="+worker_fn.toString()], { type: "text/javascript" }); var worker = new Worker(window.URL.createObjectURL(blob)); worker.onmessage = function(e) { alert(e.data); }; worker.postMessage("start"); 

Adria की प्रतिक्रिया लेते हुए और इसे एक नकल-अयोग्य कार्य में डाल दिया जो वर्तमान क्रोम और एफएफ के साथ काम करता है लेकिन IE10 नहीं है (ब्लॉब से कार्यकर्ता एक सुरक्षा त्रुटि का कारण बनता है)

 var newWorker = function (funcObj) { // Build a worker from an anonymous function body var blobURL = URL.createObjectURL(new Blob( ['(', funcObj.toString(), ')()'], {type: 'application/javascript'} )); var worker = new Worker(blobURL); // Won't be needing this anymore URL.revokeObjectURL(blobURL); return worker; } 

और यहां एक काम उदाहरण है http://jsfiddle.net/ubershmekel/YYzvr/

VkThread प्लगइन पर एक नज़र डालें एचटीआईएस प्लगइन के साथ आप अपने मुख्य कोड में किसी फ़ंक्शन को ले सकते हैं और इसे किसी थ्रेड (वेब ​​कार्यकर्ता) में निष्पादित कर सकते हैं। इसलिए, आपको एक विशेष "वेब-कर्मचारी फ़ाइल" बनाने की आवश्यकता नहीं है

http://www.eslinstructor.net/vkthread/

–Vadim

आपके उपयोग के मामले के आधार पर आप कुछ का उपयोग कर सकते हैं

task.js सभी कोर पर चलने के लिए सीपीयू गहन कोड प्राप्त करने के लिए सरलीकृत इंटरफ़ेस (नोड.जेएस, और वेब)

एक उदाहरण होगा

 function blocking (exampleArgument) { // block thread } // turn blocking pure function into a worker task const blockingAsync = task.wrap(blocking); // run task on a autoscaling worker pool blockingAsync('exampleArgumentValue').then(result => { // do something with result }); 

आप इनलाइन वेबवर्कर्स का उपयोग करते हुए एक ही जावास्क्रिप्ट फ़े में वेब श्रोताओं का उपयोग कर सकते हैं

नीचे दिए गए लेख आपको वेबवर्कर्स और उनकी सीमाओं और वेबवर्कर्स के डीबगिंग को आसानी से समझने के लिए संबोधित करेंगे।

वेबवर्कर्स में माहिर

मुझे लगता है कि ऐसा करने का बेहतर तरीका ब्लॉब ऑब्जेक्ट का उपयोग कर रहा है, नीचे आप एक साधारण उदाहरण देख सकते हैं।

 // create a Blob object with a worker code var blob = new Blob(["onmessage = function(e) { postMessage('msg from worker'); }"]); // Obtain a blob URL reference to our worker 'file'. var blobURL = window.URL.createObjectURL(blob); // create a Worker var worker = new Worker(blobURL); worker.onmessage = function(e) { console.log(e.data); }; worker.postMessage("Send some Data"); 

JThread का उपयोग करने का प्रयास करें https://github.com/cheprasov/jThread

 // You can use simple calling like this jThread( function(arr){ //... some code for Worker return arr; } ,function(arr){ //... done code } )( [1,2,3,4,5,6,7] ); // some params 

यहां कंसोल:

 var worker=new Worker(window.URL.createObjectURL(new Blob([function(){ //Long-running work here postMessage('done'); }.toString().split('\n').slice(1,-1).join('\n')],{type:'text/javascript'}))); worker.addEventListener('message',function(event){ console.log(event.data); }); 

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

मेरे छोटे प्लगइन का उपयोग करें 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); 

इसलिए मुझे लगता है कि हमारे पास इसके लिए एक और अच्छा विकल्प है, जो ईएस 6 में टेम्पलेट लेवलल्स के लिए धन्यवाद। इससे हमें अतिरिक्त कार्यकर्ता कार्य (और इसके अजीब दायरे) के साथ बांटने की अनुमति मिलती है और बस ऐसे कोड को लिखना जो मल्टीलाइन पाठ के रूप में कार्यकर्ता के लिए अभिप्रेत है, उस स्थिति की तरह, जहां हम पाठ संग्रहित करने के लिए इस्तेमाल कर रहे थे, लेकिन वास्तव में किसी दस्तावेज़ या DOM की आवश्यकता नहीं है ऐसा करने के लिए उदाहरण:

 const workerScript = ` self.addEventListener('message', function(e) { var data = e.data; console.log('worker recieved: ',data); self.postMessage('worker added! :'+ addOne(data.value)); self.close();//kills the worker }, false); `; 

यहां इस दृष्टिकोण के बाकी हिस्सों का सार है

ध्यान दें कि हम किसी भी अतिरिक्त फ़ंक्शन निर्भरताओं को खींच सकते हैं जो हम कार्यकर्ता में उन्हें एक सरणी में इकट्ठा करने और चलाना चाहते हैं। उनमें से प्रत्येक पर स्ट्रिंग करने के लिए उन्हें स्ट्रिंग्स में भी कम करना चाहिए (जब तक वे फ़ंक्शन डिलीवर होने पर काम करना चाहिए) और तो बस उस स्क्रिप्ट स्ट्रिंग के लिए prepending। इस तरह से हमें आयात करने की ज़रूरत नहीं है कि हम पहले से लिखे गए कोड के दायरे में बंडल कर सकते हैं।

इस विशेष संस्करण के लिए एकमात्र वास्तविक नकारात्मकता यह है कि लिंटर्स सेवा वर्कर कोड (क्योंकि यह सिर्फ एक स्ट्रिंग है) को एकजुट नहीं कर पाएगा, जो "अलग कार्यकर्ता कार्य दृष्टिकोण" के लिए एक लाभ है।

यह सिर्फ इसके ऊपर एक अतिरिक्त है – जेएसफ़ैल्ड में वेब श्रमिकों के परीक्षण के लिए मेरे पास अच्छा टेम्पलेट है। ब्लॉब के बजाय यह jsFiddles का उपयोग करता है ?js 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); } }) 

सामान्य वेब कर्मचारी और साझा कार्यकर्ता टेम्पलेट उपलब्ध हैं।

मुझे पता चला कि CodePen वर्तमान में वाक्य-हाइलाइट इनलाइन <script> टैग नहीं लिखता है, जो type="text/javascript" (या जिनके पास कोई प्रकार विशेषता नहीं है)।

इसलिए मैंने break साथ लेबल वाले ब्लॉकों का उपयोग करते हुए एक समान लेकिन थोड़ा अलग समाधान तैयार किया, जो एक ही तरीका है जिसे आप एक <script> फ़ंक्शन (बिना अनावश्यक) के बिना एक <script> टैग से जमानत कर सकते हैं।

 <!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> 

मैं इस तरह से कोड का उपयोग करता हूं, आप सादे पाठ के अलावा एक फ़ंक्शन के रूप में अपने ऑन-मेसेज को परिभाषित कर सकते हैं, इसलिए संपादक आपके कोड और जेशिंट कार्यों को उजागर कर सकता है।

 const worker = createWorker(); createWorker() { const scriptContent = getWorkerScript(); const blob = new Blob([ scriptContent, ], { type: "text/javascipt" }); const worker = new Worker(window.URL.createObjectURL(blob)); return worker; } getWorkerScript() { const script = { onmessage: function (e) { console.log(e); let result = "Hello " + e.data postMessage(result); } }; let content = ""; for (let prop in script){ content += `${prop}=${script[prop].toString()}`; } return content; }