网络工作者在Chrome打包计算器应用中解析原始输入

Question

I am currently working on a calculator that will run as a packaged (desktop) chrome app. I am using the math.js library to parse math input. This is my old code:

evaluate.js:

var parser = math.parser();  
function evaluate(input){  
    $("#output").text(parser.eval(input));  
}

However, if the input is something unreasonable like 6234523412368492857483928! , the app just freezes, because it is trying to evaluate the input. I know that math.js is still in beta so eventually there might be a fix (overflow errors), but I couldn't find any other library that parses raw input the way math.js does.

To fix this, I am trying to fix this using web workers to run it asynchronously. Here is the code that I have right now:

main.js

var evaluator = new Worker('evaluate.js');
evaluator.addEventListener('message', function(e){
    $("#output").text(e.data);
}, false);
function evaluate(input){
    evaluator.postMessage(input);
}

evaluate.js

var parser = math.parser();
function mathEval(input){
    return parser.eval(input);
}
self.addEventListener('message', function(e){
    self.postMessage(mathEval(e.data));
});

However, this doesn't work when I run it. Also, I noticed that when I use web workers, it throws the error Uncaught ReferenceError: math is not defined - evaluate.js:1 , but it didn't throw this error with the old code.

Questions: Why doesn't this code work to evaluate the input? Is it possible to use multiple workers to speed it up? If I wanted to implement some sort of overflow error for when the worker takes more than 2 seconds, what would be the best way to go about doing it? Finally, is there a better way to do this?

Answer 1

Web Workers are run in totally separate context. They don't have access to the objects from parent web page. If you want to use math.js you have to import it into the worker using importScript.

I recommend to read Using Web Workers guide, part "Importing Scripts And Libraries" which describes how to do it, and how it works in detail.