jquery 插件简明教程

Posted by huangqing on March 8, 2017

jquery 插件简明教程

basic-plugin-creation

基本的插件编写

$.fn.greenify=function(){
    this.css("color","green");
}

$("a").greenify();

链式调用

$.fn.greenify=function(){
    this.css("color","green");
    return this;
}

$("a").greenify().addClass("greenified");

保护$操作符并添加作用域

(function ( $ ) {
 
    var shade = "#556b2f";
 
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
 
}( jQuery ));
(function ( $ ) {
    //私有变量
    var shade = "#556b2f";
 
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
 
}( jQuery ));

使用 each() Method

$.fn.myNewPlugin = function() {
 
    return this.each(function() {
        // Do something to each element here.
    });
 
};

接收参数

(function ( $ ) {
 
    $.fn.greenify = function( options ) {
 
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );
 
        // Greenify the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
 
    };
 
}( jQuery ));

整合一下

(function( $ ) {
 
    $.fn.showLinkLocation = function() {
 
        this.filter( "a" ).each(function() {
            var link = $( this );
            link.append( " (" + link.attr( "href" ) + ")" );
        });
 
        return this;
 
    };
 
}( jQuery ));
 
// Usage example:
$( "a" ).showLinkLocation();

提供默认插件设置公共访问

// Plugin definition.
$.fn.hilight = function( options ) {
 
    // Extend our default options with those provided.
    // Note that the first argument to extend is an empty
    // object – this is to keep from overriding our "defaults" object.
    var opts = $.extend( {}, $.fn.hilight.defaults, options );
 
    // Our plugin implementation code goes here.
 
};
 
// Plugin defaults – added as a property on our plugin function.
$.fn.hilight.defaults = {
    foreground: "red",
    background: "yellow"
};

// This needs only be called once and does not
// have to be called from within a "ready" block
$.fn.hilight.defaults.foreground = "blue";

提供二次函数作为适用的公共访问

// Plugin definition.
$.fn.hilight = function( options ) {
 
    // Iterate and reformat each matched element.
    return this.each(function() {
 
        var elem = $( this );
 
        // ...
 
        var markup = elem.html();
 
        // Call our format function.
        markup = $.fn.hilight.format( markup );
 
        elem.html( markup );
 
    });
 
};
 
// Define our format function.
$.fn.hilight.format = function( txt ) {
    return "<strong>" + txt + "</strong>";
};

保持私有函数

// Create closure.
(function( $ ) {
 
    // Plugin definition.
    $.fn.hilight = function( options ) {
        debug( this );
        // ...
    };
 
    // Private function for debugging.
    function debug( obj ) {
        if ( window.console && window.console.log ) {
            window.console.log( "hilight selection count: " + obj.length );
        }
    };
 
    // ...
 
// End of closure.
 
})( jQuery );

支持回调函数

var defaults = {
 
    // We define an empty anonymous function so that
    // we don't need to check its existence before calling it.
    onImageShow : function() {},
 
    // ... rest of settings ...
 
};
 
// Later on in the plugin:
 
nextButton.on( "click", showNextImage );
 
function showNextImage() {
 
    // Returns reference to the next image node
    var image = getNextImage();
 
    // Stuff to show the image here...
 
    // Here's the callback:
    settings.onImageShow.call( image );
}

demo

(function ($) {
    // 在插件容器内,创造一个公共变量来构建一个私有方法
    var privateFunction = function () {
        // 执行代码
    }

    // 通过字面量创造一个对象,存储我们需要的共有方法
    var methods = {
        // 在字面量对象中定义每个单独的方法
        init: function (options) {
            // 在每个元素上执行方法:返回“this”(函数each()的返回值也是this),以便进行链式调用。
            // 为了更好的灵活性,对来自主函数,并进入每个方法中的选择器其中的每个单独的元素都执行代码
            return this.each(function () {

                // 为每个独立的元素创建一个jQuery对象
                var $this = $(this);

                // 尝试去获取settings,如果不存在,则返回“undefined”
                var settings = $this.data('pluginName');

                // 如果获取settings失败,则根据options和default创建它
                if (typeof (settings) == 'undefined') {

                    // 创建一个默认设置对象
                    var defaults = {
                        propertyName: 'value',
                        onSomeEvent: function () {}
                    };

                    // 使用extend方法从options和defaults对象中构造出一个settings对象
                    settings = $.extend({}, defaults, options);

                    // 数据持久化:保存我们新创建的settings
                    $this.data('pluginName', settings);
                } else {
                    // 如果我们获取了settings,则将它和options进行合并(这不是必须的,你可以选择不这样做)
                    settings = $.extend({}, settings, options);

                    // 如果你想每次都保存options,可以添加下面代码:
                    // $this.data('pluginName', settings);
                }

                // 执行代码

            });
        },
        destroy: function (options) {
            // 对选择器每个元素都执行方法
            return $(this).each(function () {
                var $this = $(this);

                // 执行代码

                // 删除元素对应的数据
                $this.removeData('pluginName');
            });
        },
        val: function (options) {
            // 这里的代码通过.eq(0)来获取选择器中的第一个元素的,我们或获取它的HTML内容作为我们的返回值
            var someValue = this.eq(0).html();

            // 返回值
            return someValue;
        }
    };

    //jquery插件:向jQuery中被保护的“fn”命名空间中添加你的插件代码,用“pluginName”作为插件的函数名称
    $.fn.pluginName = function () {
        // 获取我们的方法,遗憾的是,如果我们用function(method){}来实现,这样会毁掉一切的
        var method = arguments[0];

        if (methods[method]) {

            // 如果方法存在,存储起来以便使用
            // 注意:我这样做是为了等下更方便地使用each()
            method = methods[method];
            // 方法是作为参数传入的,把它从参数列表中删除,因为调用方法时并不需要它
            arguments = Array.prototype.slice.call(arguments, 1);

            // 如果方法不存在,检验对象是否为一个对象(JSON对象)或者method方法没有被传入    
        } else if (typeof (method) == 'object' || !method) {
            // 如果我们传入的是一个对象参数,或者根本没有参数,init方法会被调用
            method = methods.init;

        } else {
            // 如果方法不存在或者参数没传入,则报出错误。需要调用的方法没有被正确调用
            $.error('Method ' + method + ' does not exist on jQuery.pluginName');
            return this;
        }
        // 用apply方法来调用我们的方法并传入参数
        // 调用选中的方法
        // 再一次注意是如何将each()从这里转移到每个单独的方法上的
        return method.apply(this, arguments);

    }

    // 局部作用域中使用$来引用jQuery
})(jQuery);