$.extend()与$.fn.extend()区别

/****************************************
标签： JQuery 函数扩展
参考：博客园文章
时间：2016-05-30
浏览器：chrome| firefox 
编辑器：WebStrom
****************************************/
一、写在前面的话
昨天通过微信加入了“先行者计划”这个活动，感觉很有意义，之前的迷茫似乎也找到了方向。我清楚的意识到，想要技术过硬，就要通过扎实的理论基础和大量的实践来获得。我的前端学习也有一段时间了，但是感觉还是没有达到自己理想的状态，看到一些功能觉得很简单，却不敢动手去敲，一敲就出错，各种粗心大意，基础不扎实。所以，希望自己能在这个平台的监督下，在大家的互相学习和帮助下，形成一个良好的学习习惯，坚持学习，坚持总结，坚持分享交流。
二、$.extend()与$.fn.extend()区别
目前公司做的项目是SPA（Single Page Application）项目，里面写的东西我还看不太懂，暂时处于帮别人修复一些简单的bug的阶段。今天在学习其他同事之前写的代码的时候，看到了一些预定义的方法，产生了一些疑惑，我通过上博客学习，基本理清楚了，下面分享给大家。
首先，我看到了这样一种用法：

$.extend({
     foo:function(){...}
     bar:function(param){...}
});

这个方法写在一个单独的文件中，通过$.foo();直接调用方法。
其次，我看到了这样一种用法：

(function($){
       $.fn.pluginName=function(opt,callback){


            }
       })
})(JQuery);

这个方法写在一个初始化页面的文件中，直接调用。

看到这里我就比较疑惑了，都是对JQuery函数的扩展，怎么有两种方式出来了？其实之前也有了解过，但是了解的不清楚，所以印象不是很深刻。于是我就立马百度并且认真学习总结了以下内容（含参考）。
1.类级别的插件开发

        1.1 添加一个新的全局函数 

JQuery.foo=function(){...};

        1.2 添加多个新的全局函数
           JQuery.foo=function(){...};
           JQuery.bar=function(param){...};
           调用：JQuery.foo();JQuery.bar();或者$.foo(),$.bar('param');

        1.3使用JQuery.extend(object);（本项目用到）

JQuery.extend({
       foo:function(){...}
       bar:function(param){...}
});

  1.4使用命名空间

JQuery.myPlugin={


        foo:function(){...}
        bar:function(param){...}
};

调用:$.myPlugin.foo();$.myPlugin.bar('param');

2.对象级别的插件开发(在JQ对象上可以调用--在JQ这个类的原型上添加方法)

在JQ源码中，是这样写的：
--------------------------------------------------
jQuery.fn = jQuery.prototype ={ 
　　　init: function( selector, context ){//....　 
　　　//...... 
}; 
--------------------------------------------------

方式一：

(function($){
    $.fn.extend({
    pluginName:function(opt,callback){


    }
})
})(JQuery);

方式二：

(function($){
    $.fn.pluginName=function(opt,callback){
    //（本项目用到）
    }
})
})(JQuery);

$.fn.hilight=function(){};$('#myDiv').hilight();

---------接收参数的插件-----------

// plugin definition 
$.fn.hilight = function(options) { 
var defaults = { 
foreground: 'red', 
background: 'yellow' 
}; 
// Extend our default options with those provided. 
var opts = $.extend(defaults, options); 
// Our plugin implementation code goes here. 
}; 
我们的插件可以这样被调用： 
$('#myDiv').hilight({ 
foreground: 'blue' 
});

综上所述，我觉得主要理解两点就清楚了。
1.jQuery.extend(object);为扩展jQuery类本身，为类添加新的方法，我们将这类方法看成是静态方法，可以直接调用。
2.$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery每一个实例对象有效。$对象可以通过“.”的方式调用这些方法及属性。

三、结束语
1.第一次写笔记，写的不是很好，请大家见谅。希望大家能批评指正，谢谢。
2.这里的编辑器插入代码不是很好用，不能自动排版，求教一下，哪位大神是否有能更好排版的写笔记的方法。