jQuery插件擴展

**JQuery實際上就是一個封裝操做DOM的對象。
JQuery插件實際上就是擴展JQuery這個對象（實例或者自己），增長用戶本身的方法。**
1. 擴展JQuery自己
JQuery提供.extend()方法來對自身進行擴展。

$.extend( { say : function() {
    return "roddy";
} } );

// 使用
console.log( $.say() );

// 輸出：
// "roddy"

對JQuery自身擴展一個.say()方法。

2. 擴展JQuery實例
JQuery提供.fn.extend()方法來擴展JQuery實例對象

$.fn.extend( { changeColor : function() {
    $( this ).style.color = "red";
} } );

// 使用
$( "span" ).changeColor();

3. 擴展寫法

( function( $ ) {

    // 插件默認配置
    var defaultOptions = {
        property1 : "value1",
        property2 : "value2",
        ...
    };

    // 插件構造函數
    function userPlug( element, options ) {
        // jQuery實例對象
        this.$ele = $( element );
        // 合併用戶配置和默認配置
        this.options = $.extend( defatuleOptions, options, true );
        // 插件初始化
        this.init( this );
    }

    // 插件原型
    userPlug.prototype = {
        // 插件初始化函數
        init : function( self ) {
            // 插件的主要實現代碼
            // 能夠經過self.options進行配置或者修改
            // 而後給self.$ele綁定事件處理函數等
        }
    }

    // 綁定插件
    $.fn.userplug = function( options ) {
        return this.each( function() {
            if( !$.data( this, 'userplug' ) ) {
                $.data( this, 'userplug', new userPlug( this, options ) );
            }
        } );
    }
} )( window.jQuery );

4. 使用插件

<script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="userPlug.js"></script>
<script> $( "div" ).userplug( [options] ); </script>