javascript - requirejsを使用してjavascriptアクションをバインドする方法

Question

私の新しいプロジェクトでは、ウェブサイトにたくさんのボタン/要素（ajaxからロードされる可能性があります）があります。以前のアプローチでは、すべてのjavascriptを単一のファイルに書き込んで、これらのボタン/要素をトリガーしました。

例えば、

私のhtmlマークアップで：

 // Trigger "STH.foo" function
 <a href="/hello.html" class="action-button" data-action="STH.foo">foo</a>
 <button data-some-value="foo" class="action-button" data-action="STH.foo">foo</button>

 // Trigger "STH.blah" function
 <a href="/hello.html" class="action-button" data-action="ABC.blah">foo</a>
 <button data-some-value="foo" class="action-button" data-action="ABC.blah">foo</button>

私のJavaScriptで何

 var STH = {};
 // where foo dependence fancybox.js ( Let's say it needed fancybox.js )
 STH.foo = function(){ ... blah blah blah ... };
 // where blah dependence fancybox.js ( Let's say it needed bootstrap.js )
 ABC.blah = function(){ ... blah blah blah ... };
 // finally
 $( function(){
      $('.action-button').on('click', function(){
          STH.run($(this).attr('data-action'), $(this).data());
      }
 }

以前の依存関係を処理するために、私が行ったことは、すべてを1つのファイルにグループfancybox.js化bootstrap.jsすることです。たとえば、名前を付けたとします。library.js

しかし、私が見つけたのは、コードがどんどん長くなってきたので、新しいプロジェクトでは、を使い始めましたrequire.js。これまでのところ、フィーリングはかなり良いです。しかし、私は私の前のをうまく処理する方法がわかりませんaction-botton。

ABCとは別の名前空間であると仮定して、2つのjavascriptファイルとSTHに分けました。ボタン/要素がそれを必要としたら、私は...ABC.jsSTH.js

 require(['fancybox'], function(){
     STH.blah();
 })

私の質問は、すべてのアクションボタンを制御するハンドラーを作成して、必要なjavascriptファイルを自動的にロードし、正しいアクションをトリガーできるようにするアイデアはありますか？