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

How to place a jQuery snippet into a global file

本文关键字：全局 文件 片段 jQuery      更新时间：2023-09-26

我在这里有一个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()函数呢?我应该在全局文件中使用其中一个吗?或者我应该有多个这样不会有什么坏处?

谢谢! !

1)我猜这只是一个很好的实践(希望它会是更容易跟踪我的全局变量，等等

是和否，你现在有你的"全局"变量在一个地方，但机会，你要碰撞的"全局"变量(即那些由浏览器定义)已经增加了100%:)

例如，你决定有一个名为location的变量，一旦你给该变量一个值，浏览器决定飞到另一个URL，因为location是重定向的保留字。

这个问题的解决方案是使用名称空间，如下所述

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()函数呢?我应该只吃一个吗全局文件中的那些?或者我应该有多个这样的不会痛吗?

可以有任意多个文档。准备好您需要的监听器，您不重写文档。准备好侦听该事件的触发，然后定义将发生什么。你甚至可以把它们放在单独的javascript文件中。

确保您的页面在此文件包含在页面之前找到jquery文件。如果没有jquery，您将得到未定义的函数。否则，您可能会有其他东西与您的jquery冲突，我将查看jquery noConflict。

var j = jQuery.noConflict();

如下所示:

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

快乐haxin

_wryteowl

扩展KreeK已经提供的功能:不需要在document ready函数中定义"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();
  });
});
相关文章：