如何放置一个jQuery片段成为一个全球性的文件

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）更重要的是，我试图调用voteUp（someId ）函数在problemio.js文件的原始代码中，我收到一个错误，说它是一个未定义的函数，所以我想我会有如果它在全局范围内调用该函数，运气会更好。我的方法正确吗？

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

谢谢！

Answer 1

1）我猜测这仅仅是很好的做法（希望这将是 容易跟踪我的全局变量等。

是的，不，你现在在一个地方有你的'全局'变量，但你将与'全局'变量（即由浏览器定义的那些变量）碰撞的机会增加了100％:)

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

对此的解决方案是使用命名空间，如所描述here

2）更重要的是，我试图从problemio.js文件调用voteUp（someId）函数 原代码，我得到一个 错误，它是一个未定义的函数，所以我想如果它在全局范围内，我会有更好的 调用该函数。我的方法是否正确 ？

下面是一个使用命名空间的例子将调用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”。没有测试，如果这样做是范围问题的潜在根源，我不知道我的头脑。不过，我可以说下面的模式不会有范围问题。如果这不起作用，未定义可能是一个脚本加载问题（例如按正确的顺序加载）而不是范围。

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(); 
    }); 
});