jsはjQueryをカプセル化する簡単な方法とチェーン操作の詳細な説明を実装します

1. $(".box1").click() メソッドを実装する
2. $("div").click() メソッドを実装する
3. $( ) のパラメータの3つのケースを考える
4. jqでonメソッドを実装する
5. チェーン操作を実装する
6. jqでeqメソッドを実装する
7. jqでendメソッドを実装する
8. jqでCSSメソッドを実装する
要約する

この記事では、js を使用して jQuery をカプセル化する簡単な方法を実装する方法を説明します。

この記事では、以下のいくつかのjQueryメソッドを実装します。これを8つの小さな目標に分けます。

$(".box1").click() メソッドの実装
$("div").click() メソッドの実装
$( ) のパラメータの3つのケースを考える
jq で on メソッドを実装する
チェーンオペレーションの実装
jq で eq メソッドを実装する
jqでendメソッドを実装する
jq での CSS メソッドの実装

不正確な点がありましたら、コメント欄で指摘していただければ幸いです。

1. $(".box1").click() メソッドを実装する

まず、最初の小さな目標として、次の jQuery コードの機能を段階的に実装する方法を設定しました。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 //同じファイルで操作する場合は、以下に紹介するcdnを削除することを忘れないでください
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
 <スタイル> .box1 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 赤;
 } </スタイル>
</head>
<本文>
 <div class="box1"></div>
</本文>
<スクリプト> $(".box1").click(()=>{
 コンソールログ(456);
 }) </スクリプト>
</html>
コードをコピー

 $(".box1").click(()=>{
 コンソールログ(456);
 })

さて、本題に戻って上記の jQuery コードを分析してみましょう。

$(".box1") はセレクター関数を実装します。
$(".box1").clickはセレクター+クリックメソッドの呼び出しです
最後に、関数をクリックに渡します。

最初の小さな目標は、上記のコードの機能を実装するために、js を自分でカプセル化することです。私たちは3段階の戦略を通じてこれを実現します。

js は $(".box1") を実装します
$(".box1").click() を実装する
$(".box1").click( ( ) => { console.log("123") } ) を実装します。

最初のステップは、js で $(".box1") を実装することですよね?

 // $(".box1") を実装する
 クラス jQuery {
 コンストラクタ(引数) {
  console.log(document.querySelector(arg));
 }
 }

 関数 $(arg) {
 新しいjquery(arg)を返します。
 }

 // $(".box1") を実装する
 res = $(".box1"); とします。
 コンソールログ(res);

このように、() メソッドを構築し、jQuery インスタンスを返すことによって、(".box1") が実装されます。

さて、次のステップは $(".box1").click() を実装することです。 jquery クラスに追加のクリックメソッドがあることがわかると思います。

 // $(".box1").click() を実装する
 クラス jQuery {
 コンストラクタ(引数) {
  console.log(document.querySelector(arg));
 }

 クリック（） {
  console.log("クリックメソッドが実行されました");
 }
 }

 関数 $(arg) {
 新しいjquery(arg)を返します。
 }

 // $(".box1").click() を実装する
 res = $(".box1").click(); とします。
 コンソールログ(res);

次に、3 番目のステップに進み、$(".box1").click( ( ) => { console.log("123") } ) を実装します。

 // $(".box1").click(() => {console.log("123")}) を実装します。
 クラス jQuery {
 コンストラクタ(引数) {
  this.element = document.querySelector(arg);
  // console.log(要素);
 }

 クリック(fn) {
  this.element.addEventListener("click", fn);
 }

 }

 関数 $(arg) {
 新しいjquery(arg)を返します。
 }

 // $(".box1").click(() => {console.log("123")}) を実装します。
 $(".box1").click(() => {
 コンソールログ("123")
 });

ここまでで、最初の小さな目標は達成できました。簡単だと思いますか? では、2 番目の小さな目標に移りましょう。

2. $("div").click() メソッドを実装する

2 番目の小さな目標も難しくはありません。クリックイベントにバインドする必要がある div 要素が複数あることを考慮すると、selectSelectorAll を使用して要素を取得する場合、その処理方法は実際には非常に簡単です。クリックメソッドにもう 1 つのループを追加して、NodeList の値を取得するだけです。コードを直接投稿しますので、試してみればわかります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <スタイル> .box1 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 赤;
 }
 .box2 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 青;
 } </スタイル>
</head>

<本文>
 <div class="box1"></div>

 <div class="box2"></div>
</本文>

<script> // $(".box1").click(() => {console.log("123")}) を実装します。
 クラス jQuery {
 コンストラクタ(引数) {
  //次の要素は、長さプロパティを持つ配列のようなオブジェクトである NodeList オブジェクトを格納します。this.element = document.querySelectorAll(arg);
 }

 クリック(fn) {
  for(let i = 0; i < this.element.length; i++) {
  this.element[i].addEventListener("click", fn);
  }  
 }

 }

 関数 $(arg) {
 新しいjquery(arg)を返します。
 }

 // $(".box1").click(() => {console.log("123")}) を実装します。
 $("div").click(() => {
 コンソールログ("123")
 }); </スクリプト>

</html>

さて、2つの小さな目標を達成したので、すでに達成感を感じていると思います。

3. $( ) のパラメータの3つのケースを考える

次に、3番目の小さな目標として、$( )内の異なるパラメータを持つケースを考えてみましょう。まず3つのケースを挙げます。（他にも状況はあるかもしれませんが、ここでは言及しません）

1. ケース1: $() パラメータは文字列です

$(".box1")

2. ケース 2: $() パラメータは関数です。

//パラメータは関数$(function() {
 コンソールログ("123");
 })

3. ケース3: $() パラメータはNodeListオブジェクトまたはselectSelectによって取得されたノードです

// ケース 3 $(document.querySelectorAll("div")).click(()=>{
 コンソールログ("123");
 })
 $(document.querySelector("div")).click(()=>{
 コンソールログ("456");
 })

次の小さな目標は、3 つの状況を実装するための関数を手動で記述することです。まず、addElesメソッドを追加し、上記のクリックメソッドを変更します。

addEles(eles){
  (i = 0 とします; i < eles.length; i++) {
  this[i] = eles[i];
  }
  this.length = eles.length;
 }

 // $(".box1").click(() => {console.log("123")}) を実装します。 
 クリック(fn) {
  for(let i = 0; i < this.length; i++) {
  this[i].addEventListener("click", fn);
  }  
 }

次に、3つの異なるパラメータ処理方法を実装します。

コンストラクタ(引数) {

  //ケース1 if (typeof arg === 'string') {
  this.addEles(document.querySelectorAll(arg));
  }else if(typeof arg === 'function') {
  //ケース 2 document.addEventListener("DOMContentLoaded", arg);
  }それ以外 {
  //ケース3 if (typeof arg.length === 'undefined') {
   this[0] = 引数;
   長さ = 1;
  }それ以外 {
   this.addEles(引数);
  }
  }

 }

4. jqでonメソッドを実装する

次に、4番目の目標を達成し、jqのonメソッドを実装します。

// on メソッド on(eventName, fn) {
  eventArray = eventName.split(" "); とします。
  //複数のノードを考慮する for(let i = 0; i < this.length; i++) {
  //複数のイベントを考慮する for(let j = 0; j < eventArray.length; j++) {
   this[i].addEventListener(eventArray[j], fn);
  }
  }
 }

もう一度テストして問題ないか確認する

// on メソッド $("div").on("mouseover mousedown",function(){
 console.log("メソッドについて");
 })

5. チェーン操作を実装する

次に、5番目の目標を達成し、jqのチェーン操作を実装します。

重要な点は、onにreturn thisを追加してクリックすることで連鎖を実現することです。

//チェーン操作//重要なポイント、チェーン操作を実現するには、on に return this を追加してクリックします//クリックメソッド click(fn) {
  for(let i = 0; i < this.length; i++) {
  this[i].addEventListener("click", fn);
  }
  これを返します。 
  // コンソールログ(これ); 
 }

 // on メソッド on(eventName, fn) {
  eventArray = eventName.split(" "); とします。
  //複数のノードを考慮する for(let i = 0; i < this.length; i++) {
  //複数のイベントを考慮する for(let j = 0; j < eventArray.length; j++) {
   this[i].addEventListener(eventArray[j], fn);
  }
  }
  これを返します。
 }

6. jqでeqメソッドを実装する

次に、6番目の目標を達成し、jqにeqメソッドを実装します。

//eq メソッド eq(index) {
  新しいjquery(this[index])を返します。
 }

新しい jQuery を作成して新しいものを実装するプロセスは、誰にとっても明らかです。確認してみましょう。

関数を実行する
空のオブジェクトを自動的に作成する
空のオブジェクトのプロトタイプをコンストラクタのプロトタイププロパティに設定する
関数内で空のオブジェクトをこれにバインドする
renturn の後にオブジェクトが続く場合は、そのオブジェクトを返します。従わない場合は、自動的にこのオブジェクトに戻ります

7. jqでendメソッドを実装する

7 番目の小さな目標を達成し、jq で end メソッドを実装します。この関数を実装するには、新しい end() メソッドを追加するだけでなく、コンストラクターでも実装し、コンストラクターに新しいパラメーター root を追加し、新しいプロパティ prevObject を追加し、eq メソッドに新しいパラメーター this を追加する必要があります。

コンストラクタ(引数、ルート) {
  if(typeof ルート === "未定義") {
  this.prevObject = [ドキュメント];
  }それ以外 {
  this.prevObject = ルート;
  }
 //eq メソッド eq(index) {
  新しいjquery(this[index], this)を返します。
 }
 //メソッド終了 end() {
  this.prevObject を返します。
 }

8. jqでCSSメソッドを実装する

jqでは、cssはスタイルを取得し、1つのスタイルまたは複数のスタイルを設定できます

// ケース 1: スタイルを取得する (最初の要素のみ取得)

 res = $("div").css("background"); とします。
 コンソールログ(res);

// ケース2（スタイルの設定）

 $("div").css("背景","黄色");

// // ケース3 (複数のスタイルを設定する)

 $("div").css({背景:"黒",幅:200,不透明度:0.3});

次に、CSSメソッドを実装します

//css メソッド css(...args) {
  引数の長さが1の場合

  //ケース1: スタイルを取得する if (typeof args[0] === 'string') {
   this.getStyle(this[0], args[0])を返します。
  }それ以外 {
   //ケース3: 複数のスタイルを設定する for(let i = 0; i < this.length; i++) {
   for(jをargs[0]に入れる) {
    this.setStyle(this[i], j, args[0][j]);
   }

   }
  }
  }それ以外 {
  //ケース3 for(let i = 0; i < this.length; i++) {
   this.setStyle(this[i], args[0], args[1]);
  }
  }
 } //cssメソッド css(...args) {
 引数の長さが1の場合
  //ケース1: スタイルを取得する if (typeof args[0] === 'string') {
  this.getStyle(this[0], args[0])を返します。
  }それ以外 {
  //ケース3: 複数のスタイルを設定する for(let i = 0; i < this.length; i++) {
   for(jをargs[0]に入れる) {
    this.setStyle(this[i], j, args[0][j]);
   }

  }
  }
 }それ以外 {
  //ケース3 for(let i = 0; i < this.length; i++) {
  this.setStyle(this[i], args[0], args[1]);
  }
 }
 }

px を追加せずに属性名を決定する cssNumber メソッドを追加しました

//cssメソッドは$.cssNumber = {を使用します
 アニメーション反復回数: true、
 列数: true、
 塗りつぶしの不透明度: true、
 flexGrow: true、
 フレックスシュリンク: true,
 フォントの太さ: true、
 グリッドエリア: true、
 グリッド列: true、
 グリッド列終了: true、
 グリッド列開始: true、
 グリッド行: true、
 グリッド行終了: true、
 グリッド行開始: true、
 ラインの高さ: true、
 不透明度: true、
 順序: true、
 孤児：本当、
 未亡人：本当です、
 zIndex: 真、
 ズーム: 真
}

最後に、完全なコードを提供します。良いと思ったら、ぜひ高評価を付けてください。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <スタイル> .box1 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 赤;
 }
 .box2 {
  幅: 100ピクセル;
  高さ: 100px;
  背景: 青;
  変換の原点: 0 100% 0;
  遷移: 0.3秒;

 }
 .box2:ホバー{
  変換: scaleX(2);
  幅: 200ピクセル;
  高さ: 100px;
 } </スタイル>
</head>

<本文>
 <div class="box1"></div>

 <div class="box2"></div>
 <button>クリック</button>
</本文>

<script> クラス jquery {

 コンストラクタ(引数、ルート) {
  if(typeof ルート === "未定義") {
  this.prevObject = [ドキュメント];
  }それ以外 {
  this.prevObject = ルート;
  }
  //ケース1 if (typeof arg === 'string') {
  this.addEles(document.querySelectorAll(arg));
  }else if(typeof arg === 'function') {
  //ケース 2 document.addEventListener("DOMContentLoaded", arg);
  }それ以外 {
  //ケース3 if (typeof arg.length === 'undefined') {
   this[0] = 引数;
   長さ = 1;
  }それ以外 {
   this.addEles(引数);
  }
  }

 }

 //メソッドを追加する addEles(eles){
  (i = 0 とします; i < eles.length; i++) {
  this[i] = eles[i];
  }
  this.length = eles.length;
 }

 //チェーン操作//重要なポイント、onにreturnを追加してクリックするとチェーン操作が実現します//クリックメソッド click(fn) {
  for(let i = 0; i < this.length; i++) {
  this[i].addEventListener("click", fn);
  }
  これを返します。 
  // コンソールログ(これ); 
 }

 // on メソッド on(eventName, fn) {
  eventArray = eventName.split(" "); とします。
  //複数のノードを考慮する for(let i = 0; i < this.length; i++) {
  //複数のイベントを考慮する for(let j = 0; j < eventArray.length; j++) {
   this[i].addEventListener(eventArray[j], fn);
  }
  }
  これを返します。
 }

 //eq メソッド eq(index) {
  新しいjquery(this[index], this)を返します。
 }

 //メソッド終了 end() {
  this.prevObject を返します。
 }

 //css メソッド css(...args) {
  引数の長さが1の場合

  //ケース1: スタイルを取得する if (typeof args[0] === 'string') {
   this.getStyle(this[0], args[0])を返します。
  }それ以外 {
   //ケース3: 複数のスタイルを設定する for(let i = 0; i < this.length; i++) {
   for(jをargs[0]に入れる) {
    this.setStyle(this[i], j, args[0][j]);
   }

   }
  }
  }それ以外 {
  //ケース3 for(let i = 0; i < this.length; i++) {
   this.setStyle(this[i], args[0], args[1]);
  }
  }
 }

 getStyle(要素、スタイル名) {
  window.getComputedStyle(ele, null)[styleName]を返します。
 }
 setStyle(要素、スタイル名、スタイル値) {
  if(typeof styleValue === "number" && !(styleName in $.cssNumber)) {
  スタイル値 = スタイル値 + "px"; 
  }
  ele.style[スタイル名] = スタイル値;
 }

 }

 関数 $(arg) {
 新しいjquery(arg)を返します。
 }

 //cssメソッドは$.cssNumber = {を使用します
 アニメーション反復回数: true、
 列数: true、
 塗りつぶしの不透明度: true、
 flexGrow: true、
 フレックスシュリンク: true,
 フォントの太さ: true、
 グリッドエリア: true、
 グリッド列: true、
 グリッド列終了: true、
 グリッド列開始: true、
 グリッド行: true、
 グリッド行終了: true、
 グリッド行開始: true、
 ラインの高さ: true、
 不透明度: true、
 順序: true、
 孤児：本当、
 未亡人：本当です、
 zIndex: 真、
 ズーム: 真
}
 // //実装1: $(".box1")
 // $("div").click(() => {
 // コンソールログ("123")
 // });

 // //実装ケース2: パラメータは関数です // $(function() {
 // console.log('状況2');
 // })

 // // ケース 3// $(document.querySelectorAll("div")).click(()=>{
 // コンソールログ("123");
 // })
 // $(document.querySelector("div")).click(()=>{
 // コンソールログ("456");
 // })

 // // on メソッド // $("div").on("mouseover mousedown",function(){
 // console.log("メソッドについて");
 // })

 //チェーン操作// $("div").click(() => {
 // console.log("クリックメソッド")
 // }).on("マウスオーバー", function() {
 // console.log('メソッドのチェーン');
 // })

 // $("div").on("mouseover", 関数() {
 // console.log('メソッドのチェーン');
 // }).click(() => {
 // console.log("クリックメソッド")
 // })

 // //eq メソッド // $("div").eq(0).click(() => {
 // console.log("eq メソッド")
 // })

 //メソッドの終了// let res = $("div").eq(0).eq(0).eq(0).end();
 // コンソールログ(res);

 //css メソッド// ケース 1: スタイルを取得する (最初の要素のみ取得)
 // res = $("div").css("background"); とします。
 // コンソールログ(res);

 // ケース2（スタイルの設定）
 // $("div").css("背景","黄色");

 // // ケース3 (複数のスタイルを設定する)
 // $("div").css({背景:"黒",幅:200,不透明度:0.3}); </script>
</html>

要約する

これで、js での jQuery カプセル化の簡単な方法とチェーン操作に関する記事は終了です。js での jQuery カプセル化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: