$.fn.extend和$.extend的理解

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/51533769

引言

项目也写了几个了，自己的jQuery插件也是来来回回优化了无数次，别人的轮子拿来用也是前前后后理解了无数次。比较之下，觉得自己的轮子貌似根本称不上是插件···顶多就一个全局方法···
怪不得阿里面试的时候，那个13年前端生涯的大叔看到我的‘plug in’一脸嫌弃···“你这是插件？！”
【大写的尴尬】真是搞不懂，我是吃了多少熊心豹子胆，就这水平也敢去敲马云粑粑的门····
言归正转，jQuery插件，吼吼，除了基于jQuery，咱们得plug in!!!好吗···
这里姑且记录两种plug in的方法
一、添加静态方法
二、在原型链上拓展方法
以下依次讲解

---

$.extend

没错，这就是jQuery自带的拓展方法
$.extend({funcName:function(){}})==$.funcName=function(){}
直接将名为funcName的方法添加到jQuery命名空间，而不是jQuery原型链上。
在调用时，我们也需要通过$或jQuery来调用，而不是直接调用（隶属于window命名空间的方法才能直接调用）。
来看看例子：
html

<div class="testButton">点我</div>

jQuery

    (function ($) {
            $.tooltip = function( options ) {
                console.log('I`m tooltip');
            };
            $('.testButton').click(function(){
                $.tooltip()
            });

    })(jQuery)

当我点击按钮

在我们写插件的时候可以利用extend来更新参数。
what?更新参数？
对呀，我们可以为插件设置默认参数，通过插件调用的传入的参数就不再需要写冗长的一堆，只需要写自己特别的参数就行了。
在参数内部
this._oConfig = $.extend(defaults, _aoConfig);
这个操作就可以将defaults, _aoConfig合并，并去重，再赋值给this._oConfig。

---

$.fn.extend

我们知道fn===prototype

所以我们通过$.fn.extend去拓展方法的话是会将方法添加到原型链上的。

    (function ($) {

            $.fn.tooltip = function( options ) {
                console.log('I`m tooltip');
            };
            $('.testButton').click(function(){
                $(this).tooltip()
            });

    })(jQuery)

点击按钮

怎么说呢，在创建一个jQuery实例时，这个实例就会拥有所有原型链上的方法。所以我们可以直接在$(this)上调用。