noConflict()の基礎知識を詳しく紹介し、実際の開発での使い方を詳しく解説-jsチュートリアル-php.cn

noConflict()の基礎知識を詳しく紹介し、実際の開発での使い方を詳しく解説

巴扎黑

リリース： 2017-06-20 15:45:15

オリジナル

1715 人が閲覧しました

すでにご存知のとおり、jQuery は jQuery の短縮形として $ 記号を使用します。

他の JavaScript フレームワークも $ 記号を短縮表現として使用したらどうなるでしょうか?

その他の JavaScript フレームワークには、MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman、Ext JS などがあります。

これらのフレームワークの一部では、(jQuery と同様に) $ 記号を省略記号として使用します。同じ省略記号を使用している 2 つの異なるフレームワークを使用している場合、スクリプトの実行が停止する可能性があります。

jQuery チームはこの問題を考慮し、noConflict() メソッドを実装しました。

jQuery noConflict() メソッド

noConflict() メソッドは、$ 識別子の制御を解放し、他のスクリプトが使用できるようにします。

もちろん、略語をフルネームに置き換えて jQuery を使用することもできます:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

ログイン後にコピー

独自の略語を作成することもできます。 noConflict() は、後で使用するために変数に保存できる jQuery への reference を返します。この例を見てください:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

ログイン後にコピー

jQuery コードブロックで $ ショートカットが使用されており、このショートカットを変更したくない場合は、$ 記号を変数としてready メソッドに渡すことができます。このようにして、関数内で $ 記号を使用できますが、関数の外では引き続き「jQuery」を使用する必要があります:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

ログイン後にコピー

実際の開発:

この関数を実行して、変数 $ の制御を最初の関数に転送します。それを実装する人そのライブラリ。

これは、jQuery が他のライブラリの $ オブジェクトと競合しないようにするのに役立ちます。

<script type="text/javascript" src="/javascripts/jquery.js"></script>
  　　<script type="text/javascript">
  　　　　 var j$ = $;
   　　　　jQuery.noConflict();
  　　</script>
<script type="text/javascript" src="/javascripts/prototype.js" ></script>

ログイン後にコピー

この関数を実行した後は、jQuery 変数を使用してのみ jQuery オブジェクトにアクセスできます。たとえば、$("div p") が使用されている場合は、j$("div p") に置き換える必要があります。

注: この関数は、jQuery ファイルをインポートした後、競合を引き起こす別のライブラリをインポートする前に使用する必要があります。もちろん、jQuery が最後にインポートされる場合を除き、他の競合するライブラリが使用される前にも実行する必要があります。

使用方法 1:

jQuery.noConflict();
// 使用 jQuery
j$("div p").hide(); 
// 使用其他库的 $() 
$("content").style.display = &#39;none&#39;;

ログイン後にコピー

使用方法 2:

//我的一个站点 viqiwu.com
var viqiwu = jQuery.noConflict();
// 基于 jQuery 的代码
viqiwu("div p").hide(); 
// 基于其他库的 $() 代码 
$("content").style.display = &#39;none&#39;;

ログイン後にコピー

そのため、JQuery と他の JS フレームワーク間の競合を心配する必要はありません。

以上がnoConflict()の基礎知識を詳しく紹介し、実際の開発での使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。