Question

拥有以下html：

<div id="plugin">
 <script>
  (function(){

     this.do = function(e){
       alert("cool!");
     };
  });
 <script>
<div>

如何调用this.do（例如从父元素单击按钮事件处理程序中调用）？

也许更多信息可以帮助建议正确的解决方案。它是一个插件，我希望标记和脚本都是同一个文件的一部分。我也希望能够做到这样的事情：

来自插件外部的

$("#plugin").*controller*.do();。

这是一个候选解决方案，灵感来自斯科特的回答：

<div>
 (function(){
   var plugin = $("#plugin");

   plugin.do = function(e){ alert("cool!"); };

 });
</div>

然后从外面：

   $("#plugin").do();

有任何问题吗？

Answer 1

这看起来像你不能，因为包装函数没有名称而且不能自行执行。所以代码永远不会运行。如果它将运行，则全局函数中的this关键字引用window对象，内部函数将全局可用。

(function(){

    this.do = function(e){
        alert("cool!");
    };
})(); // <-- additional parentheses to self-execute the wrapper function

window.do === do; // true

// use
do();
// or
window.do();
// to call the inner function

但是有这样一个包装函数看起来像你想avoid global functions and variables（这有很多有据可查的原因）。在这种情况下，您可以将do定义为模块的私有方法，并在包装函数中引用它。

(function(){

    var do = function(e){
        alert("cool!");
    };

    var button = document.querySelector( 'button' ); // get the first button element
    button.addEventListener( 'click', do, false );

})();

typeof do === 'undefined' // true; the function do is only available inside the wrapper function.

Answer 2

你为什么不反对呢？

 <script>
   function do(){
      alert('cool!');
   }
 <script>

你可以这样做：

<script>
   window.do = function(){
      ...
   }
</script>

然后在其他地方：

window.do()

Answer 3

你不能。外部函数表达式不会在任何地方调用或分配，因此在不评估内部函数表达式的情况下将被丢弃。

如果要将函数绑定到某处，请在要分配的元素上调用addEventListener，并将其作为第二个参数传递。

如何调用嵌入HTML元素的脚本

3 个答案: