edit-article
Home
Up
Delete
Article Name:
Article Description:
LIST of best practices for developing with javascript, by __ @w3c -
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">javascript best practices</h1> <h2>WHAT</h2> <ol> <li>] a collection of best practices from the W3C</li> </ol> <h2>[WHY]</h2> <ol> <li>]</li> </ol> <h2>[WHEN]</h2> <ol> <li>]</li> </ol> <h2>[WHERE]</h2> <ol> <li><strong>] READ THE FULL ARTICLE</strong></li> <ol> <li>] <a href="http://www.w3.org/wiki/JavaScript_best_practices" target="_blank">http://www.w3.org/wiki/JavaScript_best_practices</a> - </li> </ol></ol> <h2>[EXAMPLE]</h2> <ol> <li><a href="http://www.w3.org/wiki/JavaScript_best_practices#Introduction" target="_blank"><span class="toctext">Introduction</span></a> </li> <ol> <li>]</li> </ol> <li class="toclevel-1 tocsection-2"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Call_things_by_their_name_.E2.80.94_easy.2C_short_and_readable_variable_and_function_names" target="_blank"><span class="toctext">Call things by their name — easy, short and readable variable and function names</span></a></li> <ol> <li class="toclevel-1 tocsection-2">]</li> <li class="toclevel-1 tocsection-2">] cc namingConventions</li> </ol> <li class="toclevel-1 tocsection-3"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals" target="_blank"><span class="toctext">Avoid globals</span></a> </li> <ol> <li class="toclevel-1 tocsection-3">]</li> </ol> <li class="toclevel-1 tocsection-4"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Stick_to_a_strict_coding_style" target="_blank"><span class="toctext">Stick to a strict coding style</span></a></li> <ol> <li class="toclevel-1 tocsection-4">] goal is consistency - naming conventions, ...</li> </ol> <li class="toclevel-1 tocsection-5"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Comment_as_much_as_needed_but_not_more" target="_blank"><span class="toctext">Comment as much as needed but not more</span></a> </li> <ol> <li class="toclevel-1 tocsection-5">] Comments don’t hurt anybody if you do them right, the trick is moderation.</li> <li class="toclevel-1 tocsection-5">] Comment when there is an important thing to say, and</li> <li class="toclevel-1 tocsection-5">] if you do comment use the /*<code> </code> */ notation.</li> <li class="toclevel-1 tocsection-5">] Single line comments using <code>//</code> can be problematic if people minify your code without stripping comments and in general are less versatile.</li> <li class="toclevel-1 tocsection-5">] TIP /* .... // */ - can comment out a code block, then enable it by adding a single slash before the opening /*</li> </ol> <li class="toclevel-1 tocsection-6"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Avoid_mixing_with_other_technologies" target="_blank"><span class="toctext">Avoid mixing with other technologies</span></a> </li> <ol> <li class="toclevel-1 tocsection-6">] example css - avoid using js to set css attributes where you can, keep css to css, js to js </li> </ol> <li class="toclevel-1 tocsection-7"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Use_shortcut_notation_when_it_makes_sense" target="_blank"><span class="toctext">Use shortcut notation when it makes sense</span></a> </li> <ol> <li class="toclevel-1 tocsection-7">>] example use object literals vs object ?assignment statements?</li> <li class="toclevel-1 tocsection-7">] <span style="background-color: #ff0000;">DONT </span>myCar = new Car()</li> <li class="toclevel-1 tocsection-7">] myCar.color=red;</li> <li class="toclevel-1 tocsection-7">] myCar.type=convertible;</li> <li class="toclevel-1 tocsection-7">] myCar....= ... ;</li> <li class="toclevel-1 tocsection-7">] <span style="background-color: #00ff00;">DO</span> var myCar = { color:red, type:convertible, ...:...} // avoids writing out myCar. in front of each property</li> <li class="toclevel-1 tocsection-7">>] example array literals VS array declarations</li> <li class="toclevel-1 tocsection-7">] <span style="background-color: #ff0000;">DONT</span> var myCars = new Array()</li> <li class="toclevel-1 tocsection-7">] myArray[0] = '1965 Mustang Convertible'</li> <li class="toclevel-1 tocsection-7">] myArray[1]= '1966 Mustang 2+2'</li> <li class="toclevel-1 tocsection-7">] <span style="background-color: #00ff00;">DO</span> myCars = ['1965 Mustang Convertible, '1966 Mustang 2+2' ]</li> </ol> <li class="toclevel-1 tocsection-8"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Modularize_.E2.80.94_one_function_per_task" target="_blank"><span class="toctext">Modularize — one function per task</span></a></li> <ol> <li class="toclevel-1 tocsection-8">] a general programming bp - create functions that fulfill one job at a time makes it easy for other developers to debug and change your code without having to scan through all the code to work out what code block performs what function.</li> </ol> <li class="toclevel-1 tocsection-9"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Enhance_progressively" target="_blank"><span class="toctext">Enhance progressively</span></a></li> <ol> <li class="toclevel-1 tocsection-9">]</li> <li class="toclevel-1 tocsection-9">] cc progressive-enhancemnt</li> </ol> <li class="toclevel-1 tocsection-10"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Allow_for_configuration_and_translation" target="_blank"><span class="toctext">Allow for configuration and translation</span></a></li> <li class="toclevel-1 tocsection-11"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Avoid_heavy_nesting" target="_blank"><span class="toctext">Avoid heavy nesting</span></a></li> <li class="toclevel-1 tocsection-12"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Optimize_loops" target="_blank"><span class="toctext">Optimize loops</span></a></li> <li class="toclevel-1 tocsection-13"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Keep_DOM_access_to_a_minimum" target="_blank"><span class="toctext">Keep DOM access to a minimum</span></a></li> <li class="toclevel-1 tocsection-14"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Don.E2.80.99t_yield_to_browser_whims" target="_blank"><span class="toctext">Don’t yield to browser whims</span></a></li> <li class="toclevel-1 tocsection-15"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Don.E2.80.99t_trust_any_data" target="_blank"><span class="toctext">Don’t trust any data</span></a></li> <li class="toclevel-1 tocsection-16"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Add_functionality_with_JavaScript.2C_don.E2.80.99t_create_too_much_content" target="_blank"><span class="toctext">Add functionality with JavaScript, don’t create too much content</span></a></li> <li class="toclevel-1 tocsection-17"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Build_on_the_shoulders_of_giants" target="_blank"><span class="toctext">Build on the shoulders of giants</span></a></li> <li class="toclevel-1 tocsection-18"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Development_code_is_not_live_code" target="_blank"><span class="toctext">Development code is not live code</span></a></li> <li class="toclevel-1 tocsection-19"><a href="http://www.w3.org/wiki/JavaScript_best_practices#Summary" target="_blank"><span class="toctext">Summary</span></a></li> </ol> <h2>[HOW-T0]</h2> <ol> <li>]</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>] </li> </ol>