0
我是一個相對較新的JavaScript，但我很喜歡其他語言。我正在嘗試使用Greensock時間線構建模塊化序列以減少代碼重複。我正在嘗試讓所有函數都可以訪問的單例時間線。我試着使用全局變量並附加到（）方法。這在Chrome和iexplorer中工作，但不是Firefox。我在Firefox錯誤控制檯收到「this.timeline爲null」錯誤。然後我試過這個：Greensock TimelineMax Javascript在火狐瀏覽器中的單身人士不同
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
這使得我想要的單例，但我只在FF中得到相同的錯誤。
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：下面的代碼在Chrome和IEXPLORER工作正常
//...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處理代碼的方式有所瞭解？
感謝您的幫助。
EDIT1
瀏覽器版本： 鉻（19.0.1084.56） 的Internet Explorer（9.0.8112.16421） 火狐（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中正常工作，但它是一個多一點繁瑣玩燙手山芋Timeline對象。這是首選的方法嗎？我在哪裏可以找到適合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 [email protected] (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);
}
在發佈的代碼中沒有'this.timeline'，對吧？你確定控制檯中的錯誤來自你的代碼嗎？您是否在Firefox中測試了擴展功能被禁用？ –
@Boris這是正確的。但是，錯誤從TweenMax文件內部傳播，該文件有許多引用'code'this.timeline的內容。 Firefox中的擴展功能被禁用。我正在添加一個編輯（EDIT3），可能會對這個問題提供更多的信息。 – grocky
你介意在哪裏發佈完整的非工作代碼？真的很難說給出的代碼片段完全脫離了它們運行的實際上下文所發生的情況。 –