我的脚本在JSLint中失败了

时间:2017-06-17 16:36:52

标签: javascript closures jslint

我会有一个问题。 以下脚本没有错误地通过JSLint。 请不要投票给我。此脚本仅用于学习目的,以便更好地理解闭包。如果您比它更了解它,请发布您的解决方案。

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

  

JSLint无法完成。   43.8预期';'而是看到'}'

这是我的剧本

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");

如果我在那里放一个分号,那么每条线都会收到错误信息。 该脚本按预期工作,但我对此错误无能为力。

谢谢

2 个答案:

答案 0 :(得分:1)

你试过把#34 ;;"在相关线上方的第(42)行的末尾?尝试将它放在两条线上并再次运行。

更新: 添加"使用严格&#34 ;;在脚本的开头。告诉JsLint容忍"空白混乱"。添加";"在第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);

答案 1 :(得分:1)

好的,所以你正在使用非常严格的linting规则。

以下列出了我需要改变的内容,以使得品牌变得快乐:

  • 在return语句和路径函数声明
  • 之后加上分号
  • "use strict";函数
  • 的顶部放置path语句
  • 删除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");