JavaScript模板

我试图说服同事在项目的前端使用Mustache / Hogan,并提出以下建议：

有一个templates.js文件,大致如下所示：

var tpl_alert = '<div class="alert">{{msg}}</div>';
var tpl_welcome = '<p class="user-{{type}}">Welcome, {{name}}</p>';
...

然后,我们将包括templates.js并在Mustache / Hogan.js渲染中使用相应的tpl.

我的提议被拒绝了,因为我们正在将html模板硬编码为js变量.
这真的那么糟糕吗？还有其他替代方法吗？

解决方法:

要回答您的问题,将模板放在静态JavaScript文件内的javascript变量中会使维护模板变得困难.每当您要进行简单的更改时,就需要担心字符串转义.并且1个语法错误将使您的应用程序崩溃.

但是,将所有模板放在单个JavaScript文件中是加载模板的最快方法.

您的替代方法是：

>将模板存储在单独的文件中,并生成静态template.js文件作为预构建步骤.
>通过AJAX将异步的html模板文件加载到javascript变量中.
>使用像Require.js这样的库,它将根据需要异步将模板加载到变量中.

标签：hogan-js,mustache,javascript
来源： https://codeday.me/bug/20191201/2081445.html