jQuery Has Coding Standards

jQuery HasCoding

StandardsNow You Tell Me...

Who am I?RJ BruneelUniversity of Central FloridaWeb Applications DeveloperMARKETING DEPARTMENTALUMNI ’97

[email protected]

Why use best practices &standards anyway?

Topics

Loading jQuery

jQuery Variables

jQuery Selectors

jQuery DOM Manipulation

jQuery Events

jQuery AJAX

Miscellaneous

LoadingjQuery



Relying solely on a CDNLoading jQuery



Using protocol independent URLsLoading jQuery

<head>



</head>

Loading jQuery at the top of the page

Loading jQuery



</body>

</html>

Loading jQuery at the bottom of the page

Loading jQuery



Loading jQuery 2.x if you supportIE 6, 7 or 8

Loading jQuery



Loading jQuery 1.x if you supportIE 6, 7 or 8

Loading jQuery

jQuery Variables

var bigcontainer = $("#container");

Disregarding naming standardsjQuery Variables

var $bigContainer = $("#container");

Following naming standardsjQuery Variables

for(var i = 0; i < 50; i++) {

$("#container").text(i);

}

Searching the DOM for the same element more than once

jQuery Variables

var $container = $("#container");

for(var i = 0; i < 50; i++) {

$container.text(i);

}

Caching jQuery objects using variables

jQuery Variables

$("#link").addClass("bold");

$("#link").fadeIn();

$("#link").removeClass("bold");

Calling multiple methods on the same jQuery object

jQuery Variables

$("#link")

.addClass("bold")

.fadeIn()

.removeClass("bold");

Using the chaining featurejQuery Variables

jQuery Selectors

$(".products");

Searching the DOM for a single element with a class name

jQuery Selectors

$("#products");

Searching the DOM usingan ID selector

jQuery Selectors

$("#container table.attendees td.column");

$("#outer-container #inner");

$("div#inner");

Using multiple IDs, excessive specificity or nesting when selecting an ID

jQuery Selectors

$("#product-container");

$("#product-container").find(".products");

$(".products", "#products-container");

Keeping selectors simple or giving them a context

jQuery Selectors

$(".container > *");

$(":radio");

$(":checkbox");

Using universal selectorsjQuery Selectors

$(".container").children();

$("input[type=checkbox]");

$("input[type=radio]");

Using the children method and being more specific

jQuery Selectors

var $list = $("#list");

for(var i = 0; i < 1000; i++) {$list.append("<li>"+i+"</li>");

}

Appending the same element many times to the DOM


var array = []; for(var i = 0; i < 1000; i++){

array[i] = "<li>"+i+"</li>";}

$list.append(array.join(""));

Using string concatenation orarray.join() before appending


$("#element-not-found").slideUp();

Running jQuery methods on elements that don’t exist


var $noSuchElement = $("#element-not-found");

if ($noSuchElement.length) {$noSuchElement.slideUp();

}

Verifying objects exist before using them


var $list = $("#list-container > ul");

// Complicated DOM manipulation methods

Performing lots of DOM manipulation inline


var $list = $("#list-container > ul").detach();

// Complicated DOM manipulation

$list.appendTo("#list-container");

Detaching elements before DOM manipulation and adding them back


jQueryEvents

<a id="link" href="#" onclick="linkEventHandler();">link</a>

Putting javascript in the HTML code

jQuery Events

$("#link").on("click", myEventHandler);

Using jQuery to bind eventsjQuery Events

$("#link").on("click", function() {

alert("Link clicked!");

});

Using anonymous functionsjQuery Events

function linkClickHandler() { alert("Link clicked!");

}

$("#link").on("click", linkClickHandler);

Creating a method for your click handlers

jQuery Events

$(function() {

alert("DOM is ready");

});

Using anonymous function for the document ready event handler

jQuery Events

function initPage() {

alert("DOM is ready");

}

$(initPage);

Using named function for the document ready event handler

jQuery Events

$("#list a").on("click", myClickHandler);

Duplicating event handlersjQuery Events

$("#list").on("click", "a", myClickHandler);

Using event delegationjQuery Events

jQuery AJAX

var jqxhr = $.get(url, successHandler);

Using .getJson() or .get()jQuery AJAX

var jqxhr = $.ajax({

url: url,

success: successHandler

});

jqxhr.done(successHandler);

Using $.ajax()jQuery AJAX

var jqxhr = $.ajax({

url: "ajaxURL.php?param1=title&param2=name"

});

Putting parameters in the URLjQuery AJAX

var jqxhr = $.ajax({ url: url, data: {

param1: "Title", param1: "Name" }

});

Putting parameters in the data object

jQuery AJAX

var jqxhr = $.ajax({ url: url });

jqxhr.done(successHandler);

Leaving off error handlingjQuery AJAX

var jqxhr = $.ajax({statusCode: { 404: handler404,

500: handler500 }});jqxhr.fail(failureHandler);

Implementing error handlingjQuery AJAX

Miscellaneous

$("#error-message").css("color":"red", "font-weight":"bold");

Using the CSS method in jQueryMiscellaneous

.error {"color": "red";

"font-weight": "bold";}

$("#error-message").addClass("error");

Using addClass methodMiscellaneous

$link

.attr("href", "#")

.attr("title", "My Title")

.attr("rel", "external");

Repeating jQuery methodsMiscellaneous

$link.attr({"href": "#","title": "My Title","rel": "external"

});

Using object literals for parameters

Miscellaneous

Questions?

THANK YOUDownload Slideshttp://www.slideshare.net/RJBruneel/jquery-has-coding-standards

Additional Resourceshttp://www.jquery.comhttp://lab.abhinayrathore.com/jquery-standards/http://gregfranko.com/jquery-best-practices/

[email protected]

http://www.slideshare.net/RJBruneel/jquery-has-coding-standards



http://www.jquery.com/



http://lab.abhinayrathore.com/jquery-standards/






jQuery Has Coding Standards

Technology

Transcript of jQuery Has Coding Standards