你需要什么

最近，我收到了与HTML，CSS和JavaScript斗争的人的电子邮件。他们的代码包含HTML占位符和JavaScript数据，无法正常工作。预期的行为是让JavaScript数据填充HTML占位符，这是初学者的普遍期望。

尽管有经验的网络开发人员很容易地确定这个问题，但了解这一观点并提供直接的解决方案是很有价值的。

有问题的HTML：

<meta charset="utf-8"><title>测试</title><link href="test.css" rel="stylesheet"><div>{公司名称}</div>

相应的JavaScript：

 var company_data = {
  “ {Company_name}”：“某些公司”，
};

该代码是有效的并运行的，但是它只是显示“ {Company_name}”，因为浏览器不会自动用JavaScript数据替换占位符。

一个简单的修复（但不是理想的）：

要显示“某些公司”，一系列的JavaScript就足够了：

 var company_data = {
  “ {company_name}”：“一些公司”
};

document.queryselector（“ div”）。innerhtml = company_data [“ {company_name}”];

该解决方案虽然功能性，但缺乏可重复性和鲁棒性。

需要模板

用户的期望是系统将自动处理模板 - 用匹配的JavaScript键代替HTML占位符。这不是标准Web技术的固有。

有许多方法可以实现这一目标。这里有几个：

• 模板引擎：使用模板引擎（例如车把或胡须）。
• 静态位点发生器：采用静态位点发生器，例如高高（使用液体）。
• 自定义HTML模板：创建HTML<template></template>元素并编写一个脚本来利用它。
• Web组件：构建自定义Web组件。
• 服务器端渲染：使用后端语言或像Nunjucks这样的工具在服务器上处理模板。
• 预处理器：使用像哈巴狗这样的预处理器。

理想情况下，模板应发生服务器端或在构建过程中，以避免不必要的DOM操纵。但是，出于说明目的，使用车把的客户端示例如下：

（将在此处插入车把示例，显示如何使用车把来实现所需的模板。）

以上是你需要什么的详细内容。更多信息请关注PHP中文网其他相关文章！