JavaScriptコードをjquery配下に整理する（js関数化）_基礎知識
魔法の "$" 関数から始めます
"$" 関数は、ドキュメントが読み込まれた後にイベントを指定されたボタンにバインドします。これらのコードは、単一の Web ページで正常に機能します。ただし、他のページがある場合は、このプロセスを繰り返す必要があります。
ボタンに別のアクションが必要な場合はどうすればよいでしょうか?たとえば、次のようになります。
ただし、これらの 2 種類のボタンが順番に使用されるわけではありません。ページ上で追加のセレクターを使用するには、必要な調整を行う必要があります。これは、クラスベースのセレクターのパフォーマンスが ID セレクターに比べて非常に高価であるためです。すべての DOM 要素を走査し、正規表現を使用してクラスに一致させる必要があります。属性を使用して、条件を満たす要素を選択します。
コードをコピー
これは非常に問題です。すべてのイベントをバインドするには、1 つのページに多くのコード スニペットを読み込む必要があります。複数の JS ファイルに異なるコードを読み込むと、複数のページのリソース消費が増加します。管理とユーザー エクスペリエンスに問題があるため、より良いソリューションを見つける必要があります。
クラスセレクターのオーバーヘッドが非常に高いため、1 回のスキャンですべてのイベントをバインドできますか?試してみましょう:
<スクリプト タイプ="text /javascript">
// グローバル名前空間を登録します。
var Yottaa = Yottaa ||
Yottaa.EventMonitor = function(){
this.listeners = {}; ;
}
//すべてのイベントをバインドします。
Yottaa.EventMonitor.prototype.subscribe=function(msg, callback){
var lst = this.listeners[msg]; lst) {
lst.push(callback);
} else {
this.listeners[msg] = [callback];
}
}
// イベントモニターを作成する
var events_monitor = new Yottaa.EventMonitor();
functionload_event_monitor(root){
var re = /a_(w )/; //すべてのイベント オブジェクトをフィルタリングします。 🎜>var fns = {};
$(".j", root).each(function(i) {
var m = re.exec(this.className);
if (m) {
var f = fns[m[1]];
if (!f) { //イベントハンドラー関数が存在しない場合は、関数オブジェクトを作成します。
f = eval("Yottaa. init_" m[1] );
fns[m[1]] = f;//バインディング関数を呼び出します。
}
f && f(this);
}
} );
}
$(function(){
// dom の準備ができたら、すべてのイベントをバインドします。
load_event_monitor(document);
});
Yottaa.init_sayhello = function(obj){
$(obj).click(function(){
alert('Hello world!');
}); }
よかったです。init_unlike = function(obj){
$(obj).click(function(){
alert('私はそれとは違います。');
});
DOM 要素は次のように記述されます:
Say Hello a
< a href="javascript:;" >Say Like Like これは、クラス セレクターを 1 回実行するだけで済むようです。ページがロードされます (上記のコード (コード内のすべての '.j' 要素) では、イベントにバインドする必要があるすべての要素が見つかります。バインドされる特定のコンポーネントは、クラス名の a_xxx によって決まります。これは Yottaa.init_xxx に対応し、現在の要素の参照をパラメータとしてイベント ロジックに渡します。
この処理モードでは、イベント処理ロジックを手動で再度記述して $(function(){ .... }) のような初期化関数に入れる必要はありません。コンポーネントの「コンテナ」に 2 つのクラスを追加します:「ja_XXX」 このプログラムは、一般的に使用される展開/縮小効果、全選択/反転選択効果などの作業を完了するのに役立ちます。タブ切り替えなど、このメソッドは他の簡単な機能にも使用できます。これが伝説の特効薬なのだろうか？いいえ、それほど単純ではありません。このアプローチにはいくつかの弱点があるはずです。
コンポーネントの包含関係を反映することも、継承やポリモーフィズムなどのオブジェクト指向機能を使用してプログラムを書きやすく理解しやすくすることもできません。
特定の関係を持つ一部のコンポーネントを処理するのは少し面倒で、合理的なイベント通知メカニズムはありません。
最初のものを見てみましょう: パラメータの受け渡しに関しては、複数のエントリのリストの多くのシナリオでは、通常、各エントリに対応する要素に一意の ID を割り当てます。これらの要素の動作は似ています。唯一の違いは、メッセージ リストや製品リストなど、サーバー側の番号です。 id 属性を使用して何かを行うことができます。以下のコードを見てください。id 属性を使用して、エントリに対応するサーバー側の番号をサーバー側に送り返します。後続のイベント ロジック処理におけるコールバック関数のパラメーター。
コードをコピー
コードは次のとおりです:
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7617
15
1388
52
89
11
30
136
golang 関数で新しい関数を動的に作成するためのヒント
Apr 25, 2024 pm 02:39 PM
Go 言語は、クロージャとリフレクションという 2 つの動的関数作成テクノロジを提供します。クロージャを使用すると、クロージャ スコープ内の変数にアクセスでき、リフレクションでは FuncOf 関数を使用して新しい関数を作成できます。これらのテクノロジーは、HTTP ルーターのカスタマイズ、高度にカスタマイズ可能なシステムの実装、プラグイン可能なコンポーネントの構築に役立ちます。
C++ 関数の命名におけるパラメーターの順序に関する考慮事項
Apr 24, 2024 pm 04:21 PM
C++ 関数の名前付けでは、読みやすさを向上させ、エラーを減らし、リファクタリングを容易にするために、パラメーターの順序を考慮することが重要です。一般的なパラメータの順序規則には、アクション-オブジェクト、オブジェクト-アクション、意味論的な意味、および標準ライブラリへの準拠が含まれます。最適な順序は、関数の目的、パラメーターの種類、潜在的な混乱、および言語規約によって異なります。
Java で効率的で保守しやすい関数を記述するにはどうすればよいでしょうか?
Apr 24, 2024 am 11:33 AM
効率的で保守しやすい Java 関数を作成するための鍵は、シンプルに保つことです。意味のある名前を付けてください。特殊な状況に対処します。適切な可視性を使用してください。
Excel関数の公式の完全なコレクション
May 07, 2024 pm 12:04 PM
1. SUM 関数は、列またはセルのグループ内の数値を合計するために使用されます (例: =SUM(A1:J10))。 2. AVERAGE 関数は、列またはセルのグループ内の数値の平均を計算するために使用されます (例: =AVERAGE(A1:A10))。 3. COUNT 関数。列またはセルのグループ内の数値またはテキストの数をカウントするために使用されます。例: =COUNT(A1:A10)。 4. IF 関数。指定された条件に基づいて論理的な判断を行い、結果を返すために使用されます。対応する結果。
C++関数のデフォルトパラメータと可変パラメータの長所と短所の比較
Apr 21, 2024 am 10:21 AM
C++ 関数のデフォルト パラメーターの利点には、呼び出しの簡素化、可読性の向上、エラーの回避などがあります。欠点は、柔軟性が限られていることと、名前の制限があることです。可変引数パラメーターの利点には、無制限の柔軟性と動的バインディングが含まれます。欠点としては、複雑さの増大、暗黙的な型変換、デバッグの難しさなどが挙げられます。
参照型を返す C++ 関数の利点は何ですか?
Apr 20, 2024 pm 09:12 PM
C++ で参照型を返す関数の利点は次のとおりです。 パフォーマンスの向上: 参照による受け渡しによりオブジェクトのコピーが回避され、メモリと時間が節約されます。直接変更: 呼び出し元は、返された参照オブジェクトを再割り当てせずに直接変更できます。コードの簡素化: 参照渡しによりコードが簡素化され、追加の代入操作は必要ありません。
カスタム PHP 関数と定義済み関数の違いは何ですか?
Apr 22, 2024 pm 02:21 PM
カスタム PHP 関数と定義済み関数の違いは次のとおりです。 スコープ: カスタム関数はその定義のスコープに限定されますが、事前定義関数はスクリプト全体からアクセスできます。定義方法: カスタム関数は function キーワードを使用して定義されますが、事前定義関数は PHP カーネルによって定義されます。パラメータの受け渡し: カスタム関数はパラメータを受け取りますが、事前定義された関数はパラメータを必要としない場合があります。拡張性: カスタム関数は必要に応じて作成できますが、事前定義された関数は組み込みで変更できません。
C++ 関数例外の詳細: カスタマイズされたエラー処理
May 01, 2024 pm 06:39 PM
C++ の例外処理は、特定のエラー メッセージ、コンテキスト情報を提供し、エラーの種類に基づいてカスタム アクションを実行するカスタム例外クラスを通じて強化できます。 std::Exception から継承した例外クラスを定義して、特定のエラー情報を提供します。カスタム例外をスローするには、throw キーワードを使用します。 try-catch ブロックでdynamic_castを使用して、キャッチされた例外をカスタム例外タイプに変換します。実際の場合、open_file 関数は FileNotFoundException 例外をスローします。例外をキャッチして処理すると、より具体的なエラー メッセージが表示されます。
