2

在我的新项目中，网站中有很多按钮/a 元素（它们可能从 ajax 加载）。在以前的方法中，我将所有 javascript 编写在一个文件中以触发那些按钮/a 元素。

例如，

在我的 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());
      }
 }

为了处理之前的依赖关系，我所做的是将所有内容分组fancybox.js并bootstrap.js放入单个文件中，假设我将其命名为library.js

但是我发现代码越来越长，所以对于新项目，我开始使用require.js. 目前为止感觉还不错。但我不知道如何处理好我的渗透性action-botton。

假设ABC和STH是不同的命名空间，所以我分成 2 个 javascript 文件ABC.js和STH.js. 一旦按钮/ a 元素需要它，我就会...

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

我的问题是，有什么想法可以编写一个处理程序来控制我所有的动作按钮，让它们自动加载所需的 javascript 文件并触发正确的动作吗？

4

0 回答 0