我正在使用 JavaScript 和 JQuery 设计一个新的单页应用程序。然而,我最关心的是通过选择器将事件(如单击等)绑定(bind)到 DOM 元素,一旦加载新的“ View ”(从 AJAX 调用创建新页面),这些元素将被删除
通过用新内容替换主视图 DIV,在不产生内存泄漏和减慢页面速度的情况下实现 SPA 的最简洁方法是什么?
最佳答案
我知道这是一个老问题,但我认为它值得一个答案,所以在这里:
有几种方法可以解决这个问题(这是一个有点宽泛的问题,所以这里有一个宽泛的答案):
第一种方式:
// This is in plain JS, but the jQuery equivalent is:
// document.on('click', '#my-id, function(e) { /* Function stuff */ });
document.addEventListener('click' function(e) {
if (e.target.id === 'my-id') {
// Function stuff
}
});
这样做的好处是您永远不必删除事件监听器,因为总会有一个文档。您甚至可以通过使用类来设置一个“阶段”系统(我称之为阶段,我不知道是否有更好的词),即您的导航链接都具有类 nav-item
在你的事件监听器中你可以有这样的代码:
// jQuery equivalent of if statement is: if ($(this).is('nav-item')) {}
if (e.target.className.match(/nav-item/)) { // You could also use .include(), etc.
switch(e.target.id) {
case 'item1':
loadPageOneFunction(); // Or whatever
break;
case 'item2':
loadPageTwoFunction(); // Or whatever
break;
}
}
<小时/>
第二种方式
// Note how I named the function
document.getElementById('my-id').addEventListener('click', function clickFunction(e) {
myAjaxFunction(e.target); // Or whatever
});
// Later...
if (pageToLoad === 'page2') {
// You are required to name the function you are removing.
document.getElementById('my-id').removeEventListener('click', clickFunction);
document.getElementById('my-page2-id').addEventListener('click', clickFunction);
}
老实说,我更喜欢第一种方式,因为它的代码更少,我可以使用无名函数(匿名函数) - 我知道,这很重要,但仍然......
<小时/>还有第三种方法,就是不用担心删除事件监听器。您可以阅读 here .
同样,这是一个非常广泛的答案,因为它是一个广泛的问题。
关于javascript - 使用 JQuery 和 JavaScript 将事件绑定(bind)到单页应用程序的 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17305003/