移动端离线转在线时_.template编译失败致邮件异常求助

问题描述 #

使用Lodash 4.17.11的_.template编译邮件模板时，在线状态下运行正常，但离线操作后切换回在线状态，模板无法完成编译，导致发送的邮件内容无效。相关代码如下：

var compiled_email = _.template('<p style="line-height: 1.5;">Test content</p><p>Action plan identifier: ${ identifier }</p><p>Action category: ${ actioncategory }</p><p>Type of action plan: ${ actiontype }</p><p>Activity: ${ activity }</p><p>Due date: ${ duedate }</p><p><br></p>');
var result = compiled_email({
    'identifier': 'testa',
    'actioncategory': 'testb',
    'actiontype': 'testc',
    'activity': 'testd',
    'duedate': 'teste'
});

可能原因及解决办法 #

1. 预编译模板并缓存，避免重复编译 #

离线切换在线时重新编译模板可能因环境状态异常失败，建议首次在线时预编译模板并存入本地存储，后续直接使用预编译好的函数：

// 首次在线时执行，把编译后的函数存入localStorage
if (!localStorage.getItem('compiledEmailTemplate')) {
    var compiled = _.template('<p style="line-height: 1.5;">Test content</p><p>Action plan identifier: ${ identifier }</p><p>Action category: ${ actioncategory }</p><p>Type of action plan: ${ actiontype }</p><p>Activity: ${ activity }</p><p>Due date: ${ duedate }</p><p><br></p>');
    localStorage.setItem('compiledEmailTemplate', JSON.stringify(compiled.toString()));
}

// 使用时从缓存取出并转为可执行函数
var compiledFuncStr = localStorage.getItem('compiledEmailTemplate');
var compiled_email = new Function('return ' + compiledFuncStr)();
var result = compiled_email({
    'identifier': 'testa',
    'actioncategory': 'testb',
    'actiontype': 'testc',
    'activity': 'testd',
    'duedate': 'teste'
});

2. 校验模板字符串完整性 #

离线操作可能导致存储的模板字符串损坏，使用前先验证模板是否包含所有必要插值变量：

var templateStr = '<p style="line-height: 1.5;">Test content</p><p>Action plan identifier: ${ identifier }</p><p>Action category: ${ actioncategory }</p><p>Type of action plan: ${ actiontype }</p><p>Activity: ${ activity }</p><p>Due date: ${ duedate }</p><p><br></p>';
// 检查所有必填变量是否存在于模板中
var requiredVars = ['identifier', 'actioncategory', 'actiontype', 'activity', 'duedate'];
var isTemplateValid = requiredVars.every(varName => templateStr.includes(`\${ ${varName} }`));

if (isTemplateValid) {
    var compiled_email = _.template(templateStr);
    var result = compiled_email({
        'identifier': 'testa',
        'actioncategory': 'testb',
        'actiontype': 'testc',
        'activity': 'testd',
        'duedate': 'teste'
    });
} else {
    // 模板损坏，在线时重新从服务器拉取模板
    fetch('/api/email-template')
        .then(res => res.text())
        .then(newTemplate => {
            templateStr = newTemplate;
            var compiled_email = _.template(templateStr);
            // 后续使用编译后的函数
        });
}

3. 替换为原生ES模板字符串，减少依赖 #

如果Lodash模板在离线切换场景下不稳定，直接用原生ES模板字符串替代，无需依赖第三方库：

function generateEmailContent(data) {
    return `<p style="line-height: 1.5;">Test content</p>
<p>Action plan identifier: ${ data.identifier }</p>
<p>Action category: ${ data.actioncategory }</p>
<p>Type of action plan: ${ data.actiontype }</p>
<p>Activity: ${ data.activity }</p>
<p>Due date: ${ data.duedate }</p>
<p><br></p>`;
}

// 使用时直接调用函数
var result = generateEmailContent({
    'identifier': 'testa',
    'actioncategory': 'testb',
    'actiontype': 'testc',
    'activity': 'testd',
    'duedate': 'teste'
});

4. 升级Lodash版本 #

Lodash 4.17.11是较旧版本，可能存在边缘场景bug，尝试升级到最新稳定版（如4.17.21及以上），看是否能解决离线切换的编译问题。

内容的提问来源于stack exchange，提问作者Info Zip