0

私は比較的新しい JavaScript ですが、他の言語には慣れています。Greensock タイムラインを使用してモジュラー シーケンスを構築し、コードの重複を削減しようとしています。すべての関数からアクセスできるシングルトン タイムラインを作成しようとしています。グローバル変数を使用して to() メソッドをそれに接続してみました。これは chrome と iexplorer では機能しましたが、Firefox では機能しませんでした。Firefox エラー コンソールに「this.timeline is null」というエラーが表示されました。それから私はこれを試しました：

var TL = (function() {
  var tl = new TimelineMax();
  function returnInstance() {
    return tl;
  }
  return {
    inst: function() {
      return returnInstance();
    }
  }
})();

これにより、必要なシングルトンが作成されましたが、FFでのみ同じエラーが発生します。以下のコードは、chrome と iexplorer の両方で正常に動作します。

dev.html:

<html>
<body>
  <-- Page content... -->
  <script type='text/javascript' src='js/jquery.js'></script>
  <script type='text/javascript' src='js/TweenMax.min.js'></script>
  <script type='text/javascript' src='js/foo.js'></script>
  <script type='text/javascript'>
    $(document).ready(function(){
      init();
    });
  </script>
</body>
</html>

foo.js:

  //...singleton code from above...
  function init(){
    do1();
    do2(-2);
  }
  do1(delay){
    delay = delay || 0;
    var gTL = TL.inst();
    gTL.to($("#bar"),2,{css:{autoAlpha:1}},delay);
  }
  do2(delay){
    delay = delay || 0;
    var gTL = TL.inst();
    gTL.to($("#canv"),2,{css:{autoAlpha:1}},delay);
  }

したがって、これにより #bar と #canv が同時に入ります (do2(0) を呼び出すと、#bar が完了した後に #canv が入ります)。

私が間違っていること、またはFFがコードを別の方法で処理している理由について何か洞察はありますか?

ご協力いただきありがとうございます。

編集1

ブラウザのバージョン: Chrome(19.0.1084.56) Internet Explorer(9.0.8112.16421) Firefox(13.0)

EDIT2

エラーは、TweenMax.min.js ファイル内から生成されます。

EDIT3

グローバル タイムラインとシングルトンを使用する前に、TimelineMax 参照を各関数に渡し、更新された TimelineMax を返すことで、目的の機能を実装しました。したがって、私のコードは次のようになりました。

foo.js

function init() {
  var tl = new TimelineMax();
  tl = do1(tl);
  tl = do2(tl);
}
do1(TL){
  TL.to(...);
  return TL;
}
do2(TL){
  TL.to(...);
  return TL;
}

これは Firefox では問題なく動作するように見えましたが、タイムライン オブジェクトでホットポテトをするのは少し面倒です。それは好ましい方法ですか？整形式のコーディング標準と JavaScript のベスト プラクティスはどこにありますか?

EDIT4

完全な非動作コードは次のとおりです。Chrome と IE の両方で期待どおりに動作しますが、TweenMax.js ライブラリからの FF でエラーが発生します。

dev_page2.html:

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="css/dev.css">

    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    #main {
        height:100%;
    }
    </style>
    <![endif]-->
</head>
<body class="whiteBG">
    <header class="center">
        <div id="bar" class="invisible">
            <nav>
                <!-- nav elements here... -->
            </nav><!-- nav -->
        </div><!-- bar -->
        <canvas id="ani" class='invisible center' width='840' height='420'></canvas>
    </header><!-- End header -->
    <section id="main">
    <div id="content" class="center">
            <p>
            </p><blockquote>
            </blockquote><p class="signature">
            </p><p class="float-left">
            </p><p class="float-left">
            </p>
        </div> <!-- End content -->
    </section>
    <footer class="invisible center">
        <div id="footerLeft">
        </div>
        <div id="footerCenter">
        </div>
        <div id="footerRight">
        </div>
    </footer><!-- End footer -->
    <script type="text/javascript" src="js/Jquery.js">
    </script>
    <script type="text/javascript" src="js/TweenMax.js"></script>
    <script type="text/javascript" src="js/dev2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            init();
        });
    </script>
</body>
</html>

dev2.js:

// Copyright 2012 Gray Designs. All Rights Reserved.
/* 
 * @author rocky.grayjr@gmail.com (Rocky Gray)
 * @date May 13, 2012
 */

function init()
{
    enterNavBar();
    drawCanvas();
    enterCanvas(-2);
    enterFooter(-1);
}

var TL = (function() {
    var tl = new TimelineMax();
    function returnInstance() {
      return tl;
    }
    return {
        inst: function() {
        return returnInstance();
    }
    }
})();

function enterNavBar(delay)
{
    delay = delay || 0;
    var gTL = TL.inst();
    //nav bar fade in
    gTL.to($("#bar"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
        $("#bar").removeClass('invisible');
    }},delay);
}

function enterCanvas(delay)
{
    delay = delay || 0;
    var gTL = TL.inst();
    gTL.to($("#ani"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
        $("#ani").removeClass('invisible');
    }},delay);
}

function enterFooter(delay)
{
    delay = delay || 0;
    var gTL = TL.inst();
    //nav bar fade in
    gTL.to($("footer"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
        $("footer").removeClass('invisible');
    }},delay)
}

function drawCanvas()
{
    //var canv = document.getElementById("ani");
    var $canv = $('#ani'); 
    var ctx = $canv[0].getContext("2d");
    ctx.fillStyle="#000";
    ctx.fillRect(0,0,840, 420,0);
}
4

1 に答える 1

2

古いバージョンの GreenSock ファイルを使用しているようです。これは非常にまれな問題のようで、最近のバージョンでは修正されています (ご迷惑をおかけして申し訳ありません)。最新のものをダウンロードして、もう一度お試しいただけますか? http://www.greensock.com/v12/

于 2012-06-16T02:22:22.657 に答える