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

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

この記事では、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段階の戦略を通じてこれを実現します。

  1. js は $(".box1") を実装します
  2. $(".box1").click() を実装する
  3. $(".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 を作成して新しいものを実装するプロセスは、誰にとっても明らかです。確認してみましょう。

  1. 関数を実行する
  2. 空のオブジェクトを自動的に作成する
  3. 空のオブジェクトのプロトタイプをコンストラクタのプロトタイププロパティに設定する
  4. 関数内で空のオブジェクトをこれにバインドする
  5. 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • jsをプラグインにカプセル化する手順
  • ネイティブ js にカプセル化された ajax メソッドの例
  • JavaScript 共通ツールメソッドのカプセル化
  • ネイティブjsは、ファイルのアップロード、ダウンロード、パッケージ化などのサンプルメソッドを実装します。
  • JavaScriptスローモーションアニメーション機能のカプセル化方法
  • 一般的なフロントエンドJavaScriptメソッドのカプセル化
  • JavaScript の共通メソッドとカプセル化の詳細

<<:  MySQL で不明なフィールド名を回避する方法

>>:  Docker マルチステージビルドを使用してイメージサイズを縮小する方法

推薦する

jsはシンプルな計算機を実装します

参考までに、ネイティブjsを使用して簡単な計算機(詳細なコメント付き)を実装します。具体的な内容は次...

JavaScript の一般的なステートメント ループ、判定、文字列から数値

目次1. スイッチ2. whileループ3. Do/Whileループ3. 文字列を数値に変換する1....

Vueはショッピングカート決済機能をシミュレートします

この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...

Mysql 文字列の傍受と指定された文字列内のデータの取得

序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...

Vueの子コンポーネントが親コンポーネントのメソッドを呼び出す場合の詳細な説明

1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼...

ウェブページデザインのための4つの実践的なヒント

関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...

MySQL ストレージエンジンの簡単な紹介

1. MySQL アーキテクチャストレージ エンジンを紹介する前に、まずは MySQL アーキテクチ...

CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする

CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...

MYSQL 5.6 スレーブレプリケーションの展開と監視

MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...

Ubuntu 18.04 でソースコードから Odoo14 をインストールするチュートリアル

目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...

MySQL 8.0.23 メジャーアップデート (新機能)

著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...

ウェブサイトにファビコンを追加するためのヒント: URLの前の小さなアイコン

いわゆるファビコンは、Favorites Icon の略で、中国語ではウェブサイトアバターと呼ばれて...

Firefox または IE でスパン幅が決定されない場合の解決策

コードをコピーコードは次のとおりです。 <html xmlns="http://ww...

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...