jQuery外掛擴充套件

敏小靜發表於2018-08-19
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>

相關文章