我正在为 Web 应用程序构建一个多页面前端。 UI 的 javascript 最少,但我知道将有大量的 javascript 来处理后端,因此我正在尽最大努力使其尽可能稀疏和有限。
我想在仅使用一个缩小的 js 文件时有条件地同步执行 javascript。我有一些全局函数,但大多数代码是特定于页面的。每个页面的 body 元素中都有该页面的 id。例如,about.html 具有以下代码 <html>...<body id="about">...</body></html>
。
我知道加载 javascript 的各种异步方法,例如 require.js
甚至$.getScript
,但出于各种原因,我试图避开那条路。因为我正在预处理 HTML,所以我也不想将每个页面的脚本分解(尽管我可以),因为它是一个小文件,而且我不想创建一堆不同的 <script>
标签。我当前的解决方案是有条件地执行每个页面所需的 javascript,我的做法如下:
$(document).ready(function(){
//global.js code
if(document.body.id==='about'){
// about.js code
}
if(document.body.id==='home'){
//home.js code
}
// etc.
});
在构建过程中,所有js都存储在单独的文件中,因此它并不像这里看起来的那样愚蠢,因为只有一个include filename.js
位于条件语句体内。
条件可以防止在每个页面上执行不必要的代码。然而,当我这样做时,我突然意识到这样做实际上可能没有任何好处。我读到$(window).load
或$('body').load
事件可能会导致与 $(document).ready
发生冲突,而且它们都肯定更慢 - 就像 window.onload
一样。 (我测试过)。我想这将是我解决这个问题的首选方式。我读到的内容是真的吗?和/或,我正在做的事情到底有用吗?
最佳答案
对于页面特定事件,为什么不在元素引用中添加正文 ID?
$( '#about .do-something' ).on()...
如果您实际上是在每页的基础上执行非基于事件的代码
if( $( '#about' ).length ) { // trigger your code here }
它与您的解决方案并没有太大不同,只是它不需要您保留有关在何处执行哪些代码的 list 。无论哪种方式,两种解决方案都会被缓存。
关于javascript - 这种有条件的javascript加载方法有什么值(value)吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25538067/