将 JQuery getJSON 与包含的其他 JavaScript 一起使用会出现 ReferenceError

我制作了一个小型 HTML 页面示例来使 JQuery 的 getJSON 方法正常工作。它如下所示（抱歉，草率了，这只是一个概念证明，稍后会添加到更大的项目中）：

<script type="text/javascript">

function test() {   
$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=e999b3a5d47d013b780e8ac255c86266&user_id=24579658@N03&format=json&jsoncallback=?",    
                function(data){
                      $.each(data.photos.photo, function(i,photo){
     $("<img/>").attr("src", "http://farm5.static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg").appendTo("#images2");
    //alert();
        if ( i == 6 ) return false;
      });
});

}

然后，当使用单击某些内容时，我会调用该方法

<script type="text/javascript">

                            $(function() {
                                $("#yo").click(test);
                            });
    </script>

这在我包含的唯一 JS 是 JQuery 并且这些是唯一的函数的项目中工作得很好。然而，一旦我将它添加到我的其他项目中，它就会出错。另一个项目包含一些 mootools 库，我认为它们可能已经做到了。然而，即使在完全删除 mootools 的东西并只使用这个 jquery 的东西之后，我仍然收到以下错误：

参考错误：$ 未定义

我确实包含其他 javaScript，例如 google 的 JavaScript 和我制作的其他一些 JavaScript，但它们不使用 JQuery 或 Mootools。谁能解释为什么我会收到此错误？

听起来确实好像您引入的某些附加代码未定义 $ 符号。事实上，您可能已经包含了一些调用 jQuery 的 noConflict 函数的代码，该函数专门取消了 $.

jQuery 本质上是这样定义的：

$ = jQuery;

这意味着您可以将代码中的 $ 符号替换为“jQuery”，例如：

jQuery.getJSON(...

or

jQuery(function() {
    jQuery("#yo").click(test);
});

当然，$符号快捷方式当然很方便。放弃它将是一种耻辱，因此您可以重新定义它以再次代表“jQuery”。不过，您不希望它破坏任何其他非 jQuery JavaScript，因此重新建立 $ 快捷方式的安全方法是将您自己的所有代码包装在闭包中。每个闭包函数的唯一参数将是“$”，传递给每个闭包的参数将是“jQuery”。例如：

(function($) {
        function test() {   
            $.getJSON("http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=e999b3a5d47d013b780e8ac255c86266&user_id=24579658@N03&format=json&jsoncallback=?",    
                        function(data){
                              $.each(data.photos.photo, function(i,photo){
             $("<img/>").attr("src", "http://farm5.static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg").appendTo("#images2");
            //alert();
                if ( i == 6 ) return false;
              });
        });
})(jQuery);

请注意，匿名函数闭包具有参数 $，因此在整个函数内，$ 将具有传递给匿名函数的值。接下来，请注意，在函数定义的末尾，我们立即调用刚刚定义的函数，并将 jQuery 作为参数传递。这意味着在闭包内部，但是only在闭包内，$ 现在是 jQuery 的快捷方式。

最后一点，您可以通过调用 jQuery.noConflict() 有意关闭 jQuery 对 $ 符号的使用（请参阅http://api.jquery.com/jQuery.noConflict/ http://api.jquery.com/jQuery.noConflict/）。如果您将使用您的代码和 jQuery 之外的其他 JavaScript 代码，那么最好在加载所有 JavaScript 文件后调用该函数，然后使用上面描述的闭包技术，以便您可以安全地继续您自己的代码中的 $ 快捷方式。