自己写插件。jQuery插件开发模式

参考这个http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html#home

下面是我理解的：

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用

但无法用到选择器，来关联到这个插件上。不知道是哪个元素应该用。那个元素怎么用，只能是简单的函数定义再引用。

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');

}

$("a").myPlugin({})

但是这只是对所有的一个集合的元素处理。不能单个的处理那个元素的那个属性，也不能自己传参数来分别处理。

首先了解点extend的另一个用法

//用extend来合并。有的第二个覆盖第一个。没有的留下。
       var settings = { validate: false, limit: 5, name: "foo" };
       var options = { validate: true, name: "bar" };
       jQuery.extend(settings, options);
       settings == { validate: true, limit: 5, name: "bar" }

下面就可以通过参数来自定义颜色。

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options); //options时传来的参数，和原来定义的default参数合并。留下的属性就放在settings    

    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize

      });

}

$('a').myPlugin({
    'color': '#2C9929'
});   });

但是。你用  $.extend(defaults,options )时初始的defaults和options合并后内容就变了，如果接下来你还想用初始时的默认值的话就不行了。

所以可以给这个$.extend(defaults,options)再第一个加一个空的参数，就能保证不改变defaults里的内容。这样$.extend({},defaults,options)

上面那样可能需要很多的$.fn.myPlugin =function(){}不同的插件名里面在定义变量函数，不够整洁，我们希望提高代码的复用性，用面向对象的方法，属性和函数分开写。然后再定义插件的时候声明一个对象来使用这些属性和方法。

//定义Beautifier的构造函数里面有他的属性
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();

}
}

、

为了不会污染全局命名空间，同时不会和别的代码冲突。你可以用用一个匿名函数包住他，并且为了避免之前有没有结束的；导致出错。你可以在匿名函数之前再加一个；为了避免之前的document和window。undefined被改变了不是系统中的那个值了。你可以定义一下

最后就变成了

;(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    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();
    }
})(jQuery, window, document);