我的脚本在 JSLint 中失败

Question

我有一个问题。以下脚本不会通过 JSLint 而不会出现错误。请不要投票给我。该脚本仅用于学习目的，以便更好地理解闭包。如果您比 post 更了解您的解决方案。

问题是当我用 JSLint 检查代码时，我收到以下错误消息：

JSLint was unable to finish. 43.8Expected ';' and instead saw '}'

这是我的脚本

var c = document.querySelector("#c");
    var ctx = c.getContext("2d");
    var path = function () {
        return {
            innerTri: function (x, y, width, height, fill, stroke) {
                x = x || 0;
                y = y || 0;
                fill = fill || "yellow";
                stroke = stroke !== undefined ? stroke : fill;
                if (width === undefined || height === undefined) {
                    alert("You need to provide width and height");
                    return false;
                }
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x = x + width, y);
                ctx.lineTo(x, y = y + height);
                ctx.closePath();
                ctx.fillStyle = fill;
                ctx.strokeStyle = stroke;
                ctx.fill();
                ctx.stroke();

            },

            outRect: function (x, y, width, height, stroke) {
                x = x || 0;
                y = y || 0;
                stroke = stroke || "black";
                if (width === undefined || height === undefined) {
                    alert("You need to provide width and height");
                    return false;
                }
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x = x + width, y);
                ctx.lineTo(x, y = y + height);
                ctx.lineTo(x = x - width, y);
                ctx.strokeStyle = stroke;
                ctx.closePath();
                ctx.stroke();
            }
        }
    } //this is the position 43.8
    var a = path();
    a.innerTri(225, 225, 50, 50, "yellow", "green");
    a.outRect(200, 200, 100, 100, "blue");

如果我在那里放一个分号，那么每一行都会收到错误消息。该脚本按我的预期工作，但我无法对这个错误执行任何操作。

谢谢

Answer 1

你试过把“;”在相关行上方的第（42）行末尾？试着把它放在两行，然后再运行它。

更新：添加"use strict"；在脚本的开头。告诉 JsLint 容忍 "whitespace mess"。添加 ”;”在第 42 和 43 行。运行 JsLint，现在您将看到真正的错误：

Unexpected statement '=' in expression position.
           ctx.lineTo(x = x + width, y);
Unexpected statement '=' in expression position.
            ctx.lineTo(x, y = y + height);
Unexpected statement '=' in expression position.
            ctx.lineTo(x = x + width, y);
Unexpected statement '=' in expression position.
            ctx.lineTo(x, y = y + height);
Unexpected statement '=' in expression position.
            ctx.lineTo(x = x - width, y);

Answer 2

好的，所以您使用的是极其严格的 linting 规则。

以下是我需要更改以使 linter 满意的列表：

在return语句和路径函数声明后加上分号
在 path 函数的顶部放置一个 "use strict"; 语句
删除 lineTo() 参数列表中的内联变量赋值
说明您正在使用 window 作为全局对象（在 JSLint 设置中）
调用 window.alert() 而不仅仅是 alert()
声明 JSLint 假定此代码将在浏览器中使用（在 JSLint 设置中）
确保每一级缩进与上一级缩进正好相差4个空格

结果代码如下所示：

var c = document.querySelector("#c");
var ctx = c.getContext("2d");
var path = function () {
    "use strict";
    return {
        innerTri: function (x, y, width, height, fill, stroke) {
            x = x || 0;
            y = y || 0;
            fill = fill || "yellow";
            if (stroke === undefined) {
                stroke = fill;
            }
            if (width === undefined || height === undefined) {
                window.alert("You need to provide width and height");
                return false;
            }
            ctx.beginPath();
            ctx.moveTo(x, y);
            x = x + width;
            ctx.lineTo(x, y);
            y = y + height;
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.fillStyle = fill;
            ctx.strokeStyle = stroke;
            ctx.fill();
            ctx.stroke();

        },

        outRect: function (x, y, width, height, stroke) {
            x = x || 0;
            y = y || 0;
            stroke = stroke || "black";
            if (width === undefined || height === undefined) {
                window.alert("You need to provide width and height");
                return false;
            }
            ctx.beginPath();
            ctx.moveTo(x, y);
            x = x + width;
            ctx.lineTo(x, y);
            y = y + height;
            ctx.lineTo(x, y);
            x = x - width;
            ctx.lineTo(x, y);
            ctx.strokeStyle = stroke;
            ctx.closePath();
            ctx.stroke();
        }
    };
};
var a = path();
a.innerTri(225, 225, 50, 50, "yellow", "green");
a.outRect(200, 200, 100, 100, "blue");

我的脚本在 JSLint 中失败

My script is failing in JSLint

javascript

closures

jslint