在单页应用上管理JavaScript的最佳实践

Question

使用单页面应用程序,我更改哈希值并加载并仅更改页面内容,我正在尝试决定如何管理每个"页面"可能需要的JavaScript.

我已经有一个历史模块监视可能看起来的位置哈希domain.com/#/company/about,以及一个将使用XHR获取内容并将其插入内容区域的Page类.

function onHashChange(hash) {
    var skipCache = false;
    if(hash in noCacheList) {
        skipCache = true;
    } 
    new Page(hash, skipCache).insert();
}


// Page.js
var _pageCache = {};
function Page(url, skipCache) {

    if(!skipCache && (url in _pageCache)) {
        return _pageCache[url];
    }
    this.url = url;
    this.load();

}

缓存应该允许已加载的页面跳过XHR.我还将内容存储到documentFragment中,然后在插入新内容时将当前内容从文档中拉出来Page,因此浏览器只需要为片段构建一次DOM.

如果页面具有时间敏感数据,则可能需要跳过高速缓存.

以下是我需要帮助决定的内容:加载的任何页面很可能都有一些自己的JavaScript来控制页面.就像页面将使用Tabs一样,需要幻灯片放映,有某种动画,有ajax形式,或者有什么.

将JavaScript加载到页面的最佳方法是什么？在我从XHR返回的documentFragment中包含脚本标记？如果我需要跳过缓存并重新下载片段,该怎么办？我觉得第二次调用的完全相同的JavaScript可能会导致冲突,比如重新声明相同的变量.

更好的方法是在抓取新脚本时将脚本附加到头部Page？这将要求原始页面知道每个其他页面可能需要的所有资产.

除了知道包含所有内容的最佳方法之外,我不需要担心内存管理,以及将这么多不同的JavaScript位加载到单个页面实例中的可能泄漏吗？

Answer 1

我从未构建过这样的网站，所以我不知道这是否是最佳实践，但我会在响应中放置某种控制信息（如注释或 HTTP 标头），并让加载器脚本处理冗余/依赖性检查脚本标签并将其添加到标题中。