时间戳

首页 > 解决方案 > 编译旧项目时出现大量“未定义”ESLint 错误

javascript - 编译旧项目时出现大量“未定义”ESLint 错误

问题描述

我打开了一个 4 年前的项目来重构它。尽管一切正常，但现在有很多“未定义”错误。

JS 文件在 HTML 页面的末尾加载，就在</body>. 这是文件列表：

<script src="js/vendor/jquery-2.2.3.min.js"></script>
<script src="js/vendor/video.min.js"></script>
<script src="js/vendor/waypoints.min.js"></script>
<script src="js/vendor/slick.min.js"></script>
<script src="js/vendor/threesixty.min.js"></script>
<script src="js/main.min.js"></script>

main.min.js是一个文件，其中包含其上方插件和任何附加/自定义 JS 的设置。由于动画和canvas元素的所有 JS，有很多代码（对不起）。这里是：

/* ==========================================================================
 #VIDEO OVERLAY
 ========================================================================== */
 
var myPlayer = videojs('my-video');

$(".lp-masthead__btn").click(function() {
    myPlayer.play();

    $(".lp-overlay").show();
    $( "body" ).css( "overflow" , "hidden" ); //disable the scroll
});

$(".lp-overlay__close").click(function() {
    myPlayer.pause();

    $(".lp-overlay").hide();
    $( "body" ).css( "overflow" , "auto" );  //enables the scroll back
});




/* ==========================================================================
 #WAYPOINTS
 ========================================================================== */
 
$(document).ready(function(){
    var waypoints = document.querySelectorAll('.lp-showcase__item');
    for (var i = waypoints.length - 1; i >= 0; i--) {
        var waypoint = new Waypoint({
            element: waypoints[i],
            handler: function(direction) {
                this.element.classList.toggle('in-view');
            },
            offset: '60%'
        });
    }
});




/* ==========================================================================
 #MOVEIT  - animate divs at different speeds on scroll.
 ========================================================================== */  
     
$.fn.moveIt = function() {
    var $window = $(window);
    var instances = [];

    $(this).each(function() {
        instances.push(new moveItItem($(this)));
    });

    window.addEventListener('scroll', function() {
        var scrollTop = $window.scrollTop();
        instances.forEach(function(inst) {
            inst.update(scrollTop);
        });
    }, {
        passive: true
    });
}

var moveItItem = function(el) {
    this.el = $(el);
    this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop) {
    this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};

// Initialization
$(function() {
    $('[data-scroll-speed]').moveIt();
});




/* ==========================================================================
 #SLIDE SLIDER
 ========================================================================== */
  
  $(document).ready(function(){
      $(".lp-showcase__inner").slick({
          mobileFirst: true,
          autoplay: false,
          infinite: false,
          autoplaySpeed: 4000,
          delay: 5000,
          speed: 700,
          dots: true,
          arrows : false,
          adaptiveHeight : false,
          touchThreshold : 5,
          responsive: [
              {
                  breakpoint: 1000,
                  settings: "unslick"
              }
          ]
      });
  });

  $(window).on('resize orientationchange', function() {
      $('.lp-showcase__inner').slick('resize');
  });
  
  
  
  
/* ==========================================================================
 #360 SLIDER
 ========================================================================== */
  
  $(document).ready(function(){

      window.onload = init;

      var jacket;
      function init(){

          jacket = $('.lp-jacket-360').ThreeSixty({
              totalFrames: 23, // Total no. of image you have for 360 slider
              endFrame: 23, // end frame for the auto spin animation
              currentFrame: 1, // This the start frame for auto spin
              imgList: '.threesixty_images', // selector for image list
              progress: '.spinner', // selector to show the loading progress
              imagePath:'img/content/threesixty/', // path of the image assets
              filePrefix: 'stormfit-360--', // file prefix if any
              ext: '.png', // extention for the assets
              height: 600,
              width: 600,
              navigation: true,
              responsive: true
          });
      }
  });
  
  
  
  
/* ==========================================================================
 #CANVAS SMOKE
 ========================================================================== */

$(function(){

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

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

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

    // The target frames per second (how often do we want to update / redraw the scene)
    var targetFPS = 18;
    // 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 = "img/interface/stormfit-smoke.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(255, 255, 255, .10)";
            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('lp-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();
        });
    }

    // Only run the script if `#metropallax` is on the page. Prevents console errors.

    if ($('#lp-smoke').length > 0) {

        // 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);
    }
});

我实际上无法导出所有错误的列表，但其中大多数似乎是'$' 未定义。无非定义。也...

这个项目大约有 4 年历史，我正在尝试重用/更新它，因此为什么里面有很多“旧”的东西 - 所以我正在尝试整理它（JS 知识有限）。

标签： javascriptjqueryundefinedeslint

解决方案

推荐阅读