font-size:16px; float:left;

#btns {float:right; margin-bottom:10px;}

footer {

text-align:center;

margin-top:2em;

margin-bottom:1em;

}

<title>JavaScript pattern and antipattern collection</title>

<h1>JavaScript Pattern Collection</h1>

<div id="btns">

<span class='st_twitter_hcount' displayText='Tweet'></span><span class='st_google_hcount' displayText='Google'></span><span class='st_facebook_hcount' displayText='Facebook'></span>

</div>

<section>

<h2>Function Patterns</h2>

<h3>API Patterns</h3>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/callback.html" target="_blank">Callback patterns</a> - when you pass function A to function B as a parameter, function A is a callback function</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/configuration-objects.html" target="_blank">Configuration objects </a>- keep control of function arguments and makes it easily configurable</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/returning-functions.html" target="_blank">Returning functions </a>- one function returns another function or create another function on-demand</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/currying.html" target="_blank">Currying</a> - used to create new functions dynamically by partially applying a set of arguments</li>

</ul>

<h3>Initialization patterns</h3>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/immediate-functions.html" target="_blank">Immediate functions</a> - syntax that enables function execution as soon as it is defined</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/immediate-object-initialization.html" target="_blank">Immediate object initialization</a> - this pattern is mainly suitable for one-off tasks</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/init-time-branching.html" target="_blank">Init-time branching</a> - branch code once during initlization initialization</li>

</ul>

<h3>Performance patterns</h3>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/memoization.html">Memoization</a> - use function properties to avoid repeated computation</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/function-patterns/self-defining-functions.html">Self-defining functions</a> - self-overwrite with new bodies to do less work from the second invocation and after</li>

</ul>

</section>

<section>

<h2>jQuery Patterns</h2>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/requery.html" target="_blank">requery</a> - avoid requery by using jQuery chaining</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/append.html" target="_blank">append</a> - use string concatenate and set innerHTML</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/data.html" target="_blank">data</a> - pattern and antipattern of using data</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/context-and-find.html" target="_blank">context and find</a> - use find over context</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/detach.html" target="_blank">detach</a> - take element off the DOM while manipulating them</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/event-delegation.html" target="_blank">event delegation</a> - event delegation pattern and antipattern</li>

</ul>

<h3>Selector</h3>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/left-and-right.html" target="_blank">left and right</a> - specific on the right, light on the left</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/decending-from-id.html" target="_blank">decending from id</a> - be more specific</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/universal-selector.html" target="_blank">universal selector</a> - use of universal selector</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/specific-when-needed.html" target="_blank">be specific when needed</a> - be specific only when needed</li>

</ul>

</section>

<section>

<h2>Design Patterns</h2>

<h3>Creational</h3>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/builder.html" target="_blank">Builder</a> - constructs complex objects by separating construction and representation</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/factory.html" target="_blank">Factory method</a> - creates objects without specifying the exact class to create</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/singleton.html" target="_blank">Singleton</a> - restricts object creation for a class to only one instance</li>

</ul>

<h3>Structural</h3>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/decorator.html" target="_blank">Decorator</a> - dynamically adds/overrides behaviour in an existing method of an object</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/facade.html" target="_blank">Facade</a> - provides a simplified interface to a large body of code</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/proxy.html" target="_blank">Proxy</a> - provides a placeholder for another object to control access, reduce cost, and reduce complexity</li>

</ul>

<h3>Behavioral</h3>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/chain-of-responsibility.html" target="_blank">Chain of responsibility</a> - delegates commands to a chain of processing objects</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/command.html" target="_blank">Command</a> - creates objects which encapsulate actions and parameters</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/iterator.html" target="_blank">Iterator</a> - implements a specialized language</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/mediator.html" target="_blank">Mediator</a> - allows loose coupling between classes by being the only class that has detailed knowledge of their methods</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/observer.html" target="_blank">Observer</a> - is a publish/subscribe pattern which allows a number of observer objects to see an event</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/strategy.html" target="_blank">Strategy</a> - allows one of a family of algorithms to be selected on-the-fly at runtime</li>

</ul>

</section>

<section>

<h2>General Patterns</h2>

<ul>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/single-var-pattern.html" target="_blank">single var pattern</a> - use one var statement and declare multiple variables</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/globals.html" target="_blank">globals</a> - problem with globals</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/conditionals.html" target="_blank">conditionals</a> - pattern and antipattern of using if else</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/hoisting.html" target="_blank">hoisting</a> - var statements anywhere in a function act as if the variables were declared at the top of the function</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/for-loops.html" target="_blank">for loops</a> - optimized for loops</li>

<li><a href="https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/for-in-loops.html" target="_blank">for-in loops</a> - optimized for-in loops</li>

</ul>

</section>

by <a href="http://twitter.com/#!/shichuan">@shichuan</a>

<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'44fc3536-fd12-4c07-970d-6654da9a2d6c'});</script>