Javascript 借助ngRoute理解路由模式

你可以称之为“重新发明轮子”，但是，我希望有一个高级架构师级别的人来回答这个问题，特别是那些知道angular js基础的人，或者能够用普通的JavaScript来完成自己的工作的人。虽然Angular更复杂，但我希望以最简单、高效和可用的形式获得它，而不存在任何内存泄漏

页面中有一个范围更大的主div，我将其称为SPA页面的组件（当然也包含几个其他组件），在运行时将不同的模板加载到父div中，并插入一些围绕加载的模板执行操作的代码。为了方便起见，我选择了两个模板和两个JS类

一般来说，组件就像一个状态机，当用户与它交互时，它会经历不同的视觉状态，每个状态都有一些可见的标记、按钮和相关的事件处理程序、javascript代码，我可以在页面加载时加载所有html模板和相关的JS，但根据需要加载html和插件JS更有效

HTML SPA

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

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

js/customers.js

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

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

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

一些JS代码监视浏览器上的哈希更改事件，并将加载相应的

模板/products.html

和

模板/users.html

main.js（检查散列更改和实例化类）

问题：

我正试图让它“正确”，遵循行业的方式，模拟ngRoute或uiRouter（不完全，但在一定程度上），并期待建议和改进，最重要的是纠正

---

我这里也有内存泄漏问题吗？

那么你到底想了解什么呢？基本上我的实现是否足够接近或正确，我刚刚写道，我设想了在这些框架中如何实现，但是，当然，我想从比我更有知识的人那里得到启发和纠正。你有没有机会浏览过那些路由器的源代码？有一点，但这就是为什么我在这里向了解更多的人学习。我觉得你的问题太宽泛了，最好把它分解成小块。这样你就有更好的机会得到回复。那么你到底想了解什么呢？基本上我的实现是否足够接近或正确，我刚刚写道，我设想了在这些框架中它是如何实现的，但是，当然，我想从比我更有知识的人那里得到启发和纠正。你有没有机会浏览过那些路由器的源代码？有一点，但这就是为什么我在这里向了解更多的人学习。我觉得你的问题太宽泛了，最好把它分解成小块。这样你就更有可能得到答复。

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

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