JavaScriptコードをjquery配下に整理する（js関数化）

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptコードをjquery配下に整理する（js関数化）_基礎知識

May 16, 2016 pm 06:20 PM

関数

魔法の "$" 関数から始めます
"$" 関数は、ドキュメントが読み込まれた後にイベントを指定されたボタンにバインドします。これらのコードは、単一の Web ページで正常に機能します。ただし、他のページがある場合は、このプロセスを繰り返す必要があります。

コードをコピーコードは次のとおりです。

 
<a href="javascript:; " id= "sayHello">Say Hello</a> 
<script type="text/javascript"> 
//dom の準備ができたら、何かをします。
// クリック イベントをバインドします
$(function(){ 
$('#sayHello').click(function(){ 
alert('Hello world!'); 
}); 
 }); 
</script> 

ボタンに別のアクションが必要な場合はどうすればよいでしょうか?たとえば、次のようになります。

コードをコピーコードは次のとおりです:

 
<a href="javascript: ;" id="sayUnlike">それとは異なります
<script type="text/javascript"> 準備ができたら、何かをしてください。 // クリック イベントをボタンにバインドします。 
$(function(){ 
$('#sayUnlike').click(function(){ 
alert('I like it.'); 
}); 
}); 
</script> 

 
次に、このようなボタンがたくさん必要になりますが、これは難しくないようです。 

コードをコピーコードは次のとおりです。

<a href="javascript:; " class= "sayUnlike">Unlike it</a>

<script type="text/javascript"> 
//すべてのボタン要素と一致するようにクラス セレクターに変更します。
$ (function( ){ 
$('.sayUnlike').click(function(){ 
alert('私はそれとは違います。'); 
}); 
}); </ script> 

 
同じ種類の 2 つのボタンが 1 つのページに表示されます... 

コードをコピーコードは次のとおりです。 <a href="javascript:;" class='sayHello'>SayHello</a> javascript:; " class="sayUnlike">それとは異なります</a>

$(function(){ 
$('.sayHello' ).click (function(){ 
alert('Hello world!'); 
}); 
$('.sayUnlike').click(function(){ 
alert('I '); 
}); 
</script> 

 
 ただし、これらの 2 種類のボタンが順番に使用されるわけではありません。ページ上で追加のセレクターを使用するには、必要な調整を行う必要があります。これは、クラスベースのセレクターのパフォーマンスが ID セレクターに比べて非常に高価であるためです。すべての DOM 要素を走査し、正規表現を使用してクラスに一致させる必要があります。属性を使用して、条件を満たす要素を選択します。 

コードをコピー

コードは次のとおりです。 <? 'A' ){?> <script type="text/javascript"> $(function(){

$('.sayHello').click(function(){

alert ('Hello world!') 
}); 
<? page == 'B'){?> 
<script type="text/javascript"> 
$(function(){ 
$('.sayUnlike').click(function( ){ 
alert('私はそれとは違います。') 
}); 
 
私たちのプロジェクトの機能はますます複雑になり、時間が経つと、このようになりました。簡単ですが汚いです...

コードをコピー
 
 コードは次のとおりです:

<? if($page == 'A' または $page == "C" で、$page は "D" ではありません){ ?>
<script type="text/javascript">
</script> } ?> <? if ($page == "B" または $page == "E" かつ $page が "X" ではない){ ?><script type="text/javascript"> >... ..

</script> <? if($page == "B" または $page == "C "){ ?> <script type="text/javascript"> </script> } ? ;
これは非常に問題です。すべてのイベントをバインドするには、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('私はそれとは違います。'); 
}); 
</ script> 

 
DOM 要素は次のように記述されます: 
<a href="javascript:;" class="ja_sayhello">Say Hello</ a> a 
< a href="javascript:;" >Say Like Like</a> これは、クラス セレクターを 1 回実行するだけで済むようです。ページがロードされます (上記のコード (コード内のすべての '.j' 要素) では、イベントにバインドする必要があるすべての要素が見つかります。バインドされる特定のコンポーネントは、クラス名の a_xxx によって決まります。これは Yottaa.init_xxx に対応し、現在の要素の参照をパラメータとしてイベント ロジックに渡します。 
この処理モードでは、イベント処理ロジックを手動で再度記述して $(function(){ .... }) のような初期化関数に入れる必要はありません。コンポーネントの「コンテナ」に 2 つのクラスを追加します:「ja_XXX」 このプログラムは、一般的に使用される展開/縮小効果、全選択/反転選択効果などの作業を完了するのに役立ちます。タブ切り替えなど、このメソッドは他の簡単な機能にも使用できます。これが伝説の特効薬なのだろうか？いいえ、それほど単純ではありません。このアプローチにはいくつかの弱点があるはずです。

コンポーネントに初期化パラメータを渡すことができません。
コンポーネントの包含関係を反映することも、継承やポリモーフィズムなどのオブジェクト指向機能を使用してプログラムを書きやすく理解しやすくすることもできません。
特定の関係を持つ一部のコンポーネントを処理するのは少し面倒で、合理的なイベント通知メカニズムはありません。
最初のものを見てみましょう: パラメータの受け渡しに関しては、複数のエントリのリストの多くのシナリオでは、通常、各エントリに対応する要素に一意の ID を割り当てます。これらの要素の動作は似ています。唯一の違いは、メッセージリストや製品リストなど、サーバー側の番号です。 id 属性を使用して何かを行うことができます。以下のコードを見てください。id 属性を使用して、エントリに対応するサーバー側の番号をサーバー側に送り返します。後続のイベントロジック処理におけるコールバック関数のパラメーター。

コードをコピー

コードは次のとおりです:

if(data){

alert('からのメッセージサーバー: ' データ );
}

<a href="javascript:;" j a_sampleajax' id='item-a'>サーバーメッセージを表示します。
<a href="javascript:;" 別の同じアクションを持つボタンですが、サーバー側の識別子が異なります。

より複雑なシナリオでは、ページ上のインラインコードを使用して、必要な情報をコンポーネントに渡すことができます。

コードをコピーしますコードは次のとおりです:

 
Yottaa.globalConst = { 
User :{ 
家族名: "Jhone", 
名: 'ブルース' 
}, 
URL:{ 
サイト名: 'yottaa.com', 
スコア: 98 
 } 
} 
Yottaa.componentMetaData = { 
compoment_id_1:{ ...... }, 
component_id_2:{ ...... } 
}; > 
上記では可能なコード編成方法について説明しましたが、すべてのプロジェクトに適しているわけではありません。私たちがしなければならないことは、現状に基づいて比較的低コストのリファクタリング ソリューションを見つけることです。次の点を考慮します。 

イベントバインディングコードと要素のコンポーネントコードを分離します。コンポーネントコードには、jquery ライブラリ、関連する拡張プラグイン、およびチャートボックスやその他のコンテンツなどの独自に作成したウィジェットが含まれます。
イベントバインディングと処理ロジック: さまざまなコンポーネントに従って複数のモジュールに分割され、各モジュールは関数内に配置されます。
このページでは、このページでどのモジュールを初期化するかを指定し、グローバルイベントバインダーによる統合処理のためのリストを提供する必要があります。
コードの一部を示してみましょう:

コードをコピーしますコードは次のとおりです:

< スクリプト type="text/javascript">

function init_loginPanel = function(){ 
var コンテナ = $('#login_button'); function(){ 
.... 
}); 
} 
function init_chart = function(){ 
.... 
} 
/ /global static init メソッド 
Yottaa.initComponents = function(components){ 
for(var i = 0;iif(typeof window[components[i]] = = 'Function' ){ 
window[components[i]](); 
} 
} 
} 
// 上記は「オールインワン」アセット ファイル内にあります。運用環境では 
varコンポーネント = ['init_loginPanel', 'init_chart']; 
var metaData = { 
loginPanel: {}, 
chart: {}, 
 .... .. 
}; 
$(function(){ 
Yottaa.initComponents(components); 
}); ここにページのインライン スクリプトがあります。 🎜>