通过HTML调用嵌套JavaScript函数(简单)

Calling nested JavaScript function through HTML (simple)

本文关键字：简单 函数 JavaScript HTML 调用 嵌套 通过      更新时间：2023-09-26

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

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

我想创建一个HTML按钮调用函数a和函数b，我怎么能做到这一点?

通过在闭包外声明名称使它们成为全局的，然后在闭包内赋值。

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

您可以创建一个具有这些函数的对象，并像下面这样调用您的函数:

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

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

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

这是检查它的目录

更新:

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

在闭包中将函数赋值给全局变量是一种方法。另一种方法是:

(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"); 
    };
})();

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

(function myfunction($){
    var global = {
        a: function(){
            alert("A section");
        },
        b: function(){
            alert("B section")
        }
    };
    window.global = global;
})();
global.a();
global.b();
相关文章：