JavaScript 引用错误找不到变量加闭包蓝调

【问题标题】：JavaScript reference error can't find variable plus closure bluesJavaScript 引用错误找不到变量加闭包蓝调
【发布时间】：2011-07-02 06:32:08
【问题描述】：

总的来说，我遇到了一些错误。 主要是在 safari 中，android 浏览器出现错误

JavaScript 引用错误找不到变量

有问题的变量是b2AABB。

这里是代码var worldAABB = new b2AABB();
我正在使用 box2d JavaScript（像素实验室变体）进行 google 关闭。另外，如果您可以给我的闭包依赖项并要求一次好，我将不胜感激。

<html>
<title>Tune Tunnels Alpha</title>
<head>
<!--=============================-->
<!-- Copy this part to your app. -->
<!-- START       -->
<!--=============================-->

<!-- libs -->
<!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
<script src="prototype.js"></script>
<!-- <script src="raphael.js"></script> -->
<script src="closure-library/closure/goog/base.js"></script>

<!-- box2djs -->
<script>
goog.addDependency('../common/b2Settings.js', ['box2d.Settings'], []);
goog.addDependency('../common/math/b2Vec2.js', ['box2d.Vec2'], []);
goog.addDependency('../common/math/b2Mat22.js', ['box2d.Mat22'], []);
goog.addDependency('../collision/b2Proxy.js', ['box2d.Proxy'], []);
goog.addDependency('../collision/ClipVertex.js', ['box2d.ClipVertex'], []);
goog.addDependency('../common/math/b2Math.js', ['box2d.Math'], []);
goog.addDependency('../collision/b2AABB.js', ['box2d.AABB'], []);
goog.addDependency('../collision/b2Bound.js', ['box2d.Bound'], []);
goog.addDependency('../collision/shapes/b2ShapeDef.js', ['box2d.ShapeDef'], []);
goog.addDependency('../collision/b2BoundValues.js', ['box2d.BoundValues'], []);
goog.addDependency('../collision/b2Pair.js', ['box2d.Pair'], []);
goog.addDependency('../collision/b2PairCallback.js', ['box2d.Callback'], []);
goog.addDependency('../collision/b2BufferedPair.js', ['box2d.BufferedPair'], []);
goog.addDependency('../collision/b2PairManager.js', ['box2d.PairManager'], []);
goog.addDependency('../collision/b2BroadPhase.js', ['box2d.BroadPhase'], []);
goog.addDependency('../collision/b2Collision.js', ['box2d.Collision'], []);
goog.addDependency('../collision/Features.js', ['box2d.Features'], []);
goog.addDependency('../collision/b2ContactID.js', ['box2d.ContactID'], []);
goog.addDependency('../collision/b2ContactPoint.js', ['box2d.ContactPoint'], []);
goog.addDependency('../collision/b2Distance.js', ['box2d.Distance'], []);
goog.addDependency('../collision/b2Manifold.js', ['box2d.Manifold'], []);
goog.addDependency('../collision/b2OBB.js', ['box2d.OBB'], []);
goog.addDependency('../collision/shapes/b2Shape.js', ['box2d.Shape'], []);
goog.addDependency('../collision/shapes/b2BoxDef.js', ['box2d.BoxDef'], []);
goog.addDependency('../collision/shapes/b2CircleDef.js', ['box2d.CircleDef'], []);
goog.addDependency('../collision/shapes/b2CircleShape.js', ['box2d.CircleShape'], []);
goog.addDependency('../collision/shapes/b2MassData.js', ['box2d.MassData'], []);
goog.addDependency('../collision/shapes/b2PolyDef.js', ['box2d.PolyDef'], []);
goog.addDependency('../collision/shapes/b2PolyShape.js', ['box2d.PolyShape'], []);
goog.addDependency('../dynamics/b2Body.js', ['box2d.Body'], []);
goog.addDependency('../dynamics/b2BodyDef.js', ['box2d.BodyDef'], []);
goog.addDependency('../dynamics/b2CollisionFilter.js', ['box2d.CollisionFilter'], []);
goog.addDependency('../dynamics/b2Island.js', ['box2d.Island'], []);
goog.addDependency('../dynamics/b2TimeStep.js', ['box2d.TimeStep'], []);
goog.addDependency('../dynamics/contacts/b2ContactNode.js', ['box2d.ContactNode'], []);
goog.addDependency('../dynamics/contacts/b2Contact.js', ['box2d.Contact'], []);
goog.addDependency('../dynamics/contacts/b2ContactConstraint.js', ['box2d.ContactConstraint'], []);
goog.addDependency('../dynamics/contacts/b2ContactConstraintPoint.js', ['box2d.ContactConstraintPoint'], []);
goog.addDependency('../dynamics/contacts/b2ContactRegister.js', ['box2d.ContactRegister'], []);
goog.addDependency('../dynamics/contacts/b2ContactSolver.js', ['box2d.ContactSolver'], []);
goog.addDependency('../dynamics/contacts/b2CircleContact.js', ['box2d.CircleContact'], []);
goog.addDependency('../dynamics/contacts/b2Conservative.js', ['box2d.Conservative'], []);
goog.addDependency('../dynamics/contacts/b2NullContact.js', ['box2d.NullContact'], []);
goog.addDependency('../dynamics/contacts/b2PolyAndCircleContact.js', ['box2d.PolyAndCircleContact'], []);
goog.addDependency('../dynamics/contacts/b2PolyContact.js', ['box2d.PolyContact'], []);
goog.addDependency('../dynamics/b2ContactManager.js', ['box2d.ContactManager'], []);
goog.addDependency('../dynamics/b2World.js', ['box2d.World'], []);
goog.addDependency('../dynamics/b2WorldListener.js', ['box2d.WorldListener'], []);
goog.addDependency('../dynamics/joints/b2JointNode.js', ['box2d.JointNode'], []);
goog.addDependency('../dynamics/joints/b2Joint.js', ['box2d.Joint'], []);
goog.addDependency('../dynamics/joints/b2JointDef.js', ['box2d.JointDef'], []);
goog.addDependency('../dynamics/joints/b2DistanceJoint.js', ['box2d.DistanceJoint'], []);
goog.addDependency('../dynamics/joints/b2DistanceJointDef.js', ['box2d.DistanceJointDef'], []);
goog.addDependency('../dynamics/joints/b2Jacobian.js', ['box2d.Jacobian'], []);
goog.addDependency('../dynamics/joints/b2GearJoint.js', ['box2d.GearJoint'], []);
goog.addDependency('../dynamics/joints/b2GearJointDef.js', ['box2d.GearJointDef'], []);
goog.addDependency('../dynamics/joints/b2MouseJoint.js', ['box2d.MouseJoint'], []);
goog.addDependency('../dynamics/joints/b2MouseJointDef.js', ['box2d.MouseJointDef'], []);
goog.addDependency('../dynamics/joints/b2PrismaticJoint.js', ['box2d.PrismaticJoint'], []);
goog.addDependency('../dynamics/joints/b2PrismaticJointDef.js', ['box2d.PrismaticJointDef'], []);
goog.addDependency('../dynamics/joints/b2PulleyJoint.js', ['box2d.PulleyJoint'], []);
goog.addDependency('../dynamics/joints/b2PulleyJointDef.js', ['box2d.PulleyJointDef'], []);
goog.addDependency('../dynamics/joints/b2RevoluteJoint.js', ['box2d.RevoluteJoint'], []);
goog.addDependency('../dynamics/joints/b2RevoluteJointDef.js', ['box2d.RevoluteJointDef'], []);
goog.require('goog.dom');
goog.require('box2d.Settings');
goog.require('box2d.Vec2');
goog.require('box2d.Mat22');
goog.require('box2d.Proxy');
goog.require('box2d.ClipVertex');
goog.require('box2d.Math');
goog.require('box2d.AABB');
goog.require('box2d.Bound');
goog.require('box2d.ShapeDef');
goog.require('box2d.RevoluteJoint');
goog.require('box2d.World')
goog.require('box2d.BoundValues');
goog.require('box2d.Pair');
goog.require('box2d.Callback');
goog.require('box2d.BufferedPair');
goog.require('box2d.PairManager');
goog.require('box2d.BroadPhase');
goog.require('box2d.Collision');
goog.require('box2d.Features');
goog.require('box2d.ContactID');
goog.require('box2d.ContactPoint');
goog.require('box2d.Distance');
goog.require('box2d.Manifold');
goog.require('box2d.OBB');
goog.require('box2d.Shape');
goog.require('box2d.BoxDef');
goog.require('box2d.CircleDef');
goog.require('box2d.CircleShape');
goog.require('box2d.MassData');
goog.require('box2d.PolyDef');
goog.require('box2d.PolyShape');
goog.require('box2d.Body');
goog.require('box2d.BodyDef');
goog.require('box2d.CollisionFilter')
goog.require('box2d.Island')
goog.require('box2d.TimeStep');
goog.require('box2d.ContactNode');
goog.require('box2d.Contact');
goog.require('box2d.ContactConstraint');
goog.require('box2d.ContactConstraintPoint');
goog.require('box2d.ContactRegister');
goog.require('box2d.ContactSolver');
goog.require('box2d.CircleContact');
goog.require('box2d.Conservative');
goog.require('box2d.NullContact');
goog.require('box2d.PolyAndCircleContact');
goog.require('box2d.PolyContact');
goog.require('box2d.ContactManager');
goog.require('box2d.WorldListener');
goog.require('box2d.JointNode');
goog.require('box2d.Joint');
goog.require('box2d.JointDef');
goog.require('box2d.DistanceJoint');
goog.require('box2d.DistanceJointDef');
goog.require('box2d.Jacobian');
goog.require('box2d.GearJoint');
goog.require('box2d.GearJointDef');
goog.require('box2d.MouseJoint');
goog.require('box2d.MouseJointDef');
goog.require('box2d.PrismaticJoint');
goog.require('box2d.PrismaticJointDef');
goog.require('box2d.PulleyJoint');
goog.require('box2d.PulleyJointDef');
goog.require('box2d.RevoluteJointDef');
</script>
        <!--=============================-->
        <!-- Copy this part to your app. -->
        <!-- END     -->
        <!--=============================-->
<link href="style/box2d.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
document.observe("dom:loaded", function() {
    var worldAABB = new b2AABB();
    worldAABB.minVertex.Set(-1000, -1000);
    worldAABB.maxVertex.Set(1000, 1000);
    var gravity = new b2Vec2(0, 300);
    var doSleep = true;
    var world = new b2World(worldAABB, gravity, doSleep); 
    var circleSd = new b2CircleDef();
    circleSd.density = 1.0;
    circleSd.radius = 20;
    circleSd.restitution = 1.0;
    circleSd.friction = 0;
    var circleBd = new b2BodyDef();
    circleBd.AddShape(circleSd);
    circleBd.position.Set(x,y);
    var circleBody = world.CreateBody(circleBd);

    var jointDef = new b2RevoluteJointDef();
    jointDef.anchorPoint.Set(250, 200);
    jointDef.body1 = world.GetGroundBody();
    jointDef.body2 = circleBody;
    world.CreateJoint(jointDef);
    var timeStep = 1.0/60;
    var iteration = 1;
    world.Step(timeStep, iteration);
    var ctx;
    var canvasWidth; 
    var canvasHeight; 
    function step(cnt) { 
        world.Step(1.0/60, 1);
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        drawWorld(world, ctx); // see demos/draw_world.js
        setTimeout('step(' + (cnt || 0) + ')', 10);
    }
    Event.observe(window, 'load', function() {
        setupWorld(world); // as you like
        ctx = $('canvas').getContext('2d');
        var canvasElm = $('canvas');
        canvasWidth = parseInt(canvasElm.width);
        canvasHeight = parseInt(canvasElm.height);
        step();
    });
});
</script>
<canvas> </canvas>
</body>
</html>

【问题讨论】：

  • 好吧，“哪一行”上的“哪个变量”？考虑删除[ing]所有代码，但有一个最小的失败测试用例。
  • 此外，通常最好避免使用setTimeout(string,...) 形式而使用setTimeout(Function, ...)。
  • var worldAABB = new b2AABB();

标签： javascript variables closures box2d


【解决方案1】：

我不知道你的闭包/原型环境，但由于看起来你的 JS 文件可能正在异步加载，是否有可能在 dom:loaded 事件触发之前你的所有 JS 文件还没有加载：

document.observe("dom:loaded", function() {
    var worldAABB = new b2AABB();

错误发生在这个函数的第一行，这很可疑。 JS文件全部加载完毕后是否有事件触发？

所以，我认为您需要弄清楚这是否是脚本加载的时间问题，或者是否是依赖问题，并且永远不会加载所需的脚本。您可以通过将整个 document.observe("dom:loaded", function() { 临时替换为一个新函数来做到这一点，该函数仅在长时间超时后测试 b2AABB 的存在：

document.observe("dom:loaded", function() {
  setTimeout(function() {
    if (b2AABB) {
      alert("Found it");
    } else {
      alert("Still not there");
    }
  }, 60 * 1000);  // wait 60 seconds
}

如果 60 秒后它仍然不存在，那么它可能永远不会可用，并且您可能遇到了依赖性问题。如果它在 60 秒后出现，那么您可能有时间问题。

【讨论】：

  • 你所说的似乎是关于它的。在调用新的 b2AABB 之前，需要加载和需要 box2d JavaScript 文件。将检查原型，看看我是否可以确保在 Dom:loaded 之前加载了 requires，但我认为 dim:loaded 会出现在 box2d lib 文件之后，因为每个 goog.require 添加到 Dom。
  • 另一种选择是，这是一个关闭错误，与以某种方式加载 box2d 库错误有关。
  • 脚本可以在 DOM 准备好之前很久就加载，因为 JS 可以在 完成加载之前很久就在 标记中运行，所以对我来说这两个活动不一定是有意义的连接的。 Google 的模块加载器确实知道给定脚本何时完成加载 - 您只需要弄清楚如何访问该信息（我在新手搜索中找不到它）。
  • 原来我有一些主要的闭包 addDependency 问题，显然你必须在 goog.addDependency 中声明支持需求，现在测试一下。
  • 在我之前回答的末尾添加了一个新建议，以确定是时间问题还是依赖问题。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-26
  • 1970-01-01
  • 2016-04-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode