jQuery插件写法

1. JQuery实际上就是一个封装操作DOM的对象。
2. JQuery插件实际上就是扩展JQuery这个对象（实例或者本身），增加用户自己的方法。

目录

• 1. 扩展JQuery本身
• 2. 扩展JQuery实例
• 3. 扩展写法
• 4. 使用插件

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>