require jsを使ってjavascriptアクションをバインドする方法

私の新しいプロジェクトでは、Webサイトにたくさんのボタン/要素(ajaxから読み込むかもしれない)があります。以前のアプローチでは、すべてのjavascriptを1つのファイルに書き込んでボタン/エレメントをトリガーしました。

例えば、

私のHTMLマークアップで:

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

//Trigger "STH.blah" function
 foo
 <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());
      }
 }

To handle the dependencies before, what I did is group all fancybox.js and bootstrap.js in to single file, let's say I named it library.js

しかし、コードが長くなったので、新しいプロジェクトでは require.js を使い始めました。これまでのところ、気分はかなり良いです。しかし、私は過去の action-botton の処理方法を知らない。

たとえば、 ABC STH は異なる名前空間であるため、2つのjavascriptファイル ABC.js STH.js 。一度ボタン/要素がそれを必要とすると、私は...

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

私の質問は、自動的に必要なjavascriptファイルをロードして正しいアクションをトリガーできるように、自分のすべてのアクションを制御するハンドラを書く考えですか?

2
nl ru de
これで運がいい?あなたは後でどのように管理しましたか
追加された 著者 FloatingRock,
ハハ、数ヶ月後に人々が私にコメントを残していると思ったことはありません。アプローチ1: data - * のようなjavascriptアクションdomの属性もモジュールを作成します。そのクリックを聞き、属性を使用して、呼び出されたモジュールを呼び出す必要があるかどうかを判断します。アプローチ2のバックボーン、emberjs、angularjs、flightjs ...など
追加された 著者 Cauliturtle,

答えはありません

0
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript