如何使 jQuery.ready 中定义的函数在全球范围内可用？

Question

我有一个函数可以将 youtube id 从 url 中剥离出来。然后我想每页使用这个函数 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 is not defined 这是有道理的，因为它没有。我可以“全局”声明这个函数吗？

Answer 1

您有两个选择，将其添加到 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;  

};  

您可能还想阅读this question 了解使用var functionName = function () {} 与function functionName() {} 和this article 了解变量范围。

Answer 2

另一种选择是将函数从 jQuery 对象本身挂起。这样可以避免进一步污染全局名称空间：

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

然后你可以用 "$.getlist(url, key)" 得到它

Answer 3

在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(.) 函数的范围。

Answer 4

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

(function ($) {

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

}(jQuery));

示例用法：

$().getList();

这是您在为 jQuery 创建 Basic Plugin 时通常会做的事情。

Answer 5

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

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

Answer 6

要将其声明为全局函数，只需去掉所有 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;
}

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