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关键字已经在您提供的第一个代码段中应用于模板和frag，因为它们是逗号分隔的局部变量声明列表中的第二个和第三个项目。

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 = '';

Answer 2

您无需为var添加前缀：

var a, b, c;

已经相当于：

var a;
var b;
var c;

Answer 3

它们已经是本地的并且在它们前面有var - 请注意使所有变量都成为声明和定义的单个列表的逗号，你似乎没有注意到这一点，因为它们被分成了几个行：

var content = [ /* multi-line array */ ], template = $.trim( $('#blogTemplate').html() ), frag = '';

当然，在列表中添加更多var是错误的语法。

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

3 个答案: