如何在Handlebar.js中根据屏幕尺寸渲染不同的partial？

首先明确核心限制：Handlebars.js默认是服务端运行的模板引擎，模板渲染逻辑在服务端执行，无法直接获取客户端的屏幕尺寸参数，所以不能直接在Handlebars模板语法中写基于屏幕尺寸的条件判断，需要结合前端逻辑实现，常用可落地的方案有以下三种：

方案1：CSS媒体查询控制显示隐藏（实现成本最低） #

• 适用场景：不同尺寸对应的partial内容量较小，对冗余代码容忍度高，需要兼顾SEO的项目
• 实现步骤：
  1. 在Handlebars模板中同时渲染所有尺寸对应的partial，给每个partial添加专属标识类，示例模板代码：

<div class="responsive-partial">
  {{> partial-mobile}}
  {{> partial-desktop}}
</div>

2. 前端编写CSS媒体查询，根据屏幕尺寸控制对应partial的显隐：

/* 移动端适配：小于768px时仅展示移动端partial */
@media (max-width: 767px) {
  .partial-desktop {
    display: none !important;
  }
}
/* 桌面端适配：大于等于768px时仅展示桌面端partial */
@media (min-width: 768px) {
  .partial-mobile {
    display: none !important;
  }
}

方案2：前端动态请求对应partial（无冗余代码） #

• 适用场景：partial内容量大，不想输出冗余代码，对SEO要求不高的项目
• 实现步骤：
  1. 服务端新增专用接口，接收partial类型参数，返回对应渲染完成的partial HTML片段
  2. 前端页面加载后，先通过window.innerWidth检测当前屏幕尺寸，发起请求获取对应partial的内容，插入到页面指定容器中
  3. 如需支持窗口尺寸变化时自动切换，可绑定resize事件监听，重复请求替换内容逻辑即可

方案3：客户端Handlebars动态渲染（适合前后端同构项目） #

• 适用场景：项目已经引入客户端版Handlebars运行时，需要灵活控制渲染逻辑的场景
• 实现步骤：
  1. 服务端将所有需要用到的partial模板提前输出到前端，可存放在type="text/x-handlebars-template"的script标签中，或者打包到前端JS资源里
  2. 前端检测屏幕尺寸后，调用Handlebars.compile()编译对应partial模板，传入业务数据生成HTML，插入到页面容器中

注意事项：如果项目需要严格兼顾SEO，优先选择第一种CSS方案，后两种动态加载的内容可能无法被搜索引擎爬虫正常抓取。

内容的提问来源于stack exchange，提问作者Growing-Programmer