Question

你可以称之为重新发明轮子，但是，我想要一个高级建筑师级别来回答这个问题，特别是谁知道角js的基础特别是或者可以用普通的JavaScript来做自己。虽然Angular更复杂但我希望以最简单，最有效和最实用的形式获得它而不会出现任何内存泄漏。

在页面中有一个更大范围的主要div，我称之为SPA页面的一个组件（当然也包含其他几个组件），在运行时将不同的模板加载到父div中，并插入一些围绕该加载模板的代码。为了这个缘故，我需要两个模板和两个JS类。

IMO，一般来说，一个组件就像一个状态机，当用户与它交互时会经历不同的视觉状态，每个状态都有一些可见的标签，按钮和相关的事件处理程序，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>

模板/ products.html放在

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

模板/ 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
}

一些JS代码监视浏览器上的哈希更改事件，并将加载相应的templates/products.html和templates/users.html

main.js（检查哈希更改和实例化类）

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

问题：

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

此处我还有内存泄漏问题吗？

在ngRoute

0 个答案: