this.tpl = '<li class="text-list">\ <ul class="info-items">\ <li class="info-item">文件文号：<span title="{{file}}">{{file}}</span></li>\ <li class="info-item">所属部门：<span title="{{depart}}">{{depart}}</span></li>\ </ul>\ </a>\ <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\ </li>'; 封装juqery组件，现在想把这个tpl做成可配置的，比如用户配置：{name:'文件文号：',fieldName:'file'}，页面上就会有这一行，也只有这一行

可以将原来的 tpl 改成模板字符串，然后在模板字符串中使用变量来代替原来的字符串。比如可以这样实现：

const tplConfig = {
  name: '文件文号：',
  fieldName: 'file'
};

const tpl = `
  <li class="text-list">
    <ul class="info-items">
      <li class="info-item">${tplConfig.name}<span title="{{${tplConfig.fieldName}}}">{{${tplConfig.fieldName}}}</span></li>
    </ul>
    <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>
  </li>
`;

这样，就可以将配置项动态地插入到模板字符串中，从而生成可配置的代码。

相关问题

在js文件中使用这个模板 this.tpl = '<li class="text-list" data-guid="{{guid}}">\ <a class="text-list-info" target="{{target}}" href="javascript:;">\ <p class="name" title="{{name}}">{{name}}</p>\ <ul class="info-items">{{#tplConfig}}\ <li class="info-item">{{name}}：<span title="{{value}}">{{value}}</span></li>{{/tplConfig}}\ </ul>\ </a>\ <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\ </li>'; 请帮忙优化 请用es5优化

可以使用 ES5 中的字符串模板来优化这个模板，如下所示：

this.tpl = '<li class="text-list" data-guid="{{guid}}">' +
           '<a class="text-list-info" target="{{target}}" href="javascript:;">' +
           '<p class="name" title="{{name}}">{{name}}</p>' +
           '<ul class="info-items">{{#tplConfig}}' +
           '<li class="info-item">{{name}}：<span title="{{value}}">{{value}}</span></li>{{/tplConfig}}' +
           '</ul>' +
           '</a>' +
           '<a class="text-list-btn" href="javascript:;"><span>咨询</span></a>' +
           '</li>';

您还可以使用字符串模板的另一种形式，即反引号（`）来编写模板，如下所示：

this.tpl = `<li class="text-list" data-guid="{{guid}}">
             <a class="text-list-info" target="{{target}}" href="javascript:;">
               <p class="name" title="{{name}}">{{name}}</p>
               <ul class="info-items">{{#tplConfig}}
                 <li class="info-item">{{name}}：<span title="{{value}}">{{value}}</span></li>{{/tplConfig}}
               </ul>
             </a>
             <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>
           </li>`;

在使用字符串模板时，需要注意反引号在一些旧版本的浏览器中可能不被支持，可以使用 babel 等工具将 ES6 代码编译成 ES5 代码以保证兼容性。

var tpl = '<li class="text-list">\n <ul class="info-items">\n <li class="info-item">' .concat(tplConfig.name, '<span title="{{') .concat(tplConfig.fieldName, '}}">{{') .concat( tplConfig.fieldName, '}}</span></li>\n </ul>\n <a class="text-list-btn" href="javascript:;"><span>咨询</span></a>\n</li>;' ); 优化折中写法

可以将模板字符串的多行拆成多个字符串拼接，这样可以省去 `\n` 转义字符，同时也可以更加清晰地表达字符串的拼接：

var tpl = '<li class="text-list">' +
  '<ul class="info-items">' +
    '<li class="info-item">' + tplConfig.name +
      '<span title="{{' + tplConfig.fieldName + '}}">' +
        '{{' + tplConfig.fieldName + '}}' +
      '</span>' +
    '</li>' +
  '</ul>' +
  '<a class="text-list-btn" href="javascript:;"><span>咨询</span></a>' +
'</li>';

这样写可以保持代码的可读性，也不会增加代码量太多。