all_jquery で jQuery を使わずに Web サイトが単純なニーズを満たすにはどうすればよいでしょうか

jQuery は、現在最も人気のある JavaScript ツール ライブラリです。

統計によると、現在世界中の Web サイトの 57.3% で使用されています。つまり、10 個の Web サイトのうち 6 個が jQuery を使用していることになります。ツール ライブラリを使用するサイトに限ると、この割合は 91.7% という驚異的な数字にまで上昇します。

jQuery は非常に人気がありますが、その肥大化したサイズも頭痛の種です。 jQuery 2.0 の元のサイズは 235 KB で、最適化されたサイズは 81 KB です。IE6、7、および 8 をサポートする jQuery 1.8.3 の場合、元のサイズは 261 KB、最適化されたサイズは 91 KB です。

このサイズだと、モバイルデバイスはおろか、ブロードバンド環境でもフルロードに1秒以上かかります。これは、jQuery を使用する場合、ユーザーがページの効果を確認するまでに少なくとも 1 秒の遅延が発生することを意味します。 jQuery が本質的に DOM を操作するためのツールであることを考慮すると、次のような疑問が生じるだけではありません。「ほんのいくつかの Web ページ効果のためだけに、これほど大規模なライブラリを使用する必要があるのか​​?」

2006 年に jQuery が誕生したとき、jQuery は主に、異なるブラウザ (主に IE6) 間の違いを排除し、開発者にシンプルな統一インターフェイスを提供するために使用されました。当時と比べると、今の状況は大きく変わりました。 IE の市場シェアは減少し続けており、ECMAScript に基づく JavaScript 標準構文はますます広範囲にサポートされています。開発者は、JavaScript の標準構文を直接使用し、それをすべての主要なブラウザで同時に実行できるため、jQuery を通じて互換性を確保する必要がなくなりました。

JavaScript 標準構文を使用して jQuery の主要な関数の一部を置き換え、jQuery フリーにする方法を見てみましょう。

1. DOM 要素を選択します

jQuery の核心は、さまざまなセレクターを通じて DOM 要素を選択することです。この関数をシミュレートするには、querySelectorAll メソッドを使用できます。

コードをコピー コードは次のとおりです。

var $ = document.querySelectorAll.bind (document);

ここで、querySelectorAll メソッドは NodeList オブジェクトを返すことに注意してください。これは配列 (数値インデックスと長さのプロパティを持つ) によく似ていますが、配列ではなく、pop や配列固有のメソッドではありません。プッシュは使用できません。必要に応じて、Nodelist オブジェクトを配列に変換することを検討してください。

コードをコピー コードは次のとおりです。

myList = Array.prototype.slice.call (myNodeList) ;

2. DOM 操作

DOM 自体には豊富な操作メソッドがあり、jQuery が提供する操作メソッドを置き換えることができます。

DOM 要素を最後に追加します。

コードをコピー コードは次のとおりです:

// jQuery 書き込み
$(親) .append ($(child));
// DOM 書き込み
parent.appendChild (child)

DOM 要素を head に挿入します。

コードをコピー コードは次のとおりです:

// jQuery 書き込み
$( parent) .prepend ($(child));
// DOM 書き込み
parent.insertBefore (child,parent.childNodes[0])

DOM 要素を削除します。

コードをコピー コードは次のとおりです:

// jQuery 書き込み
$( child) .remove ()
// DOM 書き込み
child.parentNode.removeChild (child)

3. イベント監視

jQuery の on メソッドは、addEventListener を使用してシミュレートできます。

コードをコピー コードは次のとおりです。

Element.prototype.on = Element.prototype.addEventListener;

使いやすくするために、このメソッドを NodeList オブジェクトにデプロイすることもできます。

コードをコピー コードは次のとおりです:

NodeList.prototype.on = function (event, fn) {
[]['forEach'].call (this, function (el) {
el.on (event, fn);
});
これを返す;
};

4. イベントトリガー

jQuery のトリガー メソッドは別途デプロイする必要があり、比較的複雑です。

コードをコピー コードは次のとおりです。

Element.prototype.trigger = function (type , data) {
varevent = document.createEvent ('HTMLEvents');
event.initEvent (type, true, true);
event.data = data {};
event.eventName = タイプ;
event.target = this;
this.dispatchEvent (イベント);
これを返す;
};

このメソッドを NodeList オブジェクトにもデプロイします。

コードをコピー コードは次のとおりです。

NodeList.prototype.trigger = function (even ) {
[]['forEach'].call (this, function (el) {
el['trigger'](event);
});
return this;
};

5. ドキュメントの準備完了

現在のベスト プラクティスは、JavaScript スクリプト ファイルをページの下部にロードすることです。この場合、document.ready メソッド (jQuery では $(function) と省略されます) は、実行時にすでに DOM オブジェクトが生成されているため、必要ありません。

6. attr メソッド

jQuery は、attr メソッドを使用して Web ページ要素の属性の読み取りと書き込みを行います。

コードをコピー コードは次のとおりです:

$("#picture") .attr ("src ", " http://url/to/image");

DOM 要素を使用すると、属性値を直接読み取ることができ、書き込み方法が非常に簡単になります。

コードをコピー コードは次のとおりです:

$("#picture") .src = "http :// url/to/image";

input 要素の this.value は入力ボックス内の値を返し、link 要素の this.href は絶対 URL を返すことに注意してください。これら 2 つの Web ページ要素の属性の正確な値を使用する必要がある場合は、this.getAttribute (「value」) と this.getAttibute (「href」) を使用できます。

7. addClass メソッド

jQuery の addClass メソッドは、DOM 要素にクラスを追加するために使用されます。

コードをコピー コードは次のとおりです。

$('body') .addClass ( 'hasJS' );

DOM 要素自体には、クラスの操作に使用できる読み取りおよび書き込み可能な className 属性があります。

コードをコピー コードは次のとおりです:

document.body.className = 'hasJS' ;
// または
document.body.className = ' hasJS';

HTML 5 は、より強力な機能を備えた classList オブジェクトも提供します (IE 9 ではサポートされていません)。

コードをコピー コードは次のとおりです。

document.body.classList.add (' hasJS') ;
document.body.classList.remove ('hasJS');
document.body.classList.toggle ('hasJS');
document.body.classList.contains ('hasJS') );

8. CSS

jQuery の css メソッドは、Web ページ要素のスタイルを設定するために使用されます。

コードをコピー コードは次のとおりです:

$(node) .css ("color", "赤") ;

DOM 要素には、直接操作できる style 属性があります。

コードをコピー コードは次のとおりです。

element.style.color = "red" ;;
// または
element.style.cssText = 'color:red';

9. データストレージ

jQuery オブジェクトはデータを保存できます。

コードをコピー コードは次のとおりです:

$("body") .data ("foo", 52);

HTML 5 には同様の機能を持つデータセット オブジェクトがありますが (IE 10 ではサポートされていません)、文字列のみを保存できます。

コードをコピー コードは次のとおりです。

element.dataset.user = JSON.stringify (ユーザー) ;
element.dataset.score = スコア;

10. アヤックス

非同期操作のための jQuery の Ajax メソッド。

コードをコピー コードは次のとおりです。

$.ajax ({
type : "POST ",
url: "some.php",
data: { name: "John", location: "Boston" }
}) .done (function ( msg ) {
alert ( " データが保存されました: " msg );
});

Ajax メソッドをシミュレートするリクエスト関数を定義できます。

コードをコピー コードは次のとおりです:

関数リクエスト (type、url、opts、 callback) {
var xhr = new XMLHttpRequest ();
if (typeof opts === 'function') {
callback = opts;
opts = null;
}
xhr.open (type, url);
var fd = new FormData ();
if (type === 'POST' && opts) {
for (opts の var key) {
fd.append (key, JSON.stringify (opts[key]));
}
}
xhr.onload = function () {
callback (JSON.parse (xhr.response)) ;
};
xhr.send (opts ? fd : null);
}

次に、リクエスト関数に基づいて、jQuery の get メソッドと post メソッドをシミュレートします。

コードをコピー コードは次のとおりです。

var get = request.bind (this, 'GET' );
var post = request.bind (this, 'POST');

11. アニメーション

jQuery の animate メソッドは、アニメーション効果の生成に使用されます。

コードをコピー コードは次のとおりです。

$foo.animate ('slow', { x: ' =10px ' });

jQuery のアニメーション効果は主に DOM に基づいています。ただし、現在、CSS 3 アニメーションは DOM よりもはるかに強力であるため、CSS にアニメーション効果を記述し、DOM 要素のクラスを操作してアニメーションを表示できます。

コードをコピー コードは次のとおりです。

foo.classList.add ('animate');

アニメーションにコールバック関数を使用する必要がある場合、CSS 3 は対応するイベントも定義します。

コードをコピー コードは次のとおりです。

el.addEventListener ("webkitTransitionEnd",transitionEnded) );
el.addEventListener ("transitionend",transitionEnded);

12. 代替案

jQuery のサイズが大きいため、代替手段は無限にあります。

その中で最も有名なのは zepto.js です。その設計目標は、最小のサイズで jQuery の API と可能な限り互換性を持たせることです。 zepto.js バージョン 1.0 の元のサイズは 55 KB で、29 KB に最適化され、10 KB に gzip 圧縮されます。

最大限の互換性を求めず、jQuery の基本機能をシミュレートしたいだけの場合、最適化後の min.js はわずか 200 バイトですが、dolla は最適化後に 1.7 KB になります。

また、jQuery自体がモジュール設計を採用しているため、必要なモジュールのみを選択して使用することができます。詳細については、GitHub Web サイトを参照するか、専用の Web インターフェース を使用してください。

13. 参考リンク

- Remy Sharp、jQuery についてはわかりました。
- Hemanth.HM、Power of Vanilla JS
- Burke Holland、5 つのことjQuery を使うのはやめるべきです

(終了)