本文介绍如何借助 jquery 的 `.data()` 方法，安全、高效地为匹配的 dom 元素批量绑定可复用的函数（如格式化方法），避免污染原生 dom 对象属性，同时保持作用域正确性和链式调用兼容性。
在原生 JavaScript 中，直接向 DOM 元素挂载函数（如 element.format = function(){...}）虽可行，但存在明显缺陷：它修改了原生元素对象，可能引发命名冲突、影响序列化、违反封装原则，且无法通过 jQuery 选择器统一管理。jQuery 提供了更优雅的替代方案——.data() 方法，它专为安全存储与元素关联的任意数据（包括函数）而设计。
✅ 推荐做法：用 .data() 绑定闭包函数
利用 .each() 遍历 jQuery 匹配集，并为每个元素通过 .data(key, value) 存储一个绑定到当前元素上下文的函数。关键在于使用闭包捕获 element 参数，确保函数内部 this 或显式引用始终指向正确的 DOM 节点：
// 为所有具有 'temp-display' 类的元素绑定 format 函数
$(".temp-display").each(function(i, element) {
$(element).data("format", function(val) {
const fTemp = val * 9 / 5 + 32;
const fDisp = Math.round((fTemp + Number.EPSILON) * 10) / 10;
element.innerText = fDisp.toString(); // 显式使用闭包变量，稳定可靠
});
});? 调用方式：简洁且可链式扩展
绑定后，可通过相同选择器获取并执行该函数：
// 为指定元素调用 format 方法
$("#WeatherObservation\.Temperature").data("format")(25); // → 显示 "77.0"
// 批量调用（需遍历）
$(".temp-display").each(function() {
const formatFn = $(this).data("format");
if (typeof formatFn === "function") {
formatFn(22); // 例如：将摄氏22°转为华氏71.6°
}
});⚠️ 注意事项：不要用 this 替代 element：在 .data() 存储的函数中，this 默认指向 window（非严格模式）或 undefined（严格模式），因此必须依赖闭包捕获的 element 变量；选择器需转义特殊字符：如 ID 含英文句点（.），jQuery 选择器中需写为 #WeatherObservation\.Temperature；避免重复绑定：多次执行 .data("format", fn) 会覆盖旧值，建议结合 .data("format") === undefined 做幂等处理；内存与清理：.data() 存储的数据随 jQuery 对象生命周期管理，DOM 移除时自动清理，无需手动 removeData()（除非显式需要）。
? 进阶建议：封装为 jQuery 插件提升复用性
若该逻辑需跨项目复用，可进一步封装为轻量插件：
$.fn.extend({
attachFormat: function() {
return this.each(function() {
const $el = $(this);
if (!$el.data("format")) {
$el.data("format", function(val) {
const fTemp = val * 9 / 5 + 32;
const fDisp = Math.round((fTemp + Number.EPSILON) * 10) / 10;
this.innerText = fDisp.toString();
}.bind(this)); // 此处 bind(this) 也可行，但闭包更直观可控
}
});
}
});
// 使用
$(".temp-display").attachFormat();
$("#WeatherObservation\.Temperature").data("format")(15);综上，.data() 不仅是存储字符串或对象的工具，更是 jQuery 生态中实现“元素级方法注入”的标准实践——它保障了作用域安全、避免原型污染、支持动态扩展，是现代 jQuery 开发中值得优先采用的模式。
