Я относительно новый javascript, но мне комфортно на других языках. Я пытаюсь использовать временную шкалу Greensock для построения модульных последовательностей, чтобы уменьшить дублирование кода. Я пытаюсь создать однострочный график, доступный для всех моих функций. Я попробовал просто использовать глобальный var и привязать к нему методы(). Это работало в chrome и iexplorer, но не в Firefox. Я получил ошибку «this.timeline is null» в консоли ошибок Firefox. Тогда я попробовал это:Greensock TimelineMax Javascript Singleton Different in Firefox
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
Это сделало singleton я хочу, но я получаю ту же ошибку только в FF. Приведенный ниже код работает отлично как в хроме и 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), а затем #canv войдет после #bar).
У вас есть понимание того, что я делаю неправильно или почему FF обрабатывает код по-другому?
Благодарим за помощь.
EDIT1
Браузер Версии: 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
Вот полный нерабочим код. Он работает так, как ожидалось, в обоих хром и т. Д., Но я получаю ошибку в FF, поступающую из библиотеки TweenMax.js.
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
Не могли бы вы просто разместить полный нерабочий код где-нибудь? Трудно сказать, что происходит с этими фрагментами кода, полностью отделенными от фактического контекста, в котором они работают. –