SlideShare a Scribd company logo
1 of 27
function myNonClosure() {            Variable lost after
    var date = new Date();           function returns
    return date.getMilliseconds();
}
function myClosure() {           Variable stays around
var date = new Date();           even after function returns
//nested function
return function () {
     return date.getMilliseconds();
     };
}
var calc = new Calculator('eqCtl');
calc.add(2,2)
var Calculator = function() {
     //private variables
     //private functions

     return {
          //public members
     };
};
var Calculator = function(eq) {
     //private member
     var eqCtl = document.getElementById(eq);

     return {
                                      var calculator = new Calculator('eq');
           //expose public member     calculator.add(2,2)
           add: function(x,y) {
                 var val = x + y;
                 eqCtl.innerHTML = val;
                 }
           };
};
<html>
...
    <script source="first.js"></script>
    <script source="second.js"></script>
</html>


// first.js
(function(ns) {                                      // second.js
            ns.Customer = function() {               (function(ns) {
                    this.name = "";                           ns.Order = function() { ... };
            };                                       }(window.WilderMinds = window.WilderMinds || {}));
}(window.WilderMinds = window.WilderMinds || {}));
<!DOCTYPE html>
<html lang="en">
<head>
         <meta charset="utf-8">
         <title>RequireJS</title>
</head>
<body>
         <script src="scripts/require.js" data-main="scripts/lib/main.js">
         </script>
</body>
</html>
// main.js
require(["Customer"],
       // Requires the Customer Module
       function (Customer) { // Call with required Module(s)
              // Your Initialization Code
              var c = new Customer("A Customer");
              var name = c.name;
       }
 );
// Customer.js
define( [], // Required Scripts (None)
       function(){
       // Gets any required modules here like main
       function Customer (name) {
                this.name = name
       }
       return Customer; // Return the object that Requires
                          //constructor to allow you to call it
}
Suresh.Balla@neudesic.com

More Related Content

What's hot

Why You Shouldn't Write OO
Why You Shouldn't Write OO Why You Shouldn't Write OO
Why You Shouldn't Write OO
Yehuda Katz
 

What's hot (18)

Functional Reactive Programming - RxSwift
Functional Reactive Programming - RxSwiftFunctional Reactive Programming - RxSwift
Functional Reactive Programming - RxSwift
 
16 18
16 1816 18
16 18
 
Hack tutorial
Hack tutorialHack tutorial
Hack tutorial
 
React with Redux
React with ReduxReact with Redux
React with Redux
 
React, Redux, ES2015 by Max Petruck
React, Redux, ES2015   by Max PetruckReact, Redux, ES2015   by Max Petruck
React, Redux, ES2015 by Max Petruck
 
Reactивная тяга
Reactивная тягаReactивная тяга
Reactивная тяга
 
Reactive Programming Patterns with RxSwift
Reactive Programming Patterns with RxSwiftReactive Programming Patterns with RxSwift
Reactive Programming Patterns with RxSwift
 
Net/http and the http.handler interface
Net/http and the http.handler interfaceNet/http and the http.handler interface
Net/http and the http.handler interface
 
Testing in JavaScript
Testing in JavaScriptTesting in JavaScript
Testing in JavaScript
 
Testando API's de forma unitária mocando as dependências
Testando API's de forma unitária mocando as dependênciasTestando API's de forma unitária mocando as dependências
Testando API's de forma unitária mocando as dependências
 
React и redux
React и reduxReact и redux
React и redux
 
Demoiselle 2.0 no JavaOne Brasil 2010
Demoiselle 2.0 no JavaOne Brasil 2010Demoiselle 2.0 no JavaOne Brasil 2010
Demoiselle 2.0 no JavaOne Brasil 2010
 
mediator
mediatormediator
mediator
 
Magento2&amp;java script (2)
Magento2&amp;java script (2)Magento2&amp;java script (2)
Magento2&amp;java script (2)
 
Why You Shouldn't Write OO
Why You Shouldn't Write OO Why You Shouldn't Write OO
Why You Shouldn't Write OO
 
Async js - Nemetschek Presentaion @ HackBulgaria
Async js - Nemetschek Presentaion @ HackBulgariaAsync js - Nemetschek Presentaion @ HackBulgaria
Async js - Nemetschek Presentaion @ HackBulgaria
 
Promises, promises, and then observables
Promises, promises, and then observablesPromises, promises, and then observables
Promises, promises, and then observables
 
AngulrJS Overview
AngulrJS OverviewAngulrJS Overview
AngulrJS Overview
 

Viewers also liked (8)

Html5 Canvas and Media
Html5 Canvas and MediaHtml5 Canvas and Media
Html5 Canvas and Media
 
React native - Under the Hood and App Live Updates without App Store Approval
React native - Under the Hood and App Live Updates without App Store ApprovalReact native - Under the Hood and App Live Updates without App Store Approval
React native - Under the Hood and App Live Updates without App Store Approval
 
Developing context aware applications with iBeacons technology
Developing context aware applications with iBeacons technologyDeveloping context aware applications with iBeacons technology
Developing context aware applications with iBeacons technology
 
The Influence Of The Media Ppp
The Influence Of The Media PppThe Influence Of The Media Ppp
The Influence Of The Media Ppp
 
Filsafat islam
Filsafat islamFilsafat islam
Filsafat islam
 
Au Psy492 M7 A3 E Portf Lee C
Au Psy492 M7 A3 E Portf Lee CAu Psy492 M7 A3 E Portf Lee C
Au Psy492 M7 A3 E Portf Lee C
 
Digital connections- Disease Vocab
Digital connections- Disease VocabDigital connections- Disease Vocab
Digital connections- Disease Vocab
 
Ad. New Deodorants
Ad. New DeodorantsAd. New Deodorants
Ad. New Deodorants
 

Similar to Architecting JavaScript Code

HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
Dmitry Soshnikov
 

Similar to Architecting JavaScript Code (20)

Introduction to Zend Framework web services
Introduction to Zend Framework web servicesIntroduction to Zend Framework web services
Introduction to Zend Framework web services
 
Javascript - Beyond-jQuery
Javascript - Beyond-jQueryJavascript - Beyond-jQuery
Javascript - Beyond-jQuery
 
What's new in jQuery 1.5
What's new in jQuery 1.5What's new in jQuery 1.5
What's new in jQuery 1.5
 
Ten useful JavaScript tips & best practices
Ten useful JavaScript tips & best practicesTen useful JavaScript tips & best practices
Ten useful JavaScript tips & best practices
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
 
Symfony2 from the Trenches
Symfony2 from the TrenchesSymfony2 from the Trenches
Symfony2 from the Trenches
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Zend framework service
Zend framework serviceZend framework service
Zend framework service
 
Zend framework service
Zend framework serviceZend framework service
Zend framework service
 
Object-Oriented JavaScript
Object-Oriented JavaScriptObject-Oriented JavaScript
Object-Oriented JavaScript
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascript
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
ZF2 for the ZF1 Developer
ZF2 for the ZF1 DeveloperZF2 for the ZF1 Developer
ZF2 for the ZF1 Developer
 
Doctrine For Beginners
Doctrine For BeginnersDoctrine For Beginners
Doctrine For Beginners
 
Clean code in JavaScript
Clean code in JavaScriptClean code in JavaScript
Clean code in JavaScript
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
 
Ad java prac sol set
Ad java prac sol setAd java prac sol set
Ad java prac sol set
 
Backbone Basics with Examples
Backbone Basics with ExamplesBackbone Basics with Examples
Backbone Basics with Examples
 
Google App Engine Developer - Day3
Google App Engine Developer - Day3Google App Engine Developer - Day3
Google App Engine Developer - Day3
 

Recently uploaded

Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...
Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...
Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...
baharayali
 
Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...
Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...
Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...
baharayali
 
Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...
Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...
Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...
makhmalhalaaay
 
Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...
Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...
Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...
makhmalhalaaay
 
Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...
Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...
Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...
baharayali
 

Recently uploaded (20)

St. John's Church Parish Magazine - May 2024
St. John's Church Parish Magazine - May 2024St. John's Church Parish Magazine - May 2024
St. John's Church Parish Magazine - May 2024
 
NoHo First Good News online newsletter May 2024
NoHo First Good News online newsletter May 2024NoHo First Good News online newsletter May 2024
NoHo First Good News online newsletter May 2024
 
St. Louise de Marillac and Poor Children
St. Louise de Marillac and Poor ChildrenSt. Louise de Marillac and Poor Children
St. Louise de Marillac and Poor Children
 
Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...
Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...
Real Kala Jadu, Black magic specialist in Lahore and Kala ilam expert in kara...
 
The_Chronological_Life_of_Christ_Part_99_Words_and_Works
The_Chronological_Life_of_Christ_Part_99_Words_and_WorksThe_Chronological_Life_of_Christ_Part_99_Words_and_Works
The_Chronological_Life_of_Christ_Part_99_Words_and_Works
 
About Kabala (English) | Kabastro.com | Kabala.vn
About Kabala (English) | Kabastro.com | Kabala.vnAbout Kabala (English) | Kabastro.com | Kabala.vn
About Kabala (English) | Kabastro.com | Kabala.vn
 
Codex Singularity: Search for the Prisca Sapientia
Codex Singularity: Search for the Prisca SapientiaCodex Singularity: Search for the Prisca Sapientia
Codex Singularity: Search for the Prisca Sapientia
 
Lesson 6 - Our Spiritual Weapons - SBS.pptx
Lesson 6 - Our Spiritual Weapons - SBS.pptxLesson 6 - Our Spiritual Weapons - SBS.pptx
Lesson 6 - Our Spiritual Weapons - SBS.pptx
 
MEIDUNIDADE COM JESUS PALESTRA ESPIRITA1.pptx
MEIDUNIDADE COM JESUS  PALESTRA ESPIRITA1.pptxMEIDUNIDADE COM JESUS  PALESTRA ESPIRITA1.pptx
MEIDUNIDADE COM JESUS PALESTRA ESPIRITA1.pptx
 
Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...
Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...
Famous Kala Jadu, Black magic specialist in Rawalpindi and Bangali Amil baba ...
 
Louise de Marillac and Care for the Elderly
Louise de Marillac and Care for the ElderlyLouise de Marillac and Care for the Elderly
Louise de Marillac and Care for the Elderly
 
"The Magnificent Surah Rahman: PDF Version"
"The Magnificent Surah Rahman: PDF Version""The Magnificent Surah Rahman: PDF Version"
"The Magnificent Surah Rahman: PDF Version"
 
Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 18, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 18, Noida Call girls :8448380779 Model Escorts | 100% verified
 
From The Heart v8.pdf xxxxxxxxxxxxxxxxxxx
From The Heart v8.pdf xxxxxxxxxxxxxxxxxxxFrom The Heart v8.pdf xxxxxxxxxxxxxxxxxxx
From The Heart v8.pdf xxxxxxxxxxxxxxxxxxx
 
Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...
Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...
Professional Amil baba, Black magic specialist in Lahore and Kala ilam expert...
 
Human Design Gates Cheat Sheet | Kabastro.com
Human Design Gates Cheat Sheet | Kabastro.comHuman Design Gates Cheat Sheet | Kabastro.com
Human Design Gates Cheat Sheet | Kabastro.com
 
Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...
Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...
Professional Amil baba, Kala jadu specialist in Multan and Kala ilam speciali...
 
The Revelation Chapter 4 Working Copy.docx
The Revelation Chapter 4 Working Copy.docxThe Revelation Chapter 4 Working Copy.docx
The Revelation Chapter 4 Working Copy.docx
 
Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...
Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...
Popular Kala Jadu, Black magic specialist in Sialkot and Kala ilam specialist...
 
Flores de Mayo-history and origin we need to understand
Flores de Mayo-history and origin we need to understandFlores de Mayo-history and origin we need to understand
Flores de Mayo-history and origin we need to understand
 

Architecting JavaScript Code

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. function myNonClosure() { Variable lost after var date = new Date(); function returns return date.getMilliseconds(); }
  • 9. function myClosure() { Variable stays around var date = new Date(); even after function returns //nested function return function () { return date.getMilliseconds(); }; }
  • 10.
  • 11.
  • 12. var calc = new Calculator('eqCtl'); calc.add(2,2)
  • 13.
  • 14.
  • 15.
  • 16. var Calculator = function() { //private variables //private functions return { //public members }; };
  • 17. var Calculator = function(eq) { //private member var eqCtl = document.getElementById(eq); return { var calculator = new Calculator('eq'); //expose public member calculator.add(2,2) add: function(x,y) { var val = x + y; eqCtl.innerHTML = val; } }; };
  • 18.
  • 19.
  • 20. <html> ... <script source="first.js"></script> <script source="second.js"></script> </html> // first.js (function(ns) { // second.js ns.Customer = function() { (function(ns) { this.name = ""; ns.Order = function() { ... }; }; }(window.WilderMinds = window.WilderMinds || {})); }(window.WilderMinds = window.WilderMinds || {}));
  • 21.
  • 22. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>RequireJS</title> </head> <body> <script src="scripts/require.js" data-main="scripts/lib/main.js"> </script> </body> </html>
  • 23. // main.js require(["Customer"], // Requires the Customer Module function (Customer) { // Call with required Module(s) // Your Initialization Code var c = new Customer("A Customer"); var name = c.name; } );
  • 24. // Customer.js define( [], // Required Scripts (None) function(){ // Gets any required modules here like main function Customer (name) { this.name = name } return Customer; // Return the object that Requires //constructor to allow you to call it }
  • 25.
  • 26.

Editor's Notes

  1. HTML5 JavaScript codeTraditional ASP.NET vs ASP.NET MVCLoad views first and get all data – talk about Windows Azure Preview Portal, pivotal trackeretcSPAWindows 8 WinRT with HTML and JavaScript
  2. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RectanglesWithCircles.html
  3. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RectanglesWithCircles.html