具有多个DOMContentLoaded事件组织的不引人注意的普通Javascript

时间:2012-11-18 16:18:19

标签: javascript unobtrusive domcontentloaded

也许这是一个愚蠢的问题,但我对JavaScript非常困惑。我尽量使用this代码组织,不引人注目的JavaScript。我在使用谷歌地图的Ruby on Rails上建立了一个网站。

我的场景:假设我有一个非常庞大的网站,在不同的页面中,我需要启动执行某些操作的JavaScript脚本。

问题在于,无论用户访问哪个页面,我都必须将我网站的所有JavaScript代码添加到用户的浏览器中。例如,假设我有使用巨大JavaScript代码的页面A和使用一些微小JavaScript代码的页面B.据我所知,在页面B中,用户必须检索所有JavaScript代码(即,对于页面A和B)。这有点不切实际吗?

此外,对于这两个页面,JavaScript都由document.addEventListener("DOMContentLoaded", function, false);函数启动。但是,页面A的功能假设有一个名为“pageA”的div(它用作引用以便通过js脚本修改它或添加元素),类似地,页面B的功能假设有一个名为“div”的div。页面B”。因此,当我在页面B上时,我收到js错误,表示没有“pageA”的元素。我怎么能避免这种情况?

鉴于以下事实:对于每个页面,我必须使用我的整个JavaScript代码(即所有页面)加载用户如何启动(即,在页面加载时立即启动而不是在用户事件之后启动发生特定于页面的JavaScript代码没有任何此类错误?我真的很困惑!

Wooho响应非常快 thanx 伙计们!但我从未说过我将整个js代码写在一个单独的文件中。相反,我使用RoR的组织! (btw将所有文件合并为一个文件)。为了澄清我的问题,在不同的文件中,我为页面A发起事件,为页面B(或C等......)发起事件。一旦DOMContentLoaded事件发生,代码就会触发。但是,当用户在页面B 时,我不想触发第A页的事件。或者类似地,我想只为页面B加载js(这样就不会激活页面A的事件)。我怎么能这样做?

PS:如果你认为一个更好的头衔,请随时提出建议!

1 个答案:

答案 0 :(得分:1)

如果您将Javascript代码保存在单个文件中,则只需在用户请求其网站的第一页时加载一次(甚至可能编译一次,请参阅this)。然后浏览器将使用缓存副本,除非您不允许缓存(Web服务器的错误配置可以这样做)。

当您执行类似(JQuery)的操作时:

$('#nosuchid').something();

或者例如

$('.nosuchclass').each(function(i, el) { ... });

如果标记中不存在匹配元素,则不会出现错误,也不会产生任何影响。如果你使用document.getElementById(),如果没有元素匹配,它将返回null,你将不得不处理这种情况。如果你这样做,那就不会有任何错误。

可以想象,跳过的代码不需要花时间执行,所以也没有理由期待性能问题。