Несколько функций jQuery работают вместе

Это правильный способ использовать несколько сценариев 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>

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*/
});
Источник

2 ответа

Попробуйте не использовать 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); 
});
Источник

Давайте рассмотрим:

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 тот jQuery.noConflict() возвращается. Например:

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.

Источник
Другие вопросы по тегам