jquery 插件开发

一、$.extend()  这种方式用来定义一些辅助方法是比较方便的

$.extend({
        sayHello:function(name){
        console.log('Hello：'+name);
        }
    });

$.sayHello("张三");//调用

二、$.fn

$.fn.myPlugin=function(){
    //在这里面,this指的是用jQuery选中的元素
    //例如 :$('a'),则this=$('a')
    this.css('color','red');
    this.each(function(){
        $(this).append(': '+$(this).attr('href'));
    });
}
        
    //支持链式调用
    $.fn.myPlugin = function() {
        //在这里面,this指的是用jQuery选中的元素
        this.css('color', 'red');
        return this.each(function() {
            //对每个元素进行操作
            $(this).append(' ' + $(this).attr('href'));
        })
    }  


     //传递参数
    $.fn.myPlugin = function(options) {
        var defaults = {
            'color': 'red',
            'fontSize': '12px'
        };
        var settings = $.extend(defaults, options);
        return this.css({
            'color': settings.color,
            'fontSize': settings.fontSize
        });
    } 
    //保护默认参数 的 方法 
    $.fn.myPlugin = function(options) {
        var defaults = {
            'color': 'red',
            'fontSize': '12px'
        };
        var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
        return this.css({
            'color': settings.color,
            'fontSize': settings.fontSize
        });
    }  
    //面向对象+用自调用匿名函数包裹你的代码
    //定义Beautifier的构造函数
    (function() {
        var Beautifier = function(ele, opt) {
            this.$element = ele,
            this.defaults = {
                'color': 'red',
                'fontSize': '12px',
                'textDecoration':'none'
            },
            this.options = $.extend({}, this.defaults, opt)
        }
        //定义Beautifier的方法
        Beautifier.prototype = {
            beautify: function() {
                return this.$element.css({
                    'color': this.options.color,
                    'fontSize': this.options.fontSize,
                    'textDecoration': this.options.textDecoration
                });
            }
        }
        //在插件中使用Beautifier对象
        $.fn.myPlugin = function(options) {
            //创建Beautifier的实体
            var beautifier = new Beautifier(this, options);
            //调用其方法
            return beautifier.beautify();
        }
    })();