如何放置一個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(); 
    }); 
});