ホームページ > 記事 > ウェブフロントエンド > JavaScriptコードをjquery配下に整理する（js関数化）_基礎知識
JavaScriptコードをjquery配下に整理する（js関数化）_基礎知識
- WBOYオリジナル
- 2016-05-16 18:20:48997ブラウズ
魔法の "$" 関数から始めます
"$" 関数は、ドキュメントが読み込まれた後にイベントを指定されたボタンにバインドします。これらのコードは、単一の Web ページで正常に機能します。ただし、他のページがある場合は、このプロセスを繰り返す必要があります。
コードをコピー コードは次のとおりです。
ボタンに別のアクションが必要な場合はどうすればよいでしょうか?たとえば、次のようになります。
コードをコピー コードは次のとおりです:
コードをコピー コードは次のとおりです。
Unlike it ただし、これらの 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 属性を使用して、エントリに対応するサーバー側の番号をサーバー側に送り返します。後続のイベント ロジック処理におけるコールバック関数のパラメーター。
コードをコピー
コードは次のとおりです:
これは非常に問題です。すべてのイベントをバインドするには、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 属性を使用して、エントリに対応するサーバー側の番号をサーバー側に送り返します。後続のイベント ロジック処理におけるコールバック関数のパラメーター。
コードをコピー
コードは次のとおりです: