如何使jQuery.ready中定义的函数全局可用?


70

我有一个功能,剥离网址的YouTube ID。然后,我想每页使用10次此功能(在wordpress循环中)。

当我在函数脚本标记中提供url时,该函数可以很好地工作,但是当我在循环中启动一组新的脚本标记时,它将无法正常工作。

我需要知道如何在不首先声明所有功能的情况下使用我的函数。

这是标题中的代码:

 <script type="text/javascript"> 
$(document).ready(function() {
var getList = function(url, gkey){
        var returned = null;
        if (url.indexOf("?") != -1){
          var list = url.split("?")[1].split("&"),
                  gets = [];

          for (var ind in list){
            var kv = list[ind].split("=");
            if (kv.length>0)
                gets[kv[0]] = kv[1];
        }

        returned = gets;

        if (typeof gkey != "undefined")
            if (typeof gets[gkey] != "undefined")
                returned = gets[gkey];

        }

            return returned;

    };


        // THIS WORKS

    alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));


      });

但是,当我尝试在页面上的其他地方使用它时,它不起作用。

 <script type="text/javascript"> 

      $(document).ready(function() {
              alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
      };
      </script>

Firebug给我的getList没有定义是有意义的,因为它没有意义。我可以“全局”声明此功能吗?


抱歉,格式不正确,每次我编辑代码时,结果都很奇怪。该代码有效。
wesbos 2010年

顺便说一句-在document.ready中声明它意味着仅在文档准备好后(页面加载后)才定义它,因此,在确定已定义函数时应调用该函数。如果声明本身在尝试使用它之后运行,则将其声明为全局对象可能还不够。
TomaszStruczyński2011年

Answers:


102

您有两个选择,可以将其添加到window对象中以使其成为全局对象:

window.getList = function(url, gkey){ 
    // etc...
}

或将其从文档就绪事件处理程序内部移至全局范围:

$(document).ready(function() {  
    alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
});  
var getList = function(url, gkey){  

    var returned = null;  
    if (url.indexOf("?") != -1){  
      var list = url.split("?")[1].split("&"),  
              gets = [];  

      for (var ind in list){  
        var kv = list[ind].split("=");  
        if (kv.length>0)  
            gets[kv[0]] = kv[1];  
    }  

    returned = gets;  

    if (typeof gkey != "undefined")  
        if (typeof gets[gkey] != "undefined")  
            returned = gets[gkey];  

    }  

        return returned;  

};  

您可能还想阅读有关使用vs的问题,以及有关变量范围的这篇文章var functionName = function () {}function functionName() {}


44

另一个选择是将函数挂在jQuery对象本身之外。这样,您可以避免进一步污染全局名称空间:

jQuery.getlist = function getlist(url, gkey) {
  // ...
}

然后,您可以使用“ $ .getlist(url,key)”来获取它


多亏了您,让我的第一个jQuery函数超赞了!如果有一个更全面的资源,使自己的jQuery的功能,请让我知道,但是这让我blogs.microsoft.co.il/blogs/basil/archive/2008/09/22/...
PJ深色

8

在ready()函数之外声明getList()。

var getList = function(url, gkey){
        var returned = null;
        if (url.indexOf("?") != 
....
....
...
};

现在,getList可以在代码中的任何地方工作:

$(document).ready( function() {
alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
});

问题是getList(。)函数的范围。


2

只需将其定义为脚本顶部的常规函数​​即可:

<script type="text/javascript">
    function getlist(url, gkey){  
        ...
    }
</script>

不管这是真的,但这不是一个好的解决方案,例如,在这种情况下,您在其他页面标题中定义了jQuery函数,并且希望在img元素中将其用作onclick =“ $。Function()”,其他答案必须更好。
QMaster

1
不确定我是否理解您的评论(并赞成)。这段代码回答了如何在jQuery处理程序之外的全局名称空间中创建函数的问题。
Traveling Tech Guy

全局词点是[Globally]的意思。我假设可以从每个Java脚本部分访问全局函数,但是当您仅在脚本顶部进行定义时,情况并非如此。我提到了{内部img元素为onclick =“ $。Function()”}的示例。毕竟,向下表决只是为了帮助用户确定最佳答案。真诚的
QMaster

2

您可以简单地将函数添加到$.fn变量中:

(function ($) {

   $.fn.getList = function() {
       // ...
   };

}(jQuery));

用法示例:

$().getList();

这是您创建广告素材时通常要做的 为jQuery基本插件时


回答还可以,但是错过了括号@Andrew
Nuri

-4

要将其声明为全局函数,只需除去所有jQuery特定位。像这样:

function getList(url, gkey) {
    var returned = null;
    if (url.indexOf("?") != -1){
    var list = url.split("?")[1].split("&"), gets = [];
    for (var ind in list){
        var kv = list[ind].split("=");
        if (kv.length>0) {
            gets[kv[0]] = kv[1];
        }
    }

    returned = gets;

    if (typeof gkey != "undefined") {
        if (typeof gets[gkey] != "undefined") {
            returned = gets[gkey];
        }
    }

    return returned;
}

然后,您应该可以从任何地方调用它。


这是没有道理的。如果他使用jQuery,那是有原因的,为什么不使用它呢?更重要的是-在$(document).ready事件中声明某些内容可确保整个页面都已加载,这有时是必不可少的。当然,在此范围之外将document.ready声明与调用函数混合可能是不好的,但是简单地删除jQuery调用并不是完全解决方案。您至少应该解释一下删除jquery的好处。
TomaszStruczyński2011年

3
更新:好的,我很生气,您的回答实际上还不错。但是它缺少的一个解释是将其移出document.ready范围的好处和危险,以及var x = function(...)和function x(...)声明之间的区别等等。没有它,就好像魔术一样-解决了一个特定的问题,但是却不知道它为什么起作用。
TomaszStruczyński2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.