This is part 2 of the Tutorial
Many of the times this separation is totally blur and create bugs and affect re-usability of code.
In my example code - I have not used any framework. (just klass.js , otherwise you can directly use prototype chaining based inheritance).
In this example, I have tried to separate code into DOM-LESS Layer and UI-Layer which totally work with DOM + Events
So I highly suggest to follow simple guideline
1) DOM-less (UI-less) ===> js code which do not interact of any DOM element or events. Can be loaded in any JS environment where window object (dom traversal , events) are not available. Just One exceptions that This DOM-less part may deal with XHR calls.
2) UI-part ==> js code which only deal with dom, dom events, and models provides by DOM-Less layer. there should be no XHR call in UI part.
I try to design my enterprise application based on above principle.
I have just presented a small application in this demo which has clear cut separation in DOM-less and UI-Layer.
Code Explanation =>
Here is the sample code
We can use klass.js to write same code like this
klass.js support inheritance using extend method.