如何在HTML 5 Web worker中访问jQuery

Question

我无法在HTML5 web worker中访问jQuery。我有办法做到吗？

Answer 1

tl; dr：在jQuery之前包含this script

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

正如我所说，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;};

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

示例用法：

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

Test script

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

JSfiddle

检查您是否使用http://，我的域名不适用于https://。

Download as script

Answer 2

Tomáš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; }
}

Answer 3

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

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

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

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

Answer 4

有一个很好的插件可以让jQuery自己的领导者使用Web Worker和jQuery。查看his plugin on GitHub。

Answer 5

使用：

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

不按预期工作？我怀疑它会毫无困难地加载jQuery，但是与good-ole $相关的大多数调用都无法正常工作，因为WebWorker中没有DOM访问。

Answer 6

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

  

快速，灵活＆amp;精心实现的核心jQuery设计   专门针对服务器。

您只需要browserify模块，然后将the resulting file加载到您的网络工作者中。然后，您将能够解析您的字符串文档并像jQuery一样查询它：

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