jquery插件开发核心概念

带着问题开始

经常看到fa代码里有$("#table").bootstrapTable()
这个bootstrapTable函数是bootstrap-table 这个jquery插件的能力，是一个jquery对象为什么就具备了这个bootstrap-table的能力呢？是什么时机赋予这个能力？
jquery插件如何注入能力

输入图片说明
jquery插件其能力注入到jquery原型对象里，由于jquery对象自然也具备了jquery原型对象里的能力。
那如何注入呢？
jQuery.extend和jQuery.fn.extend

在jQuery插件开发中，jQuery.extend和jQuery.fn.extend有着不同的用途和效果。
jQuery.extend

jQuery.extend的原理示意代码，主要就是在jq这个函数对象上增加其他的属性或方法。增加的这些，使用时，是通过jquery.XX来使用。就是类似java里某个类的静态方法的调用方式

function jquery(){}
jquery.add = function(){console.log(33);}
jquery.add();

以上是简化后的示意原理，但是jQuery.extend({...})其实做的就是在jquery的函数对象上增加extend({...})里的属性或方法。
jQuery.fn.extend

jQuery.fn.extend的原理示意代码，主要就是在jq这个原型对象上增加其他的属性或方法。增加的这些，使用时，是通过jquery对象（即$()产生的对象）来调用。

function jquery(){}
jquery.fn = jquery.prototype;
jquery.fn.add = function(){console.log(44);}
var b = new jquery();
b.add();

以上是简化后的示意原理，但是jQuery.fn.extend({...})其实做的就是在jquery的原型对象上增加extend({...})里的属性或方法。

jquery里 $('XX') 其实底层就是new jquery() 创建了一个对象。jQuery.fn.extend({...})实现了扩展后，这个创建出来的对象自动就具备了扩展的能力。例如$('XX').bootstrapTable(), 这个bootstrapTable()就是jq插件 往jquery的原型对象上注入进来的能力。