jqueryプラグインの衝突(jquery.noconflit)解決方法は共有します。

5354 ワード

多くのJSフレームクラスは、関数または変数名としてドル記号を使用することを選択しています。jQueryはその中で最も典型的なものです。jQueryでは、$記号はwindow.jQueryの対象の一つの引用にすぎないので、たとえ$が削除されたとしても、window.jQueryは依然として全体の種類のライブラリの完全性を保証する強い後ろ盾です。jQueryのAPI設計は、多くの枠組みの間の引用衝突を十分に考慮しています。私たちはjQuery.noConflit方法を使って、コントロールの移行を簡単に実現できます。
jQuery.noConflit方法はオプションのブールパラメータ[1]を含み、ドルの引用を移管すると同時にjQueryオブジェクト自体に移管するかどうかを決定するために使用する。


jQuery.noConflict([removeAll])

デフォルトの場合、noConflicktを実行すると変数$の制御権を最初に発生した$のライブラリに渡すことができます。removeAllをtrueに設定すると、noConflicktを実行すると、$とjQueryオブジェクト自体のコントロールをすべて最初に彼らを生み出すライブラリに渡すことができます。
例えば、KISSYとjQueryを混用して、また$KISSYを慣用してAPIの操作を簡略化すると、この方法でネーミング衝突の問題を解決することができます。
この仕組みはどうやって実現されますか？jQueryのソースコードを読み始めました。まずやったことはこうです。


// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

jQueryは2つのプライベート変数を通してWindows環境のjQueryと$2つのオブジェクトをマッピングし、変数が強制的に上書きされるのを防ぐことが分かりやすい。noConflickメソッドが呼び出されたら、_を通じてjQuery，_$jQuery、米ドルの四つの違いは、コントロールの移行方式を決定します。具体的なコードは以下の通りです。
noConflick:function(deep){ if(window.$=jQuery){ window.$ } if(deep&window.jQuery==jQuery){ window.jQuery=_jQuery } return jQuery }また上記のパラメータ設定問題を見てください。deepが設定されていなければ、_$windowを上書きします。jQueryは別名$無効ですが、jQuery自体は完全です。他のクラスやコードがドル変数を再定義したら、そのコントロールは完全に引き継がれます。逆にdeepをtrueに設定すると、_jQueryはwindow.jQueryを覆っています。この時米ドルとjQueryは無効になります。
このような操作の利点は、枠组み合わせやjQuery多バージョン共存といった高冲突の実行环境に関系なく、noConflitメソッドによって提供される引渡しメカニズムと、カバーされていないjQueryオブジェクトに自身が戻り、完全に変数マッピングによって冲突を解决することができます。
しかし、避けられない事実はプラグインの故障などの問題です。もちろんコンテキストパラメータを簡単に変更することでエイリアスを回復できます。


var query = jQuery.noConflict(true);
(function ($) {
//           ，         jQuery
})(query);

以下の例は同じです。この問題を解決します。
jQueryは誕生以来、バージョンがますます多くなりました。また、jQuery公式サイトの新バージョンは更新と発表が続いていますが、以前のプロジェクトではすでに古いバージョンのjQueryを使っています。例えば、すでに現れたのは1.3.X、1.4.X、1.5.X、1.6.2などです。
プロジェクトの必要によって、新しいバージョンのjQueryを絶えず使う必要がありますが、もともとすでに存在していて採用されていた古いjQueryバージョンについては、どのように複数の異なるjQueryバージョンを同じページで共存させますか？
実は、jQuery.noConflit()の特性を利用して、私達はjQueryをその他のJS庫と共存させることができるだけではなくて、例えばProttype。jQuery自身の他の異なるバージョンと共存してもいいです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>              jQuery  </title>
        <!--         jQuery     -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script type="text/javascript">
            var jQuery_New = $.noConflict(true);
        </script>
        <!--   jQuery1.6.2   -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_6_2 = $.noConflict(true);
        </script>
        <!--   jQuery1.5.2   -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_5_2 = $.noConflict(true);
        </script>
        <!--   jQuery1.4.2   -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_4_2 = $.noConflict(true);
        </script>
        <!--   jQuery1.3.2   -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_3_2 = $.noConflict(true);
        </script>
        <script type="text/javascript">
            alert(jQuery_New.fn.jquery);
            alert(jQuery_1_6_2.fn.jquery);
            alert(jQuery_1_5_2.fn.jquery);
            alert(jQuery_1_4_2.fn.jquery);
            alert(jQuery_1_3_2.fn.jquery);

            jQuery_New(function($){$('<p>     '+$.fn.jquery+'       。</p>').appendTo('body');});
            jQuery_1_6_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
            jQuery_1_5_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
            jQuery_1_4_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
            jQuery_1_3_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
        </script>
    </head>
    <body>
                      jQuery  
        <br>
    </body>
</html>

JSON文字列をJSONオブジェクトに変換する一番いい方法

Javaは真のIPソリューションを取得できませんでした。