本文介绍一种可扩展的 javascript 布局匹配算法，通过加权差异计算（支持数值差、比例偏差等自定义策略）精准筛选最贴近用户评分的布局，并强制满足零值字段约束条件。
本文介绍一种可扩展的 javascript 布局匹配算法，通过加权差异计算（支持数值差、比例偏差等自定义策略）精准筛选最贴近用户评分的布局，并强制满足零值字段约束条件。
在金融或交易类 Web 应用中，用户常需从多种预设仪表盘布局中选择最契合其工作流的方案。当布局由多个功能模块（如行情列表、持仓、图表等）的启用强度（0–5 分）构成，而用户又提供了个性化评分时，简单的“完全匹配”几乎不可行——我们需要一套语义感知、可配置、带约束的相似度评估机制。
核心思路：带约束的加权曼哈顿距离
我们采用改进的加权曼哈顿距离（Weighted Manhattan Distance） 作为布局相似度指标：
- 对每个模块字段（如
portfolio、chart），计算布局值与用户评分的绝对差值； - 若用户评分为
0，则该字段成为硬性过滤条件：仅保留布局中对应值也为0的候选项； - 支持为不同字段配置权重（例如
chart权重为 2.0，因其对用户体验影响更大）； - 最终得分 = Σ(权重 × |布局值 − 用户评分|)，得分最低者即为最优匹配。
以下为完整实现：
// 用户偏好（0 表示该模块必须禁用）
const userScores = {
watchList: 3,
instrumentDetail: 5,
portfolio: 2,
orders: 3,
transactions: 4,
chart: 5,
Mazaneh: 0, // ← 硬性约束：只接受 Mazaneh === 0 的布局
};
// 字段权重配置（可按业务重要性调整）
const fieldWeights: Record<string, number> = {
watchList: 1.0,
instrumentDetail: 1.5,
portfolio: 2.0,
orders: 1.0,
transactions: 1.2,
chart: 2.5,
Mazaneh: 3.0, // 零值约束字段给予高权重，强化过滤优先级
};
// 计算单个布局与用户的加权差异（越小越优）
function calculateDeviation(layoutOptions: Record<string, number>, userPrefs: typeof userScores): number {
let totalDeviation = 0;
for (const key in userPrefs) {
const userVal = userPrefs[key as keyof typeof userPrefs];
const layoutVal = layoutOptions[key as keyof typeof layoutOptions];
// ✅ 硬性约束：用户设为 0 → 布局值必须为 0，否则直接淘汰（返回 Infinity）
if (userVal === 0 && layoutVal !== 0) {
return Infinity;
}
// 计算加权绝对差
const diff = Math.abs(layoutVal - userVal);
totalDeviation += (fieldWeights[key] || 1.0) * diff;
}
return totalDeviation;
}
// 在布局列表中查找最优匹配
function findBestLayout(layouts: Array<{ name: string; options: Record<string, number> }>, userPrefs: typeof userScores) {
let bestLayout = null;
let minDeviation = Infinity;
for (const layout of layouts) {
const deviation = calculateDeviation(layout.options, userPrefs);
if (deviation < minDeviation) {
minDeviation = deviation;
bestLayout = layout;
}
}
return bestLayout ? { layout: bestLayout, score: minDeviation } : null;
}
// 使用示例
const result = findBestLayout(randomLayouts, userScores);
if (result) {
console.log(`✅ 推荐布局：${result.layout.name}（差异分：${result.score.toFixed(2)}）`);
} else {
console.warn('⚠️ 未找到满足所有约束（如 Mazaneh=0）的布局');
}关键设计说明与注意事项
-
零值即约束：
Mazaneh: 0不代表“不关心”，而是明确要求该模块必须关闭。算法通过return Infinity实现快速剪枝，确保结果 100% 满足。 -
权重驱动业务逻辑：
chart和portfolio权重更高，使算法更倾向保留用户重视的模块精度，即使其他次要字段略有偏差。 -
可扩展性保障：
- 新增模块？只需在
userScores、fieldWeights中补充字段，无需修改核心逻辑； - 替换距离函数？将
Math.abs()替换为customDeviations.numericRatio等即可支持比例型比较（如字体大小缩放比）； - 支持模糊匹配？可引入阈值
if (deviation 返回 Top-K 候选。
- 新增模块？只需在
-
性能提示：20 个布局的线性扫描完全无压力；若扩展至千级布局，建议预建索引（如按
Mazaneh值分桶）进一步优化。
总结：本方案超越了朴素的“逐字段相等判断”，以数学化、可配置的距离模型统一处理精确约束（零值）与柔性匹配（数值接近），既保证结果可靠性，又为未来业务演进预留充足弹性。实际部署时，建议搭配 A/B 测试验证权重配置合理性，并将用户最终采纳行为反哺权重调优。
