JavaScript 字符串文字重用组件

Question

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

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

模板函数

function templater(strings, ...keys) {

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

示例块

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 对象中调用了两个字符串文字变量，然后在模板函数中使用，它不起作用，因为这两个块是在标记的外部传入的模板功能，然后切换到模板，而没有对自己的内容进行任何处理？

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

Answer 1

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

相反，在块上也使用 templater，并让它递归地将 data 传递给块函数：

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中通过名称引用块，而不是在contentTemplate构造期间直接通过变量引用，您还可以检查data[key]是否是一个函数。

JavaScript 字符串文字重用组件

JavaScript string literals reuse components

javascript

templates

ecmascript-6

string-literals