web-dev-qa-db-ja.com

HTML 5WebワーカーでjQueryにアクセスする方法

HTML5内のjQueryにアクセスできません webworker 。それを行う方法はありますか？

javascriptjqueryhtmlweb-worker
20
user960567

tl; dr：include このスクリプト jQueryの前

JQueryは最初に多くのdocumentプロパティにアクセスして、ブラウザの機能をチェックします。 documentはWorkerで定義されておらず、現時点ではWebワーカーで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);

テストスクリプト

私のスクリプトでさまざまなバージョンのJQueryを試すことができます。

JSfiddle

http://を使用していることを確認してください。私のドメインはhttps://で機能しません。

スクリプトとしてダウンロード

22
Tomáš Zato

TomášZatoの答えは正しかったが、新しいjQueryバージョンでは機能しなくなった。 jQuery3.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; }
}
7
Luke Vo

誰かがjQueryを試しましたか-DOMエディションはありませんか？ https://github.com/kpozin/jquery-nodom 。

これは、ほとんどのブラウザAPIが存在しないWebWorkerコンテキストでの使用を目的としたjQueryライブラリの小さなサブセットです。

これは主に、jQueryビルド命令（Makefile）を変更して非DOMモジュールのみを含めることで実現されます。

このビルドにはDOM依存関係がないため、これは問題の解決に役立つ可能性があります。これは、WebworkerにjQueryをインポートする際のハードルです。このためにすぐにいくつかのサンプルコードを提供しようとします

4
Anirudh Prabhu

JQuery独自のリーダーの1人がjQueryでWebWorkerを使用するためのNiceプラグインがあります。チェックアウト GitHubの彼のプラグイン 。

1
tim peterson

使用していますか：

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

期待どおりに動作しませんか？問題なくjQueryをロードできると思いますが、WebWorker内にDOMアクセスがないため、good-ole $に関連付けられたほとんどの呼び出しは期待どおりに機能しません。

0
meawoppl

別の方法として、 Cheerio を使用できます。

サーバー専用に設計されたコアjQueryの高速で柔軟かつ無駄のない実装。

browserify モジュールを作成し、 結果のファイル をWebワーカーにロードするだけです。次に、jQueryと同じように、文字列ドキュメントを解析してクエリを実行できるようになります。

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