【Javascript】他のコードとの衝突を避けるテクニック

jQueryのプラグインの話を進める前に、prototype.jsやYahoo!UI(YUI)など他のコードを併用する場合の注意点と作法をみておきます。

ライブラリと名前の衝突

以前、YUIのネームスペース の記事でも書きましたが、 ライブラリなどの再利用を目的とするコードに、グローバルな変数や配列がいくつも存在する場合には、 スクリプト内のそれらをすべて把握せずに利用すると、意図せずに大事なデータを書き換えてしまうリスクを抱え込むことになります。

jQueryでは、jQuery以外のコードとの名前の衝突(変数名や関数名など)を避けるために、グローバルな領域に露出している名前は、 「jQuery」と「$」のわずかふたつだけに抑えるように配慮されています。

このネームスペースの考え方は、前回試した、jQueryの拡張方法として 用意されたプラグインでも、原則的に「jQuery.fn」以下へ作成することで守られています。

つまり、今後、jQueryで書かれたプラグインやUIを含めて、jQuery系のライブラリを利用するときは、 ネームスペースに関しては、このふたつのオブジェクトを軸に注意することになります。

とはいいながら、そんなjQueryでも、デフォルトのままで、もし、prototype.jsと 併用すると、ほぼ間違いなく不具合が発生します。

回避方法は後述しますが、少なくとも、prototype.jsとjQueryで使われている「$関数」(jQueryでは$ショートカット)が衝突するからです。

そこで、jQueryには、他のコードと併用する時の衝突を未然に避ける方法が提供されています。

次ページでは、まず、prototype.jsとjQueryのグローバルオブジェクトの構成についてみてみます。