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

<スクリプト タイプ="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」 このプログラムは、一般的に使用される展開/縮小効果、全選択/反転選択効果などの作業を完了するのに役立ちます。タブ切り替えなど、このメソッドは他の簡単な機能にも使用できます。これが伝説の特効薬なのだろうか？いいえ、それほど単純ではありません。このアプローチにはいくつかの弱点があるはずです。