动态加载Javascript并维护对象

时间:2012-10-19 21:25:52

标签: javascript jquery memory-leaks

我正在构建一个基于ajax的网站,几乎每个页面都有自己的Javascript文件,该文件与html一起加载。

如果我以正确的方式做事,我会有几个问题,所以让我们开始吧:)

首先,我执行加载脚本的方式。我的所有代码都封装在一个函数中,所以说我已经加载了register页面,我会做的是:

page_class = "register"; //this will change when new page is loaded
new window[page_class];

所以这就是我希望它工作的方式,但我关心的一件事是,当用户再次从另一个页面返回到register并且将创建一个新对象时更多时间会造成内存泄漏还是其他一些不好的事情?如果是这样,我可以对rerun整个脚本做些什么?

我的下一个问题非常简单,我使用jquery附加on个事件,当我切换页面时,我会遍历所有元素,这些元素将被删除并分离每个元素,是否足以防止内存泄漏?如果不是我能改进什么?

1 个答案:

答案 0 :(得分:1)

所以考虑一下我们从评论中得到的结论,这是我的2美分:

我建议您将网站分段ajaxed。我的意思是所有的音乐区域都是一个分区,视频在另一个分区,等等。所以在每个区域内你都可以在转换到另一个区域时优雅地淡化并自然地加载下一个区域。

我认为

.detach()不足以确保正确的内存处理,因为detach会保留被删除的部分。当你想要回忆它时很好但是如果用户只是点击了一个区域并且退回了它就没用了。现在你有了对存储在内存中的整个部分的引用。

如何处理每个部分的内存?您可以维护节对象。一个例子:

var music = {
    loaded: 0,
    current_track: null,
    init: function(){
        if(this.loaded == 0)
        {
            $.ajax... get your music section html and write it to the #music element
            this.loaded = 1;
        }
    },
    selectTrack: function(id)
    {
        // just an example
    }
};

同时保持一个常量的站点对象:

var site = {
    init: function(){
        // call selected page, etc
    },
    move: function(page){
        if(page == 'music')
        {
            music.init();
            $('#content').animate(...);
        }
    }
};

$(document).ready(function(){
    site.init();
});

如果在页面加载时启动了站点obj,并且在调用move函数时,它会调用相应对象的init方法,如果页面已经加载,则该方法不执行任何操作。这个例子显然取决于有一个#music元素以及一个名为#content的容器元素。根据您处理转换的方式,这部分可能完全不相关。你所有的电话,但总的想法是一样的。您始终可以将display设置为none,以避免渲染复杂标记的瓶颈。

你至少简单地提到过,该项目预计会非常大。不要过于悲观,但“大”是在事实之后而不是在计划中定义的。除非你有数百万美元的投资。我不是想劝阻你。无论如何,请按照您的预期制作您的网站。但是考虑到在需求调用时扩大规模比在任何人都知道它之前全力以赴地采用更加理智的方法。 我之所以这么说,是因为我曾为那些已经投入数百万美元的客户工作,声称它将成为下一个YouTube,6个月后他们就不见了。他们专注于稳定性和安全性,他们在设计和营销方面都失败了。那个 - 而且几乎就是这个 - 就是为什么我建议只制作一些部分。它保持了它的分隔,重点很容易跟踪,你只需担心一件。当您获得10,000个用户时,请考虑使用完整的ajax。当你到达那里时,你也可能知道为什么在一个花哨的ajax网站上考虑ipads和平板电脑可能是一个更好的举措。你的酷过渡和淡化将成为移动设备上受伤的狗。考虑到事情的发展方向,那就是你想要的吗?

同样,这只是我的意见。我不知道你的网站或技能,甚至你是否已经考虑过我所提到的所有内容。如果您有任何具体问题,我可以尝试回答或更新这篇文章。 祝你好运。

关于提到的js选项:

标准jquery可能就足够了,除非你有时间完全理解bootstrap

之类的东西

Node.js非常棒,但您需要确保您的服务器可以部署它。例如,Dreamhost不支持它。至少他们没有持续检查。他们是一个体面,共同主持人的好榜样。我认为Media Temple也是如此。如果我错了,请纠正我。