javascript - 通过 HTML 调用嵌套的 JavaScript 函数（简单）

Question

我知道这是一个重复的主题，但是这个主题是不同的，因为我使用了非常简单的示例。我有一个这样的 JavaScript 函数：

(function myfunction($){
    function a(){
        alert("A section"); 
    }
    function b(){
        alert("B section")
    }
})();

我想创建一个调用函数 A 和函数 B 的 HTML 按钮。我该怎么做？

Answer 1

通过在闭包外部声明名称使它们成为全局，然后在闭包内分配它们。

var a, b;
(function myfunction($){
    a = function() {
        alert("A section"); 
    }
    b = function() {
        alert("B section")
    }
})();

您可以通过将它们包装在一个对象中来减少对全局命名空间的污染：

var myfuns = (function myfunction($) {
                 return { a: function() {alert("A section");},
                          b: function() {alert("B section");}
                        };
              })();

然后调用myfuns.a和myfuns.b。

Answer 2

您可以创建一个具有这些功能的对象并调用您的函数，如下所示：

myFunctions = {

  a : function(){ alert("A section"); },
  b : function(){ alert("B section"); }

}

然后像下面这样调用它们：

myFunctions.a();
myFunctions.b();

这是检查它的jsfiddle 。

更新：

作为对您评论的回答，这是一个更新的jsfiddle，向您展示它是如何在 HTML 中工作的。

Answer 3

在闭包中将函数分配给全局变量是一种方法。其他方法如下。

(function myfunction($){
    $("#button1").click(function {
        alert("A section"); 
    });
    $("#button2").click(function {
        alert("B section"); 
    });
})(jQuery);

这不会破坏您的全球范围。并绑定按钮的点击事件。

不使用 jQuery 时

(function myfunction($){
    var button1 = getElementById("idOfButton1");
    button1.onclick = function {
        alert("A section"); 
    };
    var button2 = getElementById("idOfButton2");
    button1.onclick = function {
        alert("B section"); 
    };
})();

Answer 4

您可以先创建一个变量，然后将其公开给全局上下文：

(function myfunction($){
    var global = {
        a: function(){
            alert("A section");
        },
        b: function(){
            alert("B section")
        }
    };

    window.global = global;
})();
global.a();
global.b();