自己写插件。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参数合并。留下的属性就放在settingsreturn 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);