This is part 2 of the Tutorial
Explanation =>
This is not at all a new approach, Any good JavaScript application need such separation.
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 have just presented a small application in this demo which has clear cut separation in DOM-less and UI-Layer.
Code Explanation =>
First we will learn how to create CLASS type or OO behavior in JavaScript. This is done using Prototype pattern.Explanation =>
This is not at all a new approach, Any good JavaScript application need such separation.
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.
Now you can directly load example, http://jsfiddle.net/nsisodiya/d2yQz/ most of code is self explanatory and simple.
No comments:
Post a Comment