WebDesign Dackel

バージョンの違うjQueryを読み込んでいるHTML内で安全に開発

Hatena0
Google+0
Pocket0
Feedly0

一から開発をしていればほとんど無いことかもしれませんが、クライアントワークなどではそのサイトで既に読み込んでいるjQueryがあって、実装にどうしてもそれ以上(またはそれ以下)のバージョンのjQueryを使う必要が出てくることがあるかと思います。
例えば、下記の様な場合です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SAMPLE</title>
    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="js/jquery.easing.js"></script>
    <script type="text/javascript">
    $(function(){
        $("selector").animate({"top":0}, 300, "easeOutExpo");
    });
    </script>
</head>
<body>

    ...コンテンツ

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="js/other.js"></script>
</body>
</html>

構造としては、head内でjquery-1.4.1.jsを読み込んで、更にbodyの閉じタグ前に1.7.2.jsが読み込まれているような感じです。
head内に直書きしているところが実装したかった箇所です。

そしてブラウザで実際に見てみると、animate()を使っている箇所で「”easeOutExpo”なんて無いですよ!」というエラーが出てしまっていました。

コンソールで調べてみると、どうもjQueryオブジェクト自体にeasingが追加されていないみたいだったので、もしやと思いJSの部分を下記の様に書き換えてみました。

(function($, window, undefined){
    $(function(){
        $("selector").animate({"top":0}, 300, "easeOutExpo");
    });
}(jQuery, window));

書き換えた後はエラーも無く、ちゃんと動作するようになりました。

どういうことだったかというと、1.4.1 の後にquery.easing.jsを読み込んだ際、1.4.1のjQueryオブジェクトに対してeasingが登録されていて、body前に読み込んだ1.7.2のjQueryオブジェクトで、元あったjQueryが上書きされてしまっていたため、$(function(){}); でDOM構築が終わった段階で既に$は1.7.2のものになっていたのです。

なので、匿名関数で今現在のjQueryオブジェクトを確保することで、狙い通りのバージョンのjQueryを使うことができ、エラーが無くなったという訳です!
(うまく纏めることが出来ませんでした…。)

とにかくjQueryを使う際は極力、プラグインでよく使われる形の匿名関数を使ってスクリプトが実行される時点でのjQueryを確保する様にするのが安全だなぁと身を持って体験しました。

有識者の方なら常識であろうことだと思いますが、ちょっとハマったのでブログに書いておきます。