javascript - 阻止脚本在不需要的页面上运行

Question

我有 2 段脚本(JS + CANVAS)，并不是每个页面都需要它们，但是它们包含在全局 JS 文件中，因此出现了一些控制台错误。

我设法通过在运行脚本之前检查父 div 是否在页面上来解决类似的问题，方法是将其包装如下: if ($('#parent-div').length > 0) { } ...但是我似乎无法让它与我遇到问题的其他脚本一起使用。

脚本的第一部分相对较短:

$(function(){
    var scene = document.getElementById('metropallax');
    var parallaxInstance = new Parallax(scene, {
        relativeInput: true,
        calibrateX: false,
        calibrateY: true,
        invertX: false,
        invertY: true,
        limitX: false,
        //limitY: 10,
        limitY: 0,
        scalarX: 2,
        scalarY: 8,
        frictionX: 0.2,
        frictionY: 0.8,
        originX: 0.0,
        originY: 1.0
    });
});

我本以为我之前给出的例子可以很好地解决这个问题，但显然不是。可能做了一些愚蠢的事情/错过了一些明显的事情。

canvas 脚本长得可笑，但我会将其全部包含在内，因为我认为这是最好的:

$(function(){

    // Create an array to store our particles
    var particles = [];

    // The amount of particles to render
    var particleCount = 8;
    // Orig 30

    // The maximum velocity in each direction
    var maxVelocity = 4;

    // The target frames per second (how often do we want to update / redraw the scene)
    var targetFPS = 24;
    // Orig 33

    // Set the dimensions of the canvas as variables so they can be used.
    var canvasWidth = 400;
    var canvasHeight = 400;

    // Create an image object (only need one instance)
    var imageObj = new Image();

    // Once the image has been downloaded then set the image on all of the particles
    imageObj.onload = function() {
        particles.forEach(function(particle) {
                particle.setImage(imageObj);
        });
    };

    // Once the callback is arranged then set the source of the image
    imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";

    // A function to create a particle object.
    function Particle(context) {

        // Set the initial x and y positions
        this.x = 0;
        this.y = 0;

        // Set the initial velocity
        this.xVelocity = 0;
        this.yVelocity = 0;

        // Set the radius
        this.radius = 5;

        // Store the context which will be used to draw the particle
        this.context = context;

        // The function to draw the particle on the canvas.
        this.draw = function() {

            // If an image is set draw it
            if(this.image){
                this.context.drawImage(this.image, this.x-128, this.y-128);         
                // If the image is being rendered do not draw the circle so break out of the draw function                
                return;
            }
            // Draw the circle as before, with the addition of using the position and the radius from this object.
            this.context.beginPath();
            this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
            this.context.fillStyle = "rgba(0, 255, 255, 1)";
            this.context.fill();
            this.context.closePath();
        };

        // Update the particle.
        this.update = function() {
            // Update the position of the particle with the addition of the velocity.
            this.x += this.xVelocity;
            this.y += this.yVelocity;

            // Check if has crossed the right edge
            if (this.x >= canvasWidth) {
                this.xVelocity = -this.xVelocity;
                this.x = canvasWidth;
            }
            // Check if has crossed the left edge
            else if (this.x <= 0) {
                this.xVelocity = -this.xVelocity;
                this.x = 0;
            }

            // Check if has crossed the bottom edge
            if (this.y >= canvasHeight) {
                this.yVelocity = -this.yVelocity;
                this.y = canvasHeight;
            }

            // Check if has crossed the top edge
            else if (this.y <= 0) {
                this.yVelocity = -this.yVelocity;
                this.y = 0;
            }
        };

        // A function to set the position of the particle.
        this.setPosition = function(x, y) {
            this.x = x;
            this.y = y;
        };

        // Function to set the velocity.
        this.setVelocity = function(x, y) {
            this.xVelocity = x;
            this.yVelocity = y;
        };

        this.setImage = function(image){
            this.image = image;
        }
    }

    // A function to generate a random number between 2 values
    function generateRandom(min, max){
        return Math.random() * (max - min) + min;
    }

    // The canvas context if it is defined.
    var context;

    // Initialise the scene and set the context if possible
    function init() {
        var canvas = document.getElementById('smoke');
        if (canvas.getContext) {

            // Set the context variable so it can be re-used
            context = canvas.getContext('2d');

            // Create the particles and set their initial positions and velocities
            for(var i=0; i < particleCount; ++i){
                var particle = new Particle(context);

                // Set the position to be inside the canvas bounds
                particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));

                // Set the initial velocity to be either random and either negative or positive
                particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
                particles.push(particle);            
            }
        }
        else {
            alert("Please use a modern browser");
        }
    }

    // The function to draw the scene
    function draw() {
        // Clear the drawing surface and fill it with a black background
        context.fillStyle = "rgba(0, 0, 0, 0.5)";
        context.fillRect(0, 0, 400, 400);

        // Go through all of the particles and draw them.
        particles.forEach(function(particle) {
            particle.draw();
        });
    }

    // Update the scene
    function update() {
        particles.forEach(function(particle) {
            particle.update();
        });
    }

    // Initialize the scene
    init();

    // If the context is set then we can draw the scene (if not then the browser does not support canvas)
    if (context) {
        setInterval(function() {
            // Update the scene befoe drawing
            update();

            // Draw the scene
            draw();
        }, 1000 / targetFPS);
    }
});

我认为其中有一些东西我可以使用 if 语句来定位，但我还没有找到它。谁能给点建议吗？

Answer 1

我不知道这是否适合您，但我会使用放置在 body 元素上的类来指示脚本是否应该运行。像这样:

<body class="canvas-on">

检查每个脚本开头的类。

或者您可以尝试使用 RequireJS 之类的东西来根据上面介绍的主体具有类机制来加载所需的 js 文件，如果不需要，则完全跳过加载文件。