javascript - 如何更改事件处理程序中传递的变量

Question

我想知道是否有办法通过处理事件来改变“外部”变量

function generateHTML()
{
    var html = '';

    // Some html generating code
    html += '<b>John Doe</b>';

    $(document).trigger('html:generating', html);

    // Do more hardcoded stuff with html

    $(document).trigger('html:generated', html);

    return html;
}

$(document).on('html:generating', function(e, html) {
    html = '<span>' + html + '</span>';
});

$(document).on('html:generated', function(e, html) {
    console.log(html);  // prints <b>John Doe</b>
                        // expected <span><b>John Doe</b></span>
});

generateHTML();

这在处理 Mustache(或任何其他模板库)动态 html 代码时非常有用。

Answer 1

如果您正在谈论通过引用传递 html，有一种方法可以做到。作为函数参数传递的所有内容都是按值传递的，但是如果传递一个对象，对象属性仍然指向原始值，因为指针被复制了。所以，你可以这样做:

function generateHTML()
{
    var container={html: ''};

    // Some html generating code
    container.html += '<b>John Doe</b>';

    $(document).trigger('html:generating', container);

    // Do more hardcoded stuff with html

    $(document).trigger('html:generated', container);

    return container.html;
}

$(document).on('html:generating', function(e, container) {
    container.html = '<span>' + container.html + '</span>';
});

$(document).on('html:generated', function(e, container) {
    console.log(container.html);
});

generateHTML();