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

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

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

Say Hello

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

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

それとは異なります



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

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

Unlike it

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

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



コードをコピー

コードは次のとおりです。 'A' ){?> $(function(){

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

alert ('Hello world!')
});
page == 'B'){?>

if($page == 'A' または $page == "C" で、$page は "D" ではありません){ ?>
} ?> if ($page == "B" または $page == "E" かつ $page が "X" ではない){ ?> if($page == "B" または $page == "C "){ ?> } ? ;
これは非常に問題です。すべてのイベントをバインドするには、1 つのページに多くのコード スニペットを読み込む必要があります。複数の JS ファイルに異なるコードを読み込むと、複数のページのリソース消費が増加します。管理とユーザー エクスペリエンスに問題があるため、より良いソリューションを見つける必要があります。
クラスセレクターのオーバーヘッドが非常に高いため、1 回のスキャンですべてのイベントをバインドできますか?試してみましょう:

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

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

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




コードをコピー


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

varコンポーネントid = $(this).attr('id').split(' -') [1]; $.get('/server/controller/method', {id:component_id}, function(data){

if(data){

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

サーバー メッセージを表示します。


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

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

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

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

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

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);
}); ここにページのインライン スクリプトがあります。 🎜>