added basic and extend

weinitz · Mar 14, 2012 · e53a5be · e53a5be
1 parent 3e7222d
commit e53a5be
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 0 deletions.
diff --git a/jquery-plugin-patterns/basic.html b/jquery-plugin-patterns/basic.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>JavaScript Patterns</title>
+		<meta charset="utf-8">
+	</head>
+	<body>
+		<script>
+		/*!
+		 * jQuery basic plugin boilerplate
+		 */
+
+		/*
+		The most basic form of jQuery plugin
+		This is great for compactness
+		*/
+
+		$.fn.myPluginName = function() {
+		    // your plugin logic
+		};
+
+
+		/*
+		A better foundation to build on
+		Here, we’ve wrapped our plugin logic in an anonymous function. To ensure that our use of the $ sign as a shorthand creates no conflicts between jQuery and other JavaScript libraries, we simply pass it to this closure, which maps it to the dollar sign, thus ensuring that it can’t be affected by anything outside of its scope of execution.
+		*/
+
+		(function( $ ){
+		  	$.fn.myPluginName = function() {
+		    	// your plugin logic
+		  	};
+		})( jQuery );
+
+
+		// References
+		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
+		</script>
+	</body>
+</html>
diff --git a/jquery-plugin-patterns/extend.html b/jquery-plugin-patterns/extend.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>JavaScript Patterns</title>
+		<meta charset="utf-8">
+	</head>
+	<body>
+		<script>
+		/*!
+		 * jQuery extend-based plugin boilerplate
+		 * Author: @oscargodson
+		 * Further changes: @timmywil
+		 * Licensed under the MIT license
+		 */
+
+		/*
+		As you'll notice below, we're making use of $.fn.extend to create our plugin rather
+		than opting for $.fn.pluginname. This type of structure may be useful if you need
+		to add a relatively large number of methods to your plugin. There are however alternatives
+		to this that may be better suited, including Alex Sexton's prototypal inheritence pattern 
+		which is also included in this repo. 
+		*/
+
+
+		//the semi colon before function invocation is a safety net against concatenated 
+		//scripts and/or other plugins which may not be closed properly.
+		;(function($){
+		    $.fn.extend({
+		        pluginname: function( options ) {
+
+		            this.defaultOptions = {};
+
+		            var settings = $.extend({}, this.defaultOptions, options);
+
+		            return this.each(function() {
+
+		                var $this = $(this);
+
+		            });
+
+		        }
+
+		    });
+
+		})(jQuery);
+
+
+		// References
+		// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
+		</script>
+	</body>
+</html>