如何编写一个简单的jQuery插件

我想用jquery创建简单的插件。 还建议我在编写jQuery插件时进行标准练习。

请大家给我一些更好的指示。

Answer 1

一个好的起始模式看起来像：

(function($){ $.fn.yourplugin = function() { }; }(jQuery)); 

Answer 2

我多年前创建的一个简单的模板，仍然很好用：

 (function($) { if (!$.myExample) { // check your plugin namespace does not already exist $.extend({ // this will allow you to add your plugin to the jQuery lib myExample: function(elm, command, args) { // keep in mind, right here you might want to do a class or data check to determine which direction this call is going // for example, upon init the plugin on an element you may add the plugin name as a class, // this way, when it's recalled, you can see it alrady has that class and might be calling a command, // thus make an if statemnt to push the process through return elm.each(function(index){ // do work to each element as its passed through // be sure to use something like // return elm.each(function(e) { dor work }); // as your final statement in order to maintain "chainability" }); } }); $.fn.extend({ // this gives the chainability functionality seen with $ funcs like: $("#eleID").css("color", "red") <--returns original element object myExample: function(command) { return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1)); } }); $.myExample.props = { // Here you can establish specific properties to your plugin, prehaps even make them "Over-writable" key1: "value", key2: "value" }; $.myExample.methods = { // Here you can establish specific methods/functions for your plguin to carry out and maintain your namespace as well key1: function(param) { /* do work */ }, key2: function(param) { /* do work */ } }; // This next part is not seen in many plugins but useful depending on what you're creating $.myExample.init = function(param) { // If you have an initialize method to apply, namespace it in here and calll on initializing your plugin var key = "value", key2 = { subKey: "value" }; /* / run any number of initializing functions here / I prefer to make my param a value that can be a / string with a possible object / the string for holding a base configuration / the object for any change in properties or base values for that config */ }; $.myExample.defaults = { // establish base properties here that can be over-written via .props, but their values should never truly change key1: "value", key2: { prop1: { subKey1: "value", subKey2: "value" }, prop2: { subKey1: "value" } }, key3: function(param) { } }; } })(jQuery); 

Answer 3

编写jQuery插件时的总结和最佳实践

 (function($){ // $('p').greenify() turns all text in p elements green. $.fn.greenify = function() { this.css( "color", "green" ); // set text color return this; // for chaining; }; })(jQuery);