javascript 如何在 HTML 5 web worker 中访问 jQuery

How to access jQuery in HTML 5 web worker

提问by user960567

I am unable to to access jQuery inside an HTML5 web worker. Is there a way I can do that?

我无法在 HTML5 web worker 中访问 jQuery 。有没有办法做到这一点？

回答by Tomá? Zato - Reinstate Monica

tl;dr: include this scriptbefore jQuery

tl;dr:在 jQuery 之前包含这个脚本

JQuery initally accesses lots of documentproperties to check for browser features. documentis not defined in Worker and you actually cannot create Documentinstance in web workers at this moment. JQuery isn't prepared for that - as you could see in comments on your question, nobody seems to understand what would you do with JQuery without DOM.

JQuery 最初访问许多document属性来检查浏览器功能。document未在 Worker 中定义，此时您实际上无法Document在 Web Worker 中创建实例。JQuery 并没有为此做好准备 - 正如您在对问题的评论中看到的那样，似乎没有人理解没有 DOM 的情况下您会用 JQuery 做什么。

Since, as I said, JQuery needs documentto initialise, I created a dummy fake document object. This object acts as real document during JQuery tests:

因为，正如我所说，JQuery 需要document初始化，所以我创建了一个虚拟的假文档对象。此对象在 JQuery 测试期间充当真实文档：

var document = self.document = {parentNode: null, nodeType: 9, toString: function() {return "FakeDocument"}};
var window = self.window = self;
var fakeElement = Object.create(document);
fakeElement.nodeType = 1;
fakeElement.toString=function() {return "FakeElement"};
fakeElement.parentNode = fakeElement.firstChild = fakeElement.lastChild = fakeElement;
fakeElement.ownerDocument = document;

document.head = document.body = fakeElement;
document.ownerDocument = document.documentElement = document;
document.getElementById = document.createElement = function() {return fakeElement;};
document.createDocumentFragment = function() {return this;};
document.getElementsByTagName = document.getElementsByClassName = function() {return [fakeElement];};
document.getAttribute = document.setAttribute = document.removeChild = 
  document.addEventListener = document.removeEventListener = 
  function() {return null;};
document.cloneNode = document.appendChild = function() {return this;};
document.appendChild = function(child) {return child;};

Beware that this fake document is only meant to allow jQuery to load, it won't allow any real DOM operations.

请注意，这个伪造的文档只是为了允许 jQuery 加载，它不会允许任何真正的 DOM 操作。

Example usage:

用法示例：

importScripts("workerFakeDOM.js");
importScripts('jquery-2.1.4.min.js');
console.log("JQuery version:", $.fn.jquery);

Test script

测试脚本

Allows you to try various versions of JQuery with my script.

允许您使用我的脚本尝试各种版本的 JQuery。

JSfiddle

JSfiddle

Check that you're using http://, my domain doesn't work with https://.

检查您是否正在使用http://，我的域不适用于https://.

Download as script

作为脚本下载

回答by Luke Vo

The answer of Tomá? Zato was correct, but no longer works with newer jQuery version. I added some more for jQuery 3.1.1:

托马斯的答案？Zato 是正确的，但不再适用于较新的 jQuery 版本。我为 jQuery 3.1.1 添加了更多内容：

var document = self.document = { parentNode: null, nodeType: 9, toString: function () { return "FakeDocument" } };
var window = self.window = self;
var fakeElement = Object.create(document);
fakeElement.nodeType = 1;
fakeElement.toString = function () { return "FakeElement" };
fakeElement.parentNode = fakeElement.firstChild = fakeElement.lastChild = fakeElement;
fakeElement.ownerDocument = document;

document.head = document.body = fakeElement;
document.ownerDocument = document.documentElement = document;
document.getElementById = document.createElement = function () { return fakeElement; };
document.createDocumentFragment = function () { return this; };
document.getElementsByTagName = document.getElementsByClassName = function () { return [fakeElement]; };
document.getAttribute = document.setAttribute = document.removeChild =
    document.addEventListener = document.removeEventListener =
    function () { return null; };
document.cloneNode = document.appendChild = function () { return this; };
document.appendChild = function (child) { return child; };
document.childNodes = [];
document.implementation = {
    createHTMLDocument: function () { return document; }
}

回答by Anirudh Prabhu

Has anyone tried the jQuery - No DOM Edition? https://github.com/kpozin/jquery-nodom.

有没有人试过 jQuery - 无 DOM 版？https://github.com/kpozin/jquery-nodom。

This is a small subset of the jQuery library intended for use in Web Worker contexts, where most of the browser API does not exist.

这是用于 Web Worker 上下文的 jQuery 库的一个小子集，其中大部分浏览器 API 都不存在。

This is achieved primarily by modifying jQuery build instructions (Makefile) to only include the non-DOM modules.

这主要是通过修改 jQuery 构建指令 (Makefile) 以仅包含非 DOM 模块来实现的。

This might help resolve the issue as this build has no DOM dependency, which is a hurdle when importing jQuery in webworker. Will try to provide some sample code soon for this

这可能有助于解决这个问题，因为这个构建没有 DOM 依赖，这是在 webworker 中导入 jQuery 时的一个障碍。将尽快为此提供一些示例代码

回答by tim peterson

There is a nice plugin to use Web Worker with jQuery by one of jQuery's own leaders. Check out his plugin on GitHub.

jQuery 的一位领导者有一个很好的插件可以将 Web Worker 与 jQuery 结合使用。在 GitHub 上查看他的插件。

回答by meawoppl

Does using:

是否使用：

importScripts("jQueryWhatever.js");
$.blahblahblah();

Not work as expected? I suspect it will load jQuery without trouble, but most of the calls associated with good-ole $ will not work as expected as there is no DOM access inside a WebWorker.

没有按预期工作？我怀疑它会毫无问题地加载 jQuery，但大多数与 good-ole $ 相关的调用不会按预期工作，因为 WebWorker 内部没有 DOM 访问。

回答by Delgan

As an alternative, you can use Cheerio.

作为替代方案，您可以使用Cheerio。

Fast, flexible & lean implementation of core jQuery designed specifically for the server.

专为服务器设计的核心 jQuery 的快速、灵活和精益实现。

You will simply need to browserifythe module, and loading the resulting fileinto your web worker. Then, you will be able to parse your string document and query it like jQuery does:

你只需要简单地browserify模块，并加载生成的文件到您的网络工作者。然后，您将能够解析您的字符串文档并像 jQuery 一样查询它：

$ = cheerio.load('<h2 class="title">Hello world</h2>')