jquery插件通过挂载方法到$.fn实现原型继承,支持链式调用;复杂插件宜封装为独立构造函数并桥接至jquery实例;多插件可基于基类按需继承与重写;需注意命名规范、深合并配置及ie8兼容性处理。

实现基于原型继承的插件扩展模式,核心是把新功能挂载到 jQuery.fn(即 jQuery.prototype)上,让所有 jQuery 实例自动继承该方法,支持链式调用。
挂载到 jQuery.fn 上
jQuery 插件的本质就是向 jQuery.fn 添加方法。所有通过 $() 创建的实例,其原型链都会指向 jQuery.fn,因此新增方法可被所有实例共享。
- 直接赋值:
$.fn.myPlugin = function() { ... } - 确保返回
this,维持链式调用能力 - 避免覆盖已有方法,可用
if (!$.fn.myPlugin)做存在性检查
封装为可配置的构造函数
复杂插件建议封装成独立构造函数,再桥接到 jQuery 实例,便于复用和维护。
- 定义构造函数(如
MyChart),把核心逻辑、默认配置、渲染方法写在它的prototype上 - 在
$.fn.myChart中初始化实例:return this.each(function() { new MyChart(this, options); }); - 这样既保持 jQuery 的 DOM 遍历习惯,又隔离了插件内部状态
利用原型链做按需继承与重写
多个相似插件(如折线图、柱状图)可共用基类配置,再差异化覆盖。
- 基类(
BaseChart)定义通用行为:尺寸适配、主题色映射、刷新周期等,挂到BaseChart.prototype - 子类(
LineChart)用Object.create(BaseChart.prototype)设置原型,不执行父类构造函数 - 子类只重写需要差异化的部分,比如
render()或tooltip.formatter,其余自动继承
兼容性与命名规范
保证插件健壮易用,需注意基础细节。
- 插件名避免冲突,推荐加前缀(如
$.fn.mylibTooltip) - 支持传入对象参数,内部用
$.extend(true, {}, defaults, options)深合并配置 - IE8 及以下不支持
Object.create,可自行 polyfill 或改用临时构造函数方式











