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

jQuery中组件的开发方式主要有三种：

  1. 通过$.extend()来扩展jQuery
  2. 通过$.fn 向jQuery添加新的方法
  3. 通过$.widget() 应用jQuery UI的部件工厂方式创建

这里只说前两种，因为 $.widget()要借助 jQuery UI才行，而 jQuery UI又要借助 jQuery才行。

注：在封装调用时，要先引入jquery.js文件哦！

一、 $.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选择器选中的元素

实例1：

// 组件封装
(function($){
    $.fn.bgColor = function(cor){
         //这里的$(this)就是选择的那个元素
        $(this).css('background-color', cor);
    }
})(jQuery);

// 组件调用
$('div').bgColor('red');

实例2：

// 组件封装
(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重新包装才能调用。