jquery 扩展

jQuery 扩展方法

jQuery 提供了灵活的扩展机制，可以通过 $.fn 扩展实例方法，或通过 $ 扩展静态工具方法。

扩展实例方法

通过 $.fn 可以为 jQuery 对象添加新的方法，这些方法可以链式调用。

$.fn.myPlugin = function(options) {
  // 合并默认配置与用户配置
  const settings = $.extend({
    color: 'red',
    backgroundColor: 'white'
  }, options);

  // 遍历匹配的元素集合
  return this.each(function() {
    $(this).css({
      color: settings.color,
      backgroundColor: settings.backgroundColor
    });
  });
};

使用方式：

$('div').myPlugin({
  color: 'blue'
});

扩展静态方法

通过 $ 或 jQuery 可以直接扩展工具方法，这些方法不依赖于 jQuery 对象实例。

$.myUtility = function(str) {
  return str.toUpperCase();
};

使用方式：

const result = $.myUtility('hello'); // 返回 "HELLO"

最佳实践

1. 保持方法名称唯一性，避免与其他插件冲突
2. 支持链式调用时确保返回 this 或适当的 jQuery 对象
3. 提供默认配置选项并通过 $.extend 合并用户配置
4. 考虑命名空间隔离，如 $.fn.myNamespace_myPlugin

封装完整插件

完整的插件通常包含以下结构：

(function($) {
  const defaults = {
    speed: 400,
    easing: 'swing'
  };

  $.fn.slideFade = function(options) {
    const settings = $.extend({}, defaults, options);

    return this.animate({
      opacity: 'toggle',
      height: 'toggle'
    }, settings.speed, settings.easing);
  };
})(jQuery);

这种立即执行函数模式可以避免污染全局命名空间，同时确保 $ 符号在闭包内指向 jQuery。