如何让jQuery的.data()方法支持传入Lambda表达式以实现链式调用？

嗨，这个需求其实有两种不错的解决办法，看你想要临时快速解决还是长期优雅复用~

无需插件的快速方案 #

因为jQuery本身并没有直接支持给.data()传函数的API，但我们可以借助.each()来绕一下，既能处理数据又不打断链式调用，代码示例如下：

$(this)
  .each(function() {
    // 先获取当前元素的data值，解密后重新存入
    const currentValue = $(this).data('value');
    $(this).data('value', System.decrypt(currentValue, key));
  })
  .css('color', '#333')
  .prop('disabled', false);

这个方法的好处是不用额外写任何扩展，直接用jQuery现有API就能实现，逻辑也很直观，适合临时场景或者项目里只需要这么一处处理的情况。

自定义插件的优雅方案 #

如果你希望项目里多处都能用上这种「给.data()传函数处理值」的写法，那写个小插件扩展一下jQuery的.data()方法就很合适，代码不长，还完全兼容原有.data()的所有用法：

// 先保存原始的.data()方法，避免覆盖后丢失原有功能
const originalData = $.fn.data;

$.fn.data = function(key, value) {
  // 当传入的value是函数时，执行自定义逻辑
  if (typeof value === 'function') {
    return this.each(function() {
      // 调用传入的函数，把当前元素的对应data值作为参数，this绑定到当前DOM元素
      const updatedValue = value.call(this, $(this).data(key));
      // 将处理后的值重新存入data
      $(this).data(key, updatedValue);
    });
  }
  // 其他情况直接调用原始的.data()方法，保证原有功能不受影响
  return originalData.apply(this, arguments);
};

写完这个插件后，你就可以完全按照你想要的方式链式调用了：

$(this)
  .data('value', (value) => System.decrypt(value, key))
  .css(...)
  .prop(...);

而且这个插件不会干扰.data()原来的任何用法，比如获取数据$(elem).data('value')、批量设置$(elem).data({key1: val1, key2: val2})这些操作都能正常工作。

备注：内容来源于stack exchange，提问作者Shtole