jQuery插件开发模式（组件封装）

在项目开发过程中，由于jQuery有较好的实用性，所以都用得非常多，而在项目开发时，某个功能（代码）使用很频繁被多个地方调用，那么就可以借助jQuery插件提供的组件封装方法高，来封装一些使用频率较的功能。

JQuery中组件开发方式主要有两种：

通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法

还有 $.widget()，但是要借助 jQuery UI才行，而 jQuery UI又要借助 jQuery才行。

一、      $.extend()方法可以 jQuery的命名空间，或者是jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时 直接通过$符号调用 （$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。

例如：

(function($){
    $.extend({
        Alert: function(str) {
            if(!str) return;
            alert(str)
            console.log(str);
        }
    })
})(jQuery);
$.Alert(); //直接调用
$.Alert('Hello'); //调用时带参

注：但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用下面第二种开发方式。

二、$.fn:

简单的讲： 就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

基本语法：

$.fn.pluginName = function() {
    //要执行操作。。。
}

在插件名字定义的这个函数内部，   this指代的是我们在调用该插件时，用jQuery选择器选中的元素  ，一般是一个jQuery类型的集合。比如$('div')返回的是页面上所有div标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。

例如：

(function($){
    $.fn.bgColor = function(cor){
     //这里的$(this)就是选择的那个元素
    $(this).css('background-color', cor);
    }
})(jQuery)
$('div').bgColor('red'); //调用
(function($){
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
    this.$element = ele,
    this.defaults = {
        'color': 'red',
        'fontSize': '12px',
        'textDecoration':'none'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
            'textDecoration': this.options.textDecoration
        });
    }
}
//在插件中使用Beautifier对象
$.fn.mupiao = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}
})(jQuery)
$('div').mupiao( {'color': 'green', 'fontSize': '18px', 'textDecoration':'none'}); //调用

所以在上面插件代码中，我们在this身上调用jQuery的css()方法，也就相当于在调用 $('div').css()， 理解this在这个地方的含义很重要。这样才知道为什么可以直接调用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用。