如何仅通过 HTML 调用函数内部的函数答案

【问题标题】：How to call function inside function through only HTML如何仅通过 HTML 调用函数内部的函数
【发布时间】：2016-03-31 09:32:53
【问题描述】：

我只是无法仅使用 HTML 来访问函数内部的函数。 如何仅使用 HTML 调用 setLayout() 还是只能在 Javascript 中调用？

<button onclick="customize.setLayout('b.html');">Click Please</button>

Javascript：

 function customize() {
     function setLayout(text) {

        var selectedLayout = text;
        layout += selectedLayout;
        $.get(layout, function (data) {
            $("#layout-grid").html(data);
        });
    }
}

【问题讨论】：

错了。删除自定义
我不明白。即使它不带参数，您也可以使用参数调用“customize”，并且它永远不会传递给“setLayout”。
你不应该在函数内部构造函数。
请对您的问题标题进行拼写检查。

标签： javascript html function call

【解决方案1】：

根本无法拨打setLayout。

在其他函数中定义的函数的作用域仅限于该函数。它们只能被该范围内的其他代码调用。

如果你想能够调用customize.setLayout，那么你必须首先创建customize（它可以是一个函数，但不一定是）然后你需要使setLayout成为它的一个属性对象。

customize.setLayout = function setLayout(text) { /* yada yada */ };

【讨论】：

【解决方案2】：

在函数内调用函数的多种方式。首先，内部函数在您明确公开之前对外部不可见。只有一种方法是：

function outerobj() {

    this.innerfunc = function () { alert("hello world"); }

}

这定义了一个对象，但目前没有实例。您需要先创建一个：

var o = new outerobj();
o.innerfunc();

另一种方法：

var outerobj = {

    innerfunc : function () { alert("hello world"); }

};

这将定义一个可以立即使用的对象outerobj：

outerobj.innerfunc();

【讨论】：

这根本行不通，因为 5 秒控制台测试会显示。您的“另一种方法”甚至不是有效的 JS 语法。
@torazaburo 是的，只是改变了语法

【解决方案3】：

如果你坚持这样做，也许定义 setLayout 然后调用它，像这样：

<script>
  function customize(text, CallSetLayout) {
    if (CallSetLayout) {
      (function setLayout(text) {
        //do something
        alert(text);
      })(text);
    }
  }

</script>

&lt;button onclick="customize('sometext',true);"&gt;Click Please&lt;/button&gt;

然后您可以决定是否要从外部定义和调用 setLayout

【讨论】：

嗯，这很有效，而且很有趣。我想了解更多，为什么函数 setLayout() 和“(text);”周围有“()”结束后。它是某种定义功能吗？我就是不明白怎么读。
@Mes，这个东西被称为“闭包”，一个被定义并执行自身的函数。在 javascript 中定义模块时非常常用。定义后的(text)正是以“text”为参数的函数调用

【解决方案4】：

简单的答案：您无法在任何地方使用此设置致电setLayout()！

原因是，setLayout() 在customize() 之外不可见，甚至在其他JavaScript 代码中也不可见，因为它是在customize() 内部本地定义的，因此它具有仅在customize() 内部可用的本地范围。就像其他人提到的那样，还有其他可能的方法......（^__^）

您可以将setLayout() 的响应作为customize() 的方法返回并在HTML 中使用它，例如customize().setLayout('b.html');，例如

<button onclick="customize().setLayout('b.html');">Click Please</button>

JavaScript：

function customize() {

    var setLayout = function (text) {
        var selectedLayout = text;
        layout += selectedLayout;
        $.get(layout, function (data) {
            $("#layout-grid").html(data);
        });
    };

    return {
        setLayout: setLayout
    };

}

另一种方法

您还可以将您的主要功能，即customize 定义为Immediately-Invoked Function Expression (IIFE)。这样，您可以在 HTML 部分调用其方法时省略括号。

<button onclick="customize.setLayout('b.html');">Click Please</button>

JavaScript

var customize = (function () {

    var setLayout = function (text) {
        var selectedLayout = text;
        layout += selectedLayout;
        $.get(layout, function (data) {
            $("#layout-grid").html(data);
        });
    };

    return {
        setLayout: setLayout
    };

})();

【讨论】：

【解决方案5】：

你需要把它当作对象和方法来对待

<button onclick="customize().setLayout('b.html');">Click Please</button>

抱歉，我不得不编辑此代码以获得更多说明

function customize() {

     this.setLayout = function setLayout(text) {

        var selectedLayout = text;
        layout += selectedLayout;
        $.get(layout, function (data) {
            $("#layout-grid").html(data);
        });
    }
    return this;
}

【讨论】：

请在发布前测试您的建议。这根本行不通。
请试试这个解决方案