jquery 插件

1. 最终效果

// Shawn Khameneh
// ExtraordinaryThoughts.com
 
(function($) {
	var privateFunction = function() {
		// code here
	}
 
	var methods = {
		init: function(options) {
			return this.each(function() {
				var $this = $(this);
				var settings = $this.data('pluginName');
 
				if(typeof(settings) == 'undefined') {
 
					var defaults = {
						propertyName: 'value',
						onSomeEvent: function() {}
					}
 
					settings = $.extend({}, defaults, options);
 
					$this.data('pluginName', settings);
				} else {
					settings = $.extend({}, settings, options);
				}
 
				// run code here
 
			});
		},
		destroy: function(options) {
			return $(this).each(function() {
				var $this = $(this);
 
				$this.removeData('pluginName');
			});
		},
		val: function(options) {
			var someValue = this.eq(0).html();
 
			return someValue;
		}
	};
 
	$.fn.pluginName = function() {
		var method = arguments[0];
 
		if(methods[method]) {
			method = methods[method];
			arguments = Array.prototype.slice.call(arguments, 1);
		} else if( typeof(method) == 'object' || !method ) {
			method = methods.init;
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
			return this;
		}
 
		return method.apply(this, arguments);
 
	}
 
})(jQuery);

 

2. 基本框架

(function($) {
 
	$.fn.pluginName = function(options) {
 
		// code here
                alert("init");
		return this;
	}
  

})(jQuery);

 

短短几行代码, 就写完了一个框架, 之后你可以这样调用: $(‘#element’).pluginName() 

 

3. 多元素选择

 

(function($) {
 
	// Add the plugin to the jQuery (protected, "fn") namespace under "pluginName" as the function name.
	$.fn.pluginName = function(options) {
 
		// Return "this" (result of "each" is also "this") to allow for chaining the plugin
		return this.each(function() {
 
			// code here, reference each individual element by "this"
			// e.g. $(this).show();
			var $this = $(this);
                         ....init($this);
		});
 
	}
 
})(jQuery);

jQuery 中我们经常用 $(".class") 等类似的写法 来选择多个元素, 所以我们插件可以通过each 循环的方式来为每个元素初始化

 

4. 为插件添加共有私有方法

(function($) {
 
	// Create a private function by creating a public variable within our plugin's container.
	var privateFunction = function() {
		// code here
	}
 
	// Create an object literal for our methods
	var methods = {
		// Define individual methods within the literal
		init: function() {
 
			// Repeat over each element in selector
			// Taken from our main function and moved into each method for flexibility
			return this.each(function() {
				// Create a jQuery object to use with this individual element
				var $this = $(this);
 
				// run code here
				// e.g. privateFunction();
			});
		},
		destroy: function() {
			// Repeat over each element in selector
			return this.each(function() {
				// run code here
			});
		}
	};
 
	$.fn.pluginName = function() {
		// Grab our method, sadly if we used function(method){}, it ruins it all
		var method = arguments[0];
 
		// Check if the passed method exists
		if(methods[method]) {
 
			// If the method exists, store it for use
			// Note: I am only doing this for repetition when using "each()", later.
			method = methods[method];
 
		// If the method is not found, check if the method is an object (JSON Object) or one was not sent.
		} else if( typeof(method) == 'object' || !method ) {
 
			// If we passed parameters as the first object or no arguments, just use the "init" methods
			method = methods.init;
		} else {
 
			// Not a method and not parameters, so return an error.  Something wasn't called correctly.
			$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
			return this;
		}
 
		// Call our selected method
		// Once again, note how we move the "each()" from here to the individual methods
		return method.call(this);
 
	}
 
})(jQuery);

 

methods  中的方法为共有方法外界可以调用, privateFunction 为私有方法,外界无法触及

调用示例:

$('.className').pluginName();
$('.className').pluginName('init');
$('.className').pluginName('init', {}); // Pass object "{}" to "init" as arguments
$('.className').pluginName({}); // Pass object "{}" to "init" as arguments
 
// Call method "destroy" on each element matching ".className"
$('.className').pluginName('destroy');
$('.className').pluginName('destroy', {}); // Pass object "{}" to "destroy" as arguments
 

5. 调用插件时传递参数

(function($) {
	var methods = {
		init: function(options) {
 
			// Repeat over each element in selector
			return this.each(function() {
				var $this = $(this);
 
				// Create a default settings variable
				var defaults = {
					propertyName: 'value',
					onSomeEvent: function() {}
				}
 
				// Use extend to create settings from passed options and the defaults
				var settings = $.extend({}, defaults, options);
 
				// run code here
 
			});
		}
	};
 
	$.fn.pluginName = function() {
		var method = arguments[0];
 
		if(methods[method]) {
			method = methods[method];
 
			// Our method was sent as an argument, remove it using slice because it's not an argument for our method
			arguments = Array.prototype.slice.call(arguments, 1);
		} else if( typeof(method) == 'object' || !method ) {
			method = methods.init;
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
			return this;
		}
 
		// Use apply to sent arguments when calling our selected method
		return method.apply(this, arguments);
 
	}
 
})(jQuery);

 

6. 保存插件初始化参数

init: function(options) {
 
			// Repeat over each element in selector
			return this.each(function() {
				var $this = $(this);
 
				// Attempt to grab saved settings, if they don't exist we'll get "undefined".
				var settings = $this.data('pluginName');
 
				// If we could't grab settings, create them from defaults and passed options
				if(typeof(settings) == 'undefined') {
 
					var defaults = {
						propertyName: 'value',
						onSomeEvent: function() {}
					}
 
					settings = $.extend({}, defaults, options);
 
					// Save our newly created settings
					$this.data('pluginName', settings);
				} else {
					// We got settings, merge our passed options in with them (optional)
					settings = $.extend({}, settings, options);
 
					// If you wish to save options passed each time, add:
					// $this.data('pluginName', settings);
				}
 
				// run code here
 
			});
		},

通过这一句: $this.data('pluginName', settings); 就将参数绑定在了元素上, 之后可以通过$(element).data('pluginName') 方式来获取

 

over

内容来源:

http://extraordinarythoughts.com/2011/08/20/understanding-jquery-plugins/