この記事では、js を使用して jQuery をカプセル化する簡単な方法を実装する方法を説明します。 この記事では、以下のいくつかのjQueryメソッドを実装します。これを8つの小さな目標に分けます。
不正確な点がありましたら、コメント欄で指摘していただければ幸いです。 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 コードを分析してみましょう。
最初の小さな目標は、上記のコードの機能を実装するために、js を自分でカプセル化することです。私たちは3段階の戦略を通じてこれを実現します。
最初のステップは、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 を作成して新しいものを実装するプロセスは、誰にとっても明らかです。確認してみましょう。
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Docker マルチステージビルドを使用してイメージサイズを縮小する方法
参考までに、ネイティブjsを使用して簡単な計算機(詳細なコメント付き)を実装します。具体的な内容は次...
目次1. スイッチ2. whileループ3. Do/Whileループ3. 文字列を数値に変換する1....
この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...
3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...
序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...
1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼...
関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...
1. MySQL アーキテクチャストレージ エンジンを紹介する前に、まずは MySQL アーキテクチ...
CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...
MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...
目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...
著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...
いわゆるファビコンは、Favorites Icon の略で、中国語ではウェブサイトアバターと呼ばれて...
コードをコピーコードは次のとおりです。 <html xmlns="http://ww...
1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...