在我的javascript代码中未捕获语法错误

Question

在我的javascript代码中，我得到了一个“未捕获的语法错误:意外的标识符”错误。这段代码基本上只是教程的1:1副本，我将其调整为适合我的html file.The错误发生在"Create StickyNote“函数的第86行。代码如下：

(function ($, $S) {
//$ jQuery
//$S window.localStorage
//Variables Declaration
var $board = $('#board'),
    //Board where the stickyNotes are stuck
    stickyNoteClass, //Singleton Object containing the Functions to work with the LocalStorage
    len = 0,
    //Length of Objects in the LocalStorage 
    currentNotes = '',
    //Storage the html construction of the stickyNotes
    o; //Actual stickyNoteClass data in the localStorage



//Manage the stickyNotes in the Local Storage
//Each stickyNote is saved in the localStorage as an Object  
stickyNoteClass = {
    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();
    }

};

//If any stickyNote exists, Create it/them
len = $S.length;
if (len) {
    for (var i = 0; i < len; i++) {
        //Create all stickyNotes saved in localStorage
        var key = $S.key(i);
        o = stickyNoteClass.retrive(key);
        currentNotes += '<div class="stickyNote"';
        currentNotes += ' style="left:' + o.left;
        currentNotes += 'px; top:' + o.top;
        //data-key is the attribute to know what item delete in the 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>';
    }

    //Append all the stickyNotes to the board
    $board.html(currentNotes);
}

/*Dont need to implement this one, as it is already implemented in the html index file
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
//When the document is ready, make all stickyNotes Draggable
$(document).ready(function () {
    $(".stickyNote").draggable({
        cancel: '.editable',
        "zIndex": 3000,
        "stack" : '.stickyNote'
    });
});*/

//Remove stickyNoteClass
$('span.delete').live('click', function () {
    if (confirm('Are you sure you want to delete this Note?')) {
        var $this = $(this);
        //data-key is the attribute to know what item delete in the localStorage
        stickyNote.remove($this.attr('data-key'));
        $this.closest('.stickyNote').fadeOut('slow', function () {
            $(this).remove();
        });
    }
});

//Create stickyNote
$('#new stickyNote').click(function () {
    $board.append('<div class="stickyNote" style="left:20px;top:70px">
            <span class="delete" title="Close">x</span>
            <h1>Drag Me</h1>
            <p class="editable">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>
</div>');

    /*Dont need to do this, as the draggable is implemented in the html file for all
    divs which are placed within the #board.
    ------------------------------------------------------------------------------------
    ------------------------------------------------------------------------------------
    $(".stickyNote").draggable({
        cancel: '.editable'
    });*/
});

//Save all the stickyNotes when the user leaves the page
window.onbeforeunload = function () {
    //Clean the localStorage
    stickyNoteClass.removeAll();
    //Then insert each stickyNote into the LocalStorage
    //Saving their position on the page, in order to position them when the page is loaded again
    $('.stickyNote').each(function () {
        var $this = $(this);
        stickyNoteClass.add({
            top: parseInt($this.position().top),
            left: parseInt($this.position().left),
            text: $this.children('.editable').text()
        });
    });
}
})(jQuery, window.localStorage);

Answer 1

正如@FelixKling所指出的，多行字符串是不允许以您所拥有的方式使用的。更改此设置：

$('#new stickyNote').click(function () {
    $board.append('<div class="stickyNote" style="left:20px;top:70px">
            <span class="delete" title="Close">x</span>
            <h1>Drag Me</h1>
            <p class="editable">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>
</div>');

    /*Dont need to do this, as the draggable is implemented in the html file for all
    divs which are placed within the #board.
    ------------------------------------------------------------------------------------
    ------------------------------------------------------------------------------------
    $(".stickyNote").draggable({
        cancel: '.editable'
    });*/
});

要这样做：

    $board.append('<div class="stickyNote" style="left:20px;top:70px">' +
            '<span class="delete" title="Close">x</span>' +
            '<h1>Drag Me</h1>' +
            '<p class="editable">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>' +
            '</div>');