Better code in JavaScript
•
2 gefällt mir•893 views
This presentation was prepared for tekSymmetry development team to train the basic javascript and better coding practice.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (13)
Ähnlich wie Better code in JavaScript
Ähnlich wie Better code in JavaScript (20)
Mehr von nhm taveer hossain khan
Mehr von nhm taveer hossain khan (13)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Better code in JavaScript
- 1. Better code in JavaScript nhm tanveer hossain khan (hasan) tekSymmetry
- 2. How many of us write code in javascript? • // global scoped function // no other script can’t use the // same name it’d be overridden function doSomething(p1, p2) { // big chunk of document.getElementById // messed up innerHTML = “<b>foo.. // dirty duplicate code } tekSymmetry
- 3. What is our understanding? “God will assign javascript bugs to those who will go to HELL!” tekSymmetry
- 4. Then what’s more? • Browser compatibility sux! • Stupid scripting language • Hard to manage! • Verbose • No Object Oriented Programming! • so anything more....? tekSymmetry
- 5. 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
- 6. Stupid scripting language? • Not easy to debug! • No smart IDE • Not standard, easy to write spaghetti code • Better! write less javascript • Performance sux! tekSymmetry
- 7. Hard to manage! • Do you really think that? • How hard? • How strong intention you have? • How about this... (next slide) tekSymmetry
- 8. Example - 1 • var Teks = { FantasyFootball: { • Util: { function debug(pMessage) { debug: function(pMessage) { if (window.console != null) { VS if (window.console != null) { window.console(pMessage); window.console(pMessage); } } } } } } } tekSymmetry
- 9. Good or Bad! Teks.FantasyFootball.Util. VS debug(“Hello world”) debug(“Hello world”) Good - Nothing going to be messed up with other libraries - Understandable, which “debug” function - Easy to group similar functionalities Bad - Increased line of codes initially tekSymmetry
- 10. Live example!
- 12. 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
- 13. Object Oriented? • // Constructor method function Logger(pName) { this.mType = /* other logic */; this.mName = pName; var log = new Logger(“Test”); log.debug(‘hello world’); // Member method debug = function(pMessage) { if (this.mType == ‘debug’) { this.log(this.mType, this.mName, pMessage); } } } tekSymmetry
- 14. Few notes • Use javascript as separate concerns • Use javascript framework such as jQuery, Prototype tekSymmetry
- 15. 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
- 16. 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
- 17. 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
- 18. jQuery (3) - fun! • $(“#link1”).load(“http://abc.com/url”) • $(quot;#objectIDquot;).load(quot;/test/urlquot;, { 'params []': [quot;value1quot;, quot;value2quot;] } ); • $.getScript(‘http://abc.com/url’, function (pData, pStatus) {...}) • $.getJSON(‘/test/url’, function(pData, pStatus) {...}) tekSymmetry
- 19. jQuery (4) - essentials! • $(‘#div1’).css(‘display’, ‘none’) • $(‘#div2’).toggle(); • $(‘#div3’).hide(); • $(‘#div3’).show(); tekSymmetry
- 20. jQuery (5) - custom effect • $(‘#div1’).animate({ width: “70%”, opacity: 0.4 }, 1500) tekSymmetry
- 21. 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
- 22. Thanks jQuery API doc for few examples! tekSymmetry