HTML本身不支持策略模式，因其仅为静态标记语言；实际应用需在JavaScript中实现，如表单验证时将规则封装为独立函数并通过统一调度器调用，确保高内聚、低耦合与易扩展性。
HTML 本身不支持策略模式——它只是标记语言，没有运行时行为或对象模型。所谓“HTML 的策略模式”，实际是指在 JavaScript 中处理 HTML 相关逻辑（比如表单验证、内容渲染、标签清洗）时，用策略模式组织代码结构。
为什么不能直接在 HTML 里写策略模式
HTML 是声明式静态文档，<script></script> 标签里写的 JS 才是执行主体。策略模式依赖函数/类的封装、运行时选择、接口抽象，这些都必须落在 JS 层。把“策略”硬塞进 HTML 属性或注释里，不仅无法执行，还会污染语义、干扰可访问性。
常见误解包括：
- 试图用
data-strategy属性控制逻辑分支——属性只是数据载体，不触发策略切换 - 在 HTML 模板中写
if (type === 'email') {...}——这是模板引擎（如 Handlebars）或框架（如 Vue）的职责，不是原生 HTML 的能力 - 以为给不同
<div class="strategy-a"> 加 class 就算策略——class 只影响样式或选择器，不等于行为封装 <h3>表单验证场景下怎么用 JS 实现策略模式</h3> <p>以用户名、邮箱、手机号三类输入校验为例，核心是把每种规则抽成独立函数，再由统一入口调度：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class='brush:php;toolbar:false;'>const strategies = { notEmpty: (value, msg) => !value.trim() ? msg : '', isEmail: (value, msg) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? msg : '', isPhone: (value, msg) => !/^1[3-9]\d{9}$/.test(value) ? msg : '' }; const validate = (rules) => { for (const { field, strategy, errorMsg } of rules) { const value = field.value; const result = strategies[strategy](value, errorMsg); if (result) return result; } return ''; }; // 使用 validate([ { field: document.getElementById('username'), strategy: 'notEmpty', errorMsg: '用户名不能为空' }, { field: document.getElementById('email'), strategy: 'isEmail', errorMsg: '邮箱格式错误' } ]); </pre> <p>关键点：</p> <ul> <li>每个策略函数只做一件事，参数固定（值 + 错误提示），返回字符串（错误信息）或空字符串（通过）</li> <li>不耦合 DOM 操作，便于单元测试</li> <li>新增规则只需往 <code>strategies对象加一个键值对，不用改validate主逻辑
策略模式和 HTML 渲染逻辑怎么配合
当需要根据数据类型动态渲染不同 HTML 结构（比如状态 badge：成功/警告/失败），策略模式可解耦「判断」和「产出」：
const renderStrategies = {
success: (data) => `<span class="badge success">${data.label}</span>`,
warning: (data) => `<span class="badge warning">${data.label}（待确认）</span>`,
error: (data) => `<span class="badge error">❌ ${data.reason}</span>`
};
const renderByStatus = (status, data) => {
const fn = renderStrategies[status];
return fn ? fn(data) : renderStrategies.error({ reason: '未知状态' });
};
// 调用
document.body.innerHTML = renderByStatus('warning', { label: '上传中' });
注意：
- HTML 字符串拼接要谨慎 XSS，生产环境建议用
textContent或可信 DOM API（如document.createElement） - 不要把完整 HTML 模板（含事件绑定）塞进策略函数里——那会把视图逻辑和行为逻辑混在一起
- 如果项目用 React/Vue，策略应返回数据结构而非 HTML 字符串，交由组件模板决定渲染
容易被忽略的边界问题
策略模式看似简单，落地时几个坑高频出现：
-
strategies对象未做存在性检查，strategies[unknownType]返回undefined，调用时报TypeError: undefined is not a function - 策略函数内部修改了传入的
value（比如.trim()后直接赋值），导致原始数据丢失，影响后续流程 - 把异步操作（如 API 校验手机号是否已注册）硬塞进同步策略函数，破坏调用方预期
- 策略名用字符串硬编码（如
'isEmail'），重构时 IDE 无法跳转、无类型提示，建议用常量或 Symbol
最麻烦的是策略之间隐式依赖——比如「密码强度」策略本该依赖「密码字段值」，但被错误设计成只接收字符串，结果调用方传了空值，错误信息却指向「强度不足」而非「不能为空」。这类问题不会报错，但会让调试成本翻倍。
