JavaScript 字符串字面量重用组件

Question

我正在尝试为模板使用模板/字符串文字，我一直在观看有关该主题的几个视频并一直在关注 this很棒的教程。

我认为使用可重用 block 会很酷，因为有些元素会出现多次。

模板函数

function templater(strings, ...keys) {

    return function(data) {
        let temp = strings.slice();
        keys.forEach((key, i) => {
            temp[i] = temp[i] + data[key];
        });
        return temp.join('');
    }
};

示例 block

let contentHead = `
    <header>
        ${'myHeader'}
    </header>
`

let contentFooter = `
    <footer>
        ${'myFooter'}
    </footer>
`

包含所有必要卡盘的模板

let contentTemplate = templater`
    <div>
        ${'contentHead'}
        ${'contentFooter'}
    </div>
    `

这是我为模板设置数据的地方

const content = {
    myHeader: 'This is my header',
    myFooter: 'This is my footer',
    contentHead: contentHead,
    contentFooter: contentFooter,
}

这就是我测试代码的方式

const myTemplate = contentTemplate(content);
console.log(myTemplate);

输出将是

<div>
   <header>
       myHeader
   </header>
   <footer>
       myFooter
   </footer>
</div>

如果我这样做而不调用这样的变量

let contentTemplate = templater`
    <div>
         <header>
             ${'myHeader'}
         </header>
         <footer>
             ${'myFooter'}
        </footer>
    </div>


const content = {
    myHeader: 'This is my header',
    myFooter: 'This is my footer'
}

输出将是正确的

<div>
   <header>
       This is my header
   </header>
   <footer>
       This is my footer
   </footer>
</div>

那么为什么这不起作用，我在 JSON 对象中调用了两个字符串文字变量，然后在模板函数中使用，它不起作用，因为这两个 block 是在标记模板函数之外传递的，然后切换到没有自己的内容的模板被做什么？

我怎样才能以最好的方式解决这个问题？ :)

Answer 1

您的示例 block 不使用templater，它们是普通的模板字符串并立即被插入。 contentHead 和 contentFooter 只是两个字符串，它们的插入方式与 myHeader 和 myFooter 完全一样，由您的函数插入您的工作示例。

相反，在 block 上也使用模板，并让它递归地将数据传递给 block 函数:

function templater(parts) {
    return (data) => {
        let res = parts[0];
        for (let i=1; i<parts.length; i++) {
            const val = arguments[i];
            if (typeof val == "function") {
                res += val(data);
            } else {
               res += data[val];
            }
            res += parts[i];
        }
        return res;
    }
};

你会像这样使用它:

const contentHead = templater`
    <header>
        ${'myHeader'}
    </header>
`;
const contentFooter = templater`
    <footer>
        ${'myFooter'}
    </footer>
`;
const contentTemplate = templater`
    <div>
        ${contentHead}
        ${contentFooter}
    </div>
`;

console.log(contentTemplate({
    myHeader: 'This is my header',
    myFooter: 'This is my footer',
}));

如果你想在 data 中通过名称引用 block ，而不是在 contentTemplate 构造期间直接通过变量引用，你还可以检查 data[ key] 是一个函数。