1

You may call it reinventing the wheel, however, I'd like a senior architect level to answer this, especially who knows the underpinnings of angular js especially or can do himself in plain vanilla JavaScript. Although Angular is more sophisticated but I want to get it in the simplest, efficient and usable form without any memory leaks.

There's a major div with a larger scope in a page, I'd call it a component of a SPA page (of course containing several other components too), loads different templates at runtime into the parent div, and plugs in some code that acts around that loaded template. For the sake I'd take two templates and two JS classes.

IMO and in general a component is like a state machine, that goes through different visual states as user interacts with it, each state has some visible tags, buttons and associated event handlers, javascript code, I could load all html templates and associated JS at page load but it's more efficient to load html and plug JS on need basis.

HTML SPA

<ul>
    <li><a href='#/products'>Products</a></li> 
    <li><a href='#/customers'>Customers</a></li>
</ul>

<div id='main'></div>

templates/products.html

<a href='#/products/buy/1'>Product 1</a>
<a href='#/products/buy/2'>Product 2</a>

templates/customers.html

<a href='#/customers/contact/1'>Customer 1</a>
<a href='#/customers/contact/2'>Customer 2</a>

js/products.js

function Product() {
   window.addEventListener("hashchange", function(){
       // check for #buy/1, #buy/2
   });
}
Product.prototype.load = function() {
    // load templates/products.html into #main
}

js/customers.js

function Customer() {
    window.addEventListener("hashchange", function(){
       // check for #contact/1, #contact/2
   });
}
Customer.prototype.load = function() {
    // populate customer.html into #main
}

some JS code that monitors the hash change event on the browser, and will load corresponding templates/products.html and templates/users.html

main.js (checking hash change and instantiating classes)

var product = new Product()
var customer = new Customer()
window.addEventListener("hashchange", function(){
     // if #/products
         product.load();
     // if #/customers
         customer.load()
}, false);

Question:

I'm trying to get it "right", follow the industry way, simulate ngRoute or uiRouter (not completely, but to an extent) and looking forward for suggestions and improvements and most importantly for corrections.

Also do I've a memory leak problem here?

user2727195
  • 7,122
  • 17
  • 70
  • 118
  • so what exactly are you trying to understand? – Max Koretskyi Sep 23 '16 at 06:18
  • basically is my implementation close or correct enough, I wrote that just now envisioning how it's done in those frameworks, but of course looking for enlightenment and corrections from people more knowledgeable than I am. – user2727195 Sep 23 '16 at 06:20
  • have you had any chance to look through the source code of those routers? – Max Koretskyi Sep 23 '16 at 06:27
  • a bit, but that's why I'm here to learn from people who know more – user2727195 Sep 23 '16 at 06:29
  • I see. I think your question is too broad, it'd be better if you broke it down into little pieces. In this way there's a better chance you'll get a reply. – Max Koretskyi Sep 23 '16 at 06:39
  • maybe not, I'm trying to see if my implementation is acceptable, or is there someone who can enlighten with a better and right way to do template loading/unloading, executing javascript around that template, attaching event handler, removing etc. – user2727195 Sep 23 '16 at 06:41

0 Answers0