时间戳

首页 > 解决方案 > 将“var”声明移动到函数顶部 - Javascript 错误

javascript - 将“var”声明移动到函数顶部 - Javascript 错误

问题描述

我正在关注如何在表单中创建动态更新评论的教程。我正在关注的指南不断出现错误，而我最近发现的指南不允许我修复它。它告诉我我需要将“var”声明移动到函数的顶部。也没有'$'的定义

任何帮助表示赞赏！

这是我的 JavaSript

var comment = [
    {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
    {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
    {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];

for (var i=0;i<comment.length;i++){
    var html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
    $('#container').append(html);
}

这是我的 HTML

<!DOCTYPE html>
<html>
    <head>
        <title> Reviews</title>
        <link href="css/Review.css" rel="stylesheet" type="text/css">
    </head>
<body>
    
    
    <div class='form'>
        <h3>Please write a review about your stay</h3>
    Name: <input type="text" id="name"/> <br> <br>
    Date: <input type="date" id="date"/> <br> <br>
    Comment: <textarea rows="7" col="30" id="bodyText"></textarea><br>
    <input type="button" id="addComment" value="Submit">  
    
    </div>

    <h2>Comments</h2>

    
    <div id='container'>
    
    
    </div>
    <a href="{{ url_for('Index.html', id='content') }}">Go to Homepage</a>
    
    <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script>
    <script src="Review.jquery.js" type="text/javascript"></script>
</body>
</html>

标签： javascriptjqueryhtmlcssjslint

解决方案

linter 告诉您应该声明i，并且在解释器comment看到变量已声明的同一点，该变量将位于最内层函数的顶部，或者如果您已经在顶层，则位于最顶层的顶层。例如，对于您的代码：

var i;
var comment;
var html;
comment = [
    {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
    {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
    {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];

for (i=0;i<comment.length;i++){
    html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
    $('#container').append(html);
}

如果你不这样做，你可能会因为var' 不直观的提升问题而感到困惑——这就是 linting 规则的用途。（这不是 Javascript 解释器错误，它只是你的 linter 抛出的错误。）

也就是说，您可以考虑使用现代语法，而不是使用constand let，它们不会被提升，并且您可以使用数组方法而不是for循环来获得更多功能和简洁的代码，如果您愿意：

const comment = [
  {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
  {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
  {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
comment.forEach(({ name, date, body }) => {
  const html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+name+"</span><div class='date'>"+.date+"</div><p>"+body+"</p></div><div class='clear'></div></div>"
  $('#container').append(html);
});

你也可以考虑使用现代的 linter，比如 ESLint。JSLint 已经很老了，并且对现代 JS 允许我们使用的许多漂亮语法糖不太了解。

推荐阅读