jQuery插件扩展

2024年2月29日 124次阅读 来源: 敏小静

**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>
    原文作者：敏小静
    原文地址: https://segmentfault.com/a/1190000016067351
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞