Question

我正在寻找在我的django网站上使用Javascript / JQuery集成一个post-it应用程序。

我发现了一些教程，我尝试将其插入到我的脚本中但是我得到了SyntaxError：

SyntaxError: missing ; before statement      post-it.js:2:19

我不知道Javascript语言因此对我来说有点复杂，但我看不到;丢失的位置：/

这是我的HTML post-it部分：

<h1>Post-It</h1>
<input type="button" value="Ajouter un Post-It" id="btn-addNote" />
<div id="board"></div>

这是我的Javascript文件：

(function ($, $S) {
// $jQuery
// $S window.localStorage
// Déclaration des variables
var $board = $('#board'),
// Placement des Post-It
Postick, //Object Singleton contenant les fonctions pour travailler sur le LocalStorage
len = 0,
// Nombre d'objets dans le LocalStorage
currentNotes = »,
// Stockage du code HTML de l'élément Post-It
o; // Données actuelles du Post-It dans le localStorage

// Gérer les Post-It dans le LocalStorage
// Chaque objet est enregistré dans le localStorage comme un Object
Postick = {
add: function (obj) {
obj.id = $S.length;
$S.setItem(obj.id, JSON.stringify(obj));
},

retrive: function (id) {
return JSON.parse($S.getItem(id));
},

remove: function (id) {
$S.removeItem(id);
},

removeAll: function () {
$S.clear();
},

};

// S'il existe des Post-It on les créer
len = $S.length;
if (len) {
for (var i = 0; i < len; i++) {
// Création de tous les Post-It se trouvant dans le localStorage
var key = $S.key(i);
o = Postick.retrive(key);
currentNotes += '<div class="postick"';
currentNotes += ' style="left:' + o.left;
currentNotes += 'px; top:' + o.top;
// L'attribut data-key permet de savoir quelle note on va supprimer dans le localStorage
currentNotes += 'px"><div class="toolbar"><span class="delete" data-key="' + key;
currentNotes += '">x</span></div><div contenteditable="true" class="editable">';
currentNotes += o.text;
currentNotes += '</div></div>';
}

// Ajoute tous les Post-It sur le tableau de bord
$board.html(currentNotes);
}

// Dès que le document est chargé, on rend tous les Post-It Draggable
$(document).ready(function () {
$(".postick").draggable({
cancel: '.editable',
"zIndex": 3000,
"stack" : '.postick'
});
});

// Suppression du Post-It
$('span.delete').live('click', function () {
if (confirm('Etes vous sûr de vouloir supprimer cette note ?')) {
var $this = $(this);
// L'attribut data-key permet de savoir quelle note on va supprimer dans le localStorage
Postick.remove($this.attr('data-key'));
$this.closest('.postick').fadeOut('slow', function () {
$(this).remove();
});
}
});

// Création du Post-It
$('#btn-addNote').click(function () {
$board.append('<div class="postick" style="left:20px;top:70px"><div class="toolbar"><span class="delete" title="Fermer">x</span></div><div contenteditable class="editable"></div></div>');
$(".postick").draggable({
cancel: '.editable'
});
});

// Sauvegarde tous les Post-It lorsque l'utilisateur quitte la page
window.onbeforeunload = function () {
// Nettoyage du localStorage
Postick.removeAll();
// Puis on insère chaque Post-It dans le LocalStorage
// Sauvegarde la position du Post-It, afin de le replacer lorsque la page est chargée à nouveau
$('.postick').each(function () {
var $this = $(this);
Postick.add({
top: parseInt($this.position().top),
left: parseInt($this.position().left),
text: $this.children('.editable').text()
});
});
}
})(jQuery, window.localStorage);

谢谢：）

PS：我认为SyntaxError来自那里：currentNotes = »,

Answer 1

Protip：开发时，保持压痕凉爽。你在这里缩进是一团糟，很难遵循代码块。我知道你是新人，所以不要担心，但只是习惯了一个干净的缩进。

现在，如果您获得代码并运行它，在其他地方（Chrome控制台，jsfiddle或其他）它会告诉您发生错误的确切行，就像SyntaxError一样，当引擎检查时会发生这种错误代码，但没有运行它，因此不需要将所有需要的lib与代码一起加载。

如果你检查这个小提琴：http://jsfiddle.net/8now04xs/1在控制台你会注意到错误来自第54行，如果你点击它（在CHrome DevTools中），它将引导你直接到达问题：http://i.imgur.com/G8tPl92.gifv

你是对的，错误代码来自你说的那一行。问题是不是字符串，也不是数字或有效关键字。是无效的角色。

我没有阅读所有代码，但我想你希望它是一个字符串。在JavaScript（以及几乎所有语言）中，必须使用单引号或双引号引用字符串，如下所示：

currentNotes = "»",

如果你查看其余的代码，你会在这个模式后面找到很多字符串，这样你就可以更好地理解它是如何工作的。如果你想让它成为一个空字符串，那么你必须这样做：

currentNotes = "",

如果仔细观察，这是有道理的。

修复此错误后，小提琴将失败，因为它会尝试运行代码并遇到很多问题，因为没有在Django环境中运行。

Answer 2

我在jshint上检查您的代码。有2个问题。

1。引用'»' [我已在评论时提及此事。]

缺少;

   }; // Missing ; in this line.
})(jQuery, window.localStorage);

Javascript SyntaxError：missing;陈述之前

2 个答案: