0

これは、複数の 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 では、すべてのコードを 1 つの 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*/
});
4

2 に答える 2

0

考えてみましょう：

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

$何が起こるかというと、jQuery はグローバル スコープから関数の短縮形を自動的に「取得」します。つまり、 のwindow.$短縮形になりwindow.jQueryます。

jQuery.noConflict()そのため、私たちが呼び出すときは、それを使用する別のフレームワークまたはライブラリと競合する場合に備えて、主に野生に リリース window.$しています (他にもいくつかありますが、MooTools はその 1 つです)。

したがって、次のようになります。

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() グローバルのようなことをしてハンドラー内でそれらを参照する必要はありません。jQuery ではない別のグローバルを使用しようとしない限り、これらのスコープ内で省略形onDOMReadyを使用し続けることができます。$$

于 2013-01-19T08:42:30.327 に答える
0

まったく使用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); 
});
于 2013-01-19T08:40:10.083 に答える