Question

我在这里有一个JavaScript文件http://www.problemio.com/js/problemio.js，我正在尝试将一些jQuery代码放入其中，如下所示：

$(document).ready(function() 
{
    queue = new Object; 
    queue.login = false; 

     var $dialog = $('#loginpopup')
       .dialog({
         autoOpen: false,
         title: 'Login Dialog'
       }); 

       var $problemId = $('#theProblemId', '#loginpopup');

        $("#newprofile").click(function () 
        {
          $("#login_div").hide();
          $("#newprofileform").show();
        });

    // Called right away after someone clicks on the vote up link
    $('.vote_up').click(function() 
    {        
        var problem_id = $(this).attr("data-problem_id");
        queue.voteUp = $(this).attr('problem_id');

        voteUp(problem_id);

        //Return false to prevent page navigation
        return false;       
    });

    var voteUp = function(problem_id) 
    {
        alert ("In vote up function, problem_id: " + problem_id );
        queue.voteUp = problem_id;

        var dataString = 'problem_id=' + problem_id + '&vote=+';

        if ( queue.login = false) 
        {
            // Call the ajax to try to log in...or the dialog box to log in. requireLogin()
        } 
        else 
        {
            // The person is actually logged in so lets have him vote
            $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(data)
                {           
                    alert ("vote success, data: " + data);

                    // Try to update the vote count on the page
                    //$('p').each(function() 
                    //{ 
                        //on each paragraph in the page:
                      //  $(this).find('span').each() 
                      //  { 
                            //find each span within the paragraph being iterated over

                       // }
                     //}                      

                },
                error : function(data) 
                {
                    alert ("vote error");
                    errorMessage = data.responseText;

                    if ( errorMessage == "not_logged_in" )
                    {
                        //set the current problem id to the one within the dialog
                        $problemId.val(problem_id);                 

                        // Try to create the popup that asks user to log in.
                        $dialog.dialog('open');

                        alert ("after dialog was open");

                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else
                    {
                        alert ("not");
                    }    
                } // End of error  case 
        }





            }); // Closing AJAX call.
    };

    $('.vote_down').click(function() 
    {
        alert("down");

        problem_id = $(this).attr("data-problem_id");

        var dataString = 'problem_id='+ problem_id + '&vote=-';        

        //Return false to prevent page navigation
        return false;
    });    

    $('#loginButton', '#loginpopup').click(function() 
    {
    alert("in login button fnction");
            $.ajax({
                url:'url to do the login',
                success:function() {
                    //now call cote up 
                    voteUp($problemId.val());
                }
            });
        });    
});
</script>

我尝试这样做有两个原因：

1）我猜这只是一种很好的做法（希望能够更容易地跟踪我的全局变量等等。 2）更重要的是，我试图在problemio.js文件的原始代码中调用voteUp（someId）函数，并且我收到一个错误，它是一个未定义的函数，所以我想我有更好的运气该函数是否在全局范围内。我的方法是否正确？

那么我可以将我在此问题中放入的代码复制/粘贴到problemio.js文件中，还是必须删除它的某些部分，如打开/关闭标记？ document.ready（）函数怎么样？我应该只在全局文件中使用其中一个吗？或者我应该有多个并且不会受到伤害？

谢谢！

Answer 1

1）我猜这只是一种很好的做法（希望它会是更容易跟踪我的全局变量等。

是和否，您现在将“全局”变量放在一个位置，但是您要与“全局”变量（即浏览器定义的变量）发生碰撞的可能性增加了100％：）

例如，假设您决定使用名为location的变量，只要您为该变量赋值，浏览器就会决定飞到另一个URL，因为location是重定向的保留字。

解决方法是使用命名空间，如here

所述

2）更重要的是，我试图调用voteUp（someId）函数在来自problemio.js文件的原始代码中，我得到了一个错误，它是一个未定义的函数，所以我想我会更好运气，如果它在全球范围内，则调用该函数。我对么在我的方法？

以下是使用命名空间调用voteUp函数的示例：

(function($) {

    var myApp = {};

    $('.vote_up').click(function(e) {
        e.preventDefault();
        myApp.voteUp();
    });

    myApp.voteUp = function() {
        console.log("vote!");
    }

})(jQuery);

document.ready（）函数怎么样？我应该只有一个全局文件中的那些？或者我应该有多个和那个会不会受伤？

您可以根据需要拥有尽可能多的document.ready侦听器，而不是覆盖document.ready您正在侦听该事件，然后定义将要发生的事件。您甚至可以将它们放在单独的JavaScript文件中。

Answer 2

在页面中包含此文件之前，请确保您的页面正在查找jquery文件。如果jquery不存在，那么首先你会得到没有定义的函数。否则，你可能还有其他与你的jquery冲突的东西，我会查看jquery noConflict。

var j = jQuery.noConflict();

如图所示：

http://api.jquery.com/jQuery.noConflict/

快乐的haxin

_wryteowl

Answer 3

扩展KreeK已经提供的内容：无需在文档就绪功能中定义“myApp”。如果没有测试，我不知道如果这样做是范围问题的潜在来源。但是，我可以说下面的模式不会有范围问题。如果这不起作用，则undefined可能是脚本加载问题（例如，以正确的顺序加载）而不是范围。

var myApp = myApp || {}; // just adds extra insurance, making sure "myApp" isn't taken

myApp.voteUp = function() {
  console.log("vote!");
}

$(function() { // or whatever syntax you prefer for document ready
  $('.vote_up').click(function(e) {
    e.preventDefault();
    myApp.voteUp();
  });
});

如何将jQuery片段放入全局文件中

3 个答案: