javascript - 增加对变量范围和声明的理解

Question

(function() {

    var content = [
        {
            title: 'My awesome blog post',   
            thumbnail: 'images/bane.jpg',
        },
        {
            title: 'My second awesome blog post',
            thumbnail: 'images/joker.jpg',
        },
    ],
        template = $.trim( $('#blogTemplate').html() ),
        frag = '';

    $.each( content, function( index, obj ) {  
        frag +=
            template.replace( /{{title}}/ig, obj.title )
                    .replace( /{{thumbnail}}/ig, obj.thumbnail );       
    });

    $('body').append(frag);

})();

你好，

我只是想知道为什么自调用匿名函数中包含的代码块不能像这样以 var 关键字为前缀的以下变量声明:

    var template = $.trim( $('#blogTemplate').html() ),
    var frag = '';

将 var 关键字添加到此函数中的局部变量 - template 和 frag 似乎破坏了我的代码，我真的不明白为什么，但是如果我声明template 和 frag 在函数之外的全局范围内，如下所示，然后我的代码就可以工作了。

var template;
var frag;

如果这与范围有关并且任何人有时间解释它，我们将不胜感激。理想情况下，我想在 template 和 frag 前加上 var 关键字以提高可读性。

Answer 1

我怀疑是变量声明之间的逗号破坏了您的代码，而不是 var 关键字本身的使用。试试这个:

var template = $.trim( $('#blogTemplate').html() ),
frag = '';

var 关键字已应用于您提供的第一个代码段中的模板和片段，因为它们是逗号分隔的局部变量声明列表中的第二项和第三项。

function(){
    var x = 1, 
        y = 2, 
        z = 3;
    window.x; //undefined
    x; //1
    window.y;//undefined
    y; //2
}

最简洁的方法是完全避开语法糖，将每个变量声明分成单独的语句:

var content = [
    {
        title: 'My awesome blog post',   
        thumbnail: 'images/bane.jpg',
    },
    {
        title: 'My second awesome blog post',
        thumbnail: 'images/joker.jpg',
    }
];
var template = $.trim($('#blogTemplate').html());
var frag = '';