Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Best Code Practices & Tips and Tricks
What is Javascript & jQuery
JavaScript jQuery
Developers need to handle by writing
their own Javascript code.
Query is a m...
• Don’t forget var keyword when assigning a
variable’s value for the first time.
Example: name='Javascript'; // Bad Practi...
•Avoid these JavaScript’s Keywords When Creating
Custom Identifiers
break ,case, catch, continue, default, delete, do, els...
• Make Multi-Line Comments Readable, But Simple
/*
* This is a multi-line comment ...
* cont'd...
* cont'd...
* cont'd...
...
• Avoid using for-in loop for arrays
var sum = 0;
for (var i in arrayNumbers) {
sum += arrayNumbers[i];
}
var sum = 0;
for...
• Use a switch/case statement instead of a series of if/else
Using switch/case is faster when there are more than 2 cases,...
• Instead of reading the length of an array at every
iteration, you should get it only once.
for (var i = 0; i < value.len...
• Use a variable initialized with a Function Expression to
define a function within a block.
if (x) {
function foo() {}
}
...
• Always Use Closure
function foo(element, a, b) {
element.onclick = function() { /* uses a and b */ };
}
function foo(ele...
• For consistency single-quotes (') are preferred to
double-quotes ("). This is helpful when creating strings
that include...
Best Practices
• Always load your jQuery framework from CDN
<script type="text/javascript" src="/js/jquery.js">
</script>
<script type="t...
• Load jQuery locally when CDN fails
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1...
• Keep your selector simple, don't make it complex
$("body .main p#myID em");
$("p#myID em");
• Don't use your selector re...
• when you are comparing empty elements try to follow
this
$(document).ready(function() {
if ($('#dvText').html().trim()) ...
• Cache jQuery Objects
$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border...
• jQuery's Chaining Feature
Chaining is a great feature in jQuery that allows you to chain method calls. Here is an
Exampl...
• Write your own selectors
$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $(window).scro...
• Benchmark Your jQuery Code
Always benchmark your code and see which query is slower to replace it
// Shortcut to log dat...
$('li').each(function() {
var $this = $(this);
$this.on('click', function() {
$this.addClass('active');
});
});
• Avoid th...
• Using filtering methods instead of pseudo selectors
$('.item:first')
$('.item').eq(0)
• Don't put all parameters in Ajax...
• References
• http://tutorialzine.com/
• http://viralpatel.net/blogs/category/javascript/
• https://learn.jquery.com/
• h...
Upcoming SlideShare
Loading in …5
×

Javascript and Jquery Best practices

694 views

Published on

Jquery and JavaScript Best practices and Tips and tricks Cheat-sheet. This presentation very helpful for web developer.

Published in: Software

Javascript and Jquery Best practices

  1. 1. Best Code Practices & Tips and Tricks
  2. 2. What is Javascript & jQuery JavaScript jQuery Developers need to handle by writing their own Javascript code. Query is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. If you use JavaScript, you need to write you own scripting which may take time. If you use Jquery, you need not to write much scripting which already exists in JQuery. JavaScript is a language. Example: JQuery like a foriegn language which is already built by Javascript which is unknown to you what kind of JS is written there, you are just using it. JQuery is a framework built with JavaScript to help JavaScript programmers who are doing common web tasks. Example: But if you goto a country where it is spoken, a guide can still help you along, making your journey easier. jQuery is one of many frameworks which provide help in areas that can be frustrating when writing plain JavaScript
  3. 3. • Don’t forget var keyword when assigning a variable’s value for the first time. Example: name='Javascript'; // Bad Practice var name='JavaScript'; // // GoodPractice • Use === instead of == Example: if(name=='Javascript') // Bad Practice if(name==='Javascript') // Good Practice • Use Semicolons for line termination. Example: firstName = 'Sultan' // Bad Practices lastName = 'Khan' // Bad Practices firstName = 'Sultan'; // Good Practices lastName = 'Khan'; // Good Practices JavaScript Best Practices
  4. 4. •Avoid these JavaScript’s Keywords When Creating Custom Identifiers break ,case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, With •Avoid the use of eval() or the Function constructor Use of eval or the Function constructor are expensive operations as each time they are called script engine must convert source code to executable code. var func1 = new Function(functionCode); var func2 = eval(functionCode) •Don’t Change a Variable’s Type After Initial Declaration var my_variable = "This is a String"; my_variable = 50;
  5. 5. • Make Multi-Line Comments Readable, But Simple /* * This is a multi-line comment ... * cont'd... * cont'd... * cont'd... * cont'd... */ • Verify the argument before passing it to isFinite() isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undefined); // false isFinite(); // false
  6. 6. • Avoid using for-in loop for arrays var sum = 0; for (var i in arrayNumbers) { sum += arrayNumbers[i]; } var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum += arrayNumbers[i]; } • Pass functions, not strings, to setTimeout() and setInterval() setInterval('doSomethingPeriodically()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000); setInterval(doSomethingPeriodically, 1000); setTimeout(doSomethingAfterFiveSeconds, 5000);
  7. 7. • Use a switch/case statement instead of a series of if/else Using switch/case is faster when there are more than 2 cases, and it is more elegant (better organized code). Avoid using it when you have more than 10 cases. • Avoid using try-catch-finally inside a loop ar object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i+ +) { try { // do something that throws an exception } catch (e) { // handle exception } } var object = ['foo', 'bar'], i; try { for (i = 0, len = object.length; i <len; i++) { // do something that throws an exception } } catch (e) { // handle exception }
  8. 8. • Instead of reading the length of an array at every iteration, you should get it only once. for (var i = 0; i < value.length; i += 1) { console.log(value[i]);} for (var i = 0, iCnt = haystack.length; i < iCnt; i += 1) { console.log(haystack[i]);} • You can concatenate strings in many ways, but most efficient is Array.join() var store = {'lemon': 'yellow', 'cherry': 'red'} var str = "Lemons are " + store.lemon + ", tomatos are" + store.cherry; var str = ["Lemons are ", store.lemon, ", tomatos are", store.cherry].join("");
  9. 9. • Use a variable initialized with a Function Expression to define a function within a block. if (x) { function foo() {} } if (x) { var foo = function() {}; } • No reason to use wrapper objects for primitive types, plus they're dangerous. var x = new Boolean(false); if (x) { alert('hi'); // Shows 'hi'. } var x = Boolean(0); if (x) { alert('hi'); // This will never be alerted. }
  10. 10. • Always Use Closure function foo(element, a, b) { element.onclick = function() { /* uses a and b */ }; } function foo(element, a, b) { element.onclick = bar(a, b); } function bar(a, b) { return function() { /* uses a and b */ }; } • Do not use Multiline string literals var myString = 'A rather long string of English text, an error message actually that just keeps going and going -- an error message to make the Energizer '; var myString = 'A rather long string of English text, an error message ' + 'actually that just keeps going and going -- an error ' + 'message to make the Energizer';
  11. 11. • For consistency single-quotes (') are preferred to double-quotes ("). This is helpful when creating strings that include HTML: var msg = 'This is some HTML'; Don’t forget to use a code beautifier when coding. Use JSLint and minification (JSMin, for example) before going live.
  12. 12. Best Practices
  13. 13. • Always load your jQuery framework from CDN <script type="text/javascript" src="/js/jquery.js"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> • Always Use Shorthand for $(document).ready() $(document).ready(function() { .... }); $(function() { });
  14. 14. • Load jQuery locally when CDN fails <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write('<script src="/js/jqeury.js"></script>'); } </script> • Always try to use ID as selector $("#elmID"); • Use class selector with tags $(".myCSSClass"); $(“div .myCSSClass”)
  15. 15. • Keep your selector simple, don't make it complex $("body .main p#myID em"); $("p#myID em"); • Don't use your selector repeatedly. $("#myID").css("color", "red"); $("#myID").css("font", "Arial"); $("#myID").text("Error occurred!"); $("p").css({ "color": "red", "font": "Arial"}).text("Error occurred!");
  16. 16. • when you are comparing empty elements try to follow this $(document).ready(function() { if ($('#dvText').html().trim()) { alert('Proceed as element is not empty.'); } else { alert('Element is empty'); } }); • Avoid jQuery.Post(), use jQuery.ajax() $.post( url, [data], [callback], [type] ) $.ajax({url: "", success: function(result){ },error:function(result){});
  17. 17. • Cache jQuery Objects $('#traffic_light input.on).bind('click', function(){...}); $('#traffic_light input.on).css('border', '3px dashed yellow'); $('#traffic_light input.on).css('background-color', 'orange'); $('#traffic_light input.on).fadeIn('slow'); var $active_light = $('#traffic_light input.on'); $active_light.bind('click', function(){...}); $active_light.css('border', '3px dashed yellow'); $active_light.css('background-color', 'orange'); $active_light.fadeIn('slow'); • Classes are Great Use CSS classes whenever possible instead of inline CSS. $("element").css({"color":"red","font-size:"20px"}) $("element").addClass("pstyle");
  18. 18. • jQuery's Chaining Feature Chaining is a great feature in jQuery that allows you to chain method calls. Here is an Example: $ ('sampleElement').removeClass('classToBeRemoved').addClass('classToBe Added'); • Always use data method and avoid storing data inside the DOM $('#selector').attr('alt', 'your description.....'); $('#selector').data('alt', 'your description.....'); • Use find() rather than context var divs = $('.testdiv', '#pageBody'); var divs = $('#pageBody').find('.testdiv'); var divs = $('#pageBody .testdiv');
  19. 19. • Write your own selectors $.extend($.expr[':'], { abovethefold: function(el) { return $(el).offset().top < $(window).scrollTop() + $(window).height(); } }); var nonVisibleElements = $('div:abovethefold'); // Select the elements • Store jQuery results for later App.hiddenDivs = $('div.hidden'); // later in your application: App.hiddenDivs.find('span');
  20. 20. • Benchmark Your jQuery Code Always benchmark your code and see which query is slower to replace it // Shortcut to log data to the Firebug console $.l($('div')); // Get the UNIX timestamp $.time(); // Log the execution time of a JS block to Firebug $.lt(); $('div'); $.lt(); // Run a block of code in a for loop to test the execution time $.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug • best way to Using $this keyword $('li').each(function() { $(this).on('click', function() { $(this).addClass('active'); }); });
  21. 21. $('li').each(function() { var $this = $(this); $this.on('click', function() { $this.addClass('active'); }); }); • Avoid the universal selectors // Slow $('div.container > *'); // Faster $('.container').children();
  22. 22. • Using filtering methods instead of pseudo selectors $('.item:first') $('.item').eq(0) • Don't put all parameters in Ajax URL $.ajax({ url: '/remote/url?param1=value1&param2=value2...' }}); $.ajax({ url: '/remote/url', data: { param1: 'value1', param2: 'value2' } });
  23. 23. • References • http://tutorialzine.com/ • http://viralpatel.net/blogs/category/javascript/ • https://learn.jquery.com/ • http://www.sitepoint.com/javascript/jquery/

×