Js Project - Architecture
•
0 likes•275 views
New JS architecture for a Bidu.com.br company. Using singleton architecture, module patterns and events trigger mapping.
Recommended
Recommended
More Related Content
What's hot
What's hot (11)
Viewers also liked
Similar to Js Project - Architecture
Similar to Js Project - Architecture (20)
Recently uploaded
Recently uploaded (20)
Js Project - Architecture
- 2. Namespace window.Bidu = { pages : {}, utils : {} };
- 3. window.Bidu = { pages : { Home : { init : function () { //do something }, events : { “click #logo” : “refreshPage”, “click .menuItem” : “openSubMenu” }, refreshPage : function () {}, openSubMenu : function () {} } } }; Singleton Pattern
- 4. ( function (Bidu, undefined) { // private properties var foo = "foo"; // private methods function speak(msg) { console.log("You said: " + msg); }; // public methods and properties Bidu.pages.CarForm = { init : function() { speak("Funcionou! " + foo); }, events : { "click .icon" : "open", } open : function (){} }; }(window.Bidu = window.Bidu || {})); Module
- 5. Page Load Define Namespace Define Modules Trigger Document.Ready Function Auto call init function and bind events Page Ready Runtime Events
- 6. Trigger Document.Ready Function Go to BODY element Find a CTRL attribute Find Module with the name of attribute value Auto call init function and bind events
- 7. How Stuff Works On Application.html.erb " <body ctrl="<%= yield :ctrl_id %>"> On each main page " <%= content_for :ctrl_id do %>CarForm<% end %> Module name
- 8. Steps • First: • Move all form pages (vehicle assurance) to new format • Second: • Refactor the code to each interaction
- 9. this is it