多个jQuery函数协同工作

Question

这是使用多个jQuery脚本的正确方法吗？有些文件在同一个.js文件中，然而，即使有多个.js文件，似乎唯一能让它们同时工作的方法就是专门为每个文件声明一个jQuery.noConflict()变量，然后用该变量替换$的所有实例。

这不可能是正确的/最好的方式:不是吗？

我在下面给出了一个例子，所有的东西都运行得很好，但对我来说，这似乎不是“正确”的方式。

HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.8.2.min.js"><\/script>')</script>
<script src="/js/test.js"></script>
<script src="/js/shareit.js"></script>
<script>var $share = jQuery.noConflict();$share(document).ready(function(){$share('.sharer').sharer();});</script>

test.js是：

/*faq stuff*/
var $zfaqs = jQuery.noConflict();
$zfaqs(document).ready(function () {    
$zfaqs('.faq dd').hide(); // Hide all DDs inside .faqs
$zfaqs('.faq dt').click(function(){$zfaqs(this).toggleClass('active')}); // add/remove active class on click
$zfaqs('.faq dt').click(function(){$zfaqs(this).next().slideToggle('fast')}); // toggle answer
});

/*new window link*/
var $zopen = jQuery.noConflict();
$zopen(document).ready(function() {
$zopen("a[data-window='external']").on('click', function() {
    window.open($zopen(this).attr('href')); 
    return false; 
});
});

/*fading text*/
var $zfader = jQuery.noConflict();
$zfader(document).ready(function(){
$zfader('.fadethis .fade');
    setInterval(function(){
        $zfader('.fadethis .fade').filter(':visible').fadeOut(2000,function(){
            if($zfader(this).next('.fade').size()){
                $zfader(this).next().fadeIn(1000);
            }
            else{
                $zfader('.fadethis .fade').eq(0).fadeIn(1000);
            }
        });
    },10000);   
});

编辑：

好的，我已经改成了下面的代码。我还是有点困惑，但我马上就会明白了。我知道使用$(document).ready(function() ){基本上是说等到页面加载完成后再运行代码-对吗？如上所述，我做了以下更改。

在test.js中，我将所有代码包装在一个document.ready中，并将其清理干净。

现在每个人都怎么想？这是正确的标准吗？

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.8.2.min.js"><\/script>')</script>
<script src="/js/test.js"></script>

<script src="/js/jquery.colormodal-min.js"></script>
<script>$(document).ready(function(){$("a[data-modal^='gss']").each(function(){$(this).colormodal({rel:$(this).attr('data-modal')});});$("a[data-modal='ss']").colormodal({rel: 'nofollow'});$("a[data-modal='no']").colormodal({title: ' ',rel: 'nofollow'})});</script>

<script src="/js/shareit.js"></script>
<script>$(document).ready(function(){$('.sharer').sharer();});</script>

the test.js

/*twitter stuff*/
$(document).ready(function() {
$.getJSON('http://api.twitter.com/1/statuses/user_timeline/testing.json?count=1&callback=?', function(tweets){
$("#twitter").html(tz_format_twitter(tweets));
});

function tz_format_twitter(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
  return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
  return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<span>'+status+'</span> <br/><b><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></b>');
}
return statusHTML.join('');
}

function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}

/*faq stuff*/   
$('.faq dd').hide(); // Hide all DDs inside .faqs
$('.faq dt').click(function(){$(this).toggleClass('active')}); // add/remove active class on click
$('.faq dt').click(function(){$(this).next().slideToggle('fast')}); // toggle answer

/*new window link*/
$("a[data-window='external']").on('click', function() {
    window.open($(this).attr('href')); 
    return false; 
});

/*fading text*/
setInterval(function(){
    $('.fadethis .fade').filter(':visible').fadeOut(2000,function(){
        if($(this).next('.fade').size()){
            $(this).next().fadeIn(1000);
        }
        else{
            $('.fadethis .fade').eq(0).fadeIn(1000);
        }
    });
},10000);

/*end document ready stuff*/
});

Answer 1

尽量不要使用noConflict()，并且每个位置不要有超过一个的$(function(){，比如

<script>
  $(function(){
    $('.sharer').sharer();
  });
</script>

和

/*faq stuff*/

$(function(){   
  $('.faq dd').hide(); // Hide all DDs inside .faqs
  $('.faq dt').click(function(){$(this).toggleClass('active')}); // add/remove active class on click
  $('.faq dt').click(function(){$s(this).next().slideToggle('fast')}); // toggle answer


  /*new window link*/

  $("a[data-window='external']").on('click', function() {
    window.open($(this).attr('href')); 
    return false; 
  });


  /*fading text*/
  $('.fadethis .fade');  //(not sure what the purpose of this line is)
  setInterval(function(){
    $('.fadethis .fade').filter(':visible').fadeOut(2000,function(){
      if($(this).next('.fade').size()){
        $(this).next().fadeIn(1000);
      }
      else{
        $('.fadethis .fade').eq(0).fadeIn(1000);
      }
    });
  },10000); 
});

Answer 2

让我们考虑一下：

console.log($); // Will be defined as a jQuery() shorthand
jQuery.noConflict();
console.log($); // Will be undefined

发生的事情是，jQuery将自动“采用”全局范围内的$函数速记，即window.$将成为window.jQuery的速记。

因此，当我们调用jQuery.noConflict()时，我们主要是在释放 window.$，以防它与其他使用它的框架或库冲突(还有其他几个框架或库，MooTools就是其中之一)。

因此，如下所示：

var $zfaqs = jQuery.noConflict();
$zfaqs(document).ready(function () { 
    ...
});

var $zopen = jQuery.noConflict();
$zopen(document).ready(function() {
    ...
});

var $zfader = jQuery.noConflict();
$zfader(document).ready(function(){
    ...
});

您只需(一次又一次地)发布$，然后创建一个新的jQuery全局引用，以便在随后的代码块中使用。$zfaqs应该每次都能工作。除非它们每次都以不同的顺序包含。

就您的代码要做的事情而言，您可以在没有jQuery.noConflict()返回的对jQuery的全局返回引用的情况下完成它。例如：

jQuery(document).ready(function ($) {
    $('#jQuery-ready').click(function () {
        console.log(this.id);
    });
});

jQuery(function ($) {
    $('#jQuery-only').click(function () {
        console.log(this.id);
    });
});

(function ($) {
    $(document).ready(function ($) {
        $('#Function-initializer').click(function () {
            console.log(this.id);
        });
    });
})(jQuery);

http://jsfiddle.net/userdude/D6ANv/1

而且，我不必在全局范围内执行任何类似var $jjq = jQuery.noConflict()的操作，然后在我的onDOMReady处理程序中引用它们，我只需在这些范围内继续使用$速记，只要我当时没有尝试使用另一个不是jQuery的全局$即可。