better code in javascript
Post on 15-May-2015
849 Views
Preview:
DESCRIPTION
TRANSCRIPT
tekSymmetry
Better code in JavaScript
nhm tanveer hossain khan (hasan)
tekSymmetry
How many of us write code in javascript?
• // global scoped function// no other script can’t use the // same name it’d be overriddenfunction doSomething(p1, p2) { // big chunk of document.getElementById // messed up innerHTML = “<b>foo.. // dirty duplicate code}
tekSymmetry
What is our understanding?
“God will assign javascript bugs to those who will go to HELL!”
tekSymmetry
Then what’s more?
• Browser compatibility sux!
• Stupid scripting language
• Hard to manage!
• Verbose
• No Object Oriented Programming!
• so anything more....?
tekSymmetry
Browser compatibility?
• IE6 ? Organized, Better, Understandable and Humanized code doesn’t hurt at all!
• “Operation canceled” (IE6)
• Check out DOM related script
• “Undefined” use “var” while declaring variable
• Check null wherever possible
tekSymmetry
Stupid scripting language?
• Not easy to debug!
• No smart IDE
• Not standard, easy to write spaghetti code
• Better! write less javascript
• Performance sux!
tekSymmetry
Hard to manage!
• Do you really think that?
• How hard?
• How strong intention you have?
• How about this... (next slide)
tekSymmetry
Example - 1
• var Teks = { FantasyFootball: { Util: { debug: function(pMessage) { if (window.console != null) { window.console(pMessage); } } } }}
• function debug(pMessage) { if (window.console != null) { window.console(pMessage); }}
VS
tekSymmetry
Good or Bad!Teks.FantasyFootball.Util.
debug(“Hello world”)debug(“Hello world”)VS
- Nothing going to be messed up with other libraries - Understandable, which “debug” function- Easy to group similar functionalities
- Increased line of codes initially
Good
Bad
Live example!
Live example (2)!
tekSymmetry
Object Oriented Programming (!)
• Javascript is Object oriented programming platform (Real object)
• Everything is prototyping
• No class, everything is object
• Every function is prototype able
• example goes (on next slide...)
tekSymmetry
Object Oriented?• // Constructor method
function Logger(pName) { this.mType = /* other logic */; this.mName = pName; // Member method debug = function(pMessage) { if (this.mType == ‘debug’) { this.log(this.mType, this.mName, pMessage); } }}
var log = new Logger(“Test”);log.debug(‘hello world’);
tekSymmetry
Few notes
• Use javascript as separate concerns
• Use javascript framework such as jQuery, Prototype
tekSymmetry
Separate concerns!
• Don’t embed javascript on HTML
• Keep javascript code on “application.js” (for rails dev)
• Apply events based on content and context.
tekSymmetry
jQuery!
• document.getElementById(‘div_id’) VS $(‘#div_id’)
• ulElement.parent.getElementsByTagName(“li”) VS $ulElement.parent().children(“li”)
• <body onload=...> VS $(document).ready(function() {})
• <a click=”...”> VS $(‘#a_link’).bind(‘click’, function() {...}
tekSymmetry
jQuery (2)!
• document.getElementById(‘form1’).submit() VS $(‘#form1’).trigger(‘submit’)
• new XMLHttpRequest(...) VS $.ajax({ type: “POST”, url: “/url/here”, data: “p1=v1&p2=v2”, success: function(pMsg) { }})
tekSymmetry
jQuery (3) - fun!
• $(“#link1”).load(“http://abc.com/url”)
• $("#objectID").load("/test/url", { 'params[]': ["value1", "value2"] } );
• $.getScript(‘http://abc.com/url’, function(pData, pStatus) {...})
• $.getJSON(‘/test/url’, function(pData, pStatus) {...})
tekSymmetry
jQuery (4) - essentials!
• $(‘#div1’).css(‘display’, ‘none’)
• $(‘#div2’).toggle();
• $(‘#div3’).hide();
• $(‘#div3’).show();
tekSymmetry
jQuery (5) - custom effect
• $(‘#div1’).animate({ width: “70%”, opacity: 0.4}, 1500)
tekSymmetry
Must Have on your PC!!
• jQuery API doc application
• http://api.jquery.com/
• Read at least -
• http://www.sitepoint.com/article/oriented-programming-1/
tekSymmetry
ThanksjQuery API doc for few examples!
top related