一个用于多页的JS文件
moe*_*oey 46 javascript filesystems
我通常将所有JavaScript脚本放在一个文件中scripts.js(例如,HTTP请求越少越好).因此,正如预期的那样,某些页面需要一些脚本,有些则不需要.
要定位特定页面,我使用以下内容:
if ($("body#share").length > 0) {
// Place the logic pertaining to the page with ID 'share' here...
}
// The file / script continues...
其他或更好的建议？谢谢!
澄清:我不是在寻找将多个JS文件合并到一个大文件中并保留多个单独的JS文件之间的优缺点.对此的答案肯定是"取决于具体情况"(我们知道).我的问题是,假设我的所有JS逻辑都放在一个大文件中,如何在加载相应的页面时才使特定的(大块)脚本运行？我过去常做的一种方法是使用if ($('#id-of-target-element')) { /* run the script */}; 有没有更好的办法？
Cha*_*ino 24
我喜欢Paul Irish的方法 ......你不必完全遵循它,但总体思路是非常坚实的.
对于您的示例,它可能看起来像这样
HTML
<body id="share">
您的页面特定的JavaScript
YourNamespace = {
share : {
init : function(){
// Place the logic pertaining to the page with ID 'share' here...
}
}
}
保罗爱尔兰的Javascript使魔术发生
UTIL = {
fire : function(func,funcname, args){
var namespace = YourNamespace; // indicate your obj literal namespace here
funcname = (funcname === undefined) ? 'init' : funcname;
if (func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function'){
namespace[func][funcname](args);
}
},
loadEvents : function(){
var bodyId = document.body.id;
// hit up common first.
UTIL.fire('common');
// do all the classes too.
$.each(document.body.className.split(/\s+/),function(i,classnm){
UTIL.fire(classnm);
UTIL.fire(classnm,bodyId);
});
UTIL.fire('common','finalize');
}
};
// kick it all off here
$(document).ready(UTIL.loadEvents);
因此,您在上面直接看到的行将启动以下内容
YourNamespace.common.init()
YourNamespace.share.init()
YourNamespace.common.finalize()
阅读他的博客文章以及与之相关的一些变体.
- 我将使用`data-*`属性,而不是使用body id,这将允许您在页面之间共享JS代码.例如,如果你有两个页面:page1 with:`<body data-page ="page1 category1">`,page2 with:`<body data-page ="page2 category1">`,那么这些页面都共享JS (category1),并具有特定于页面的JS(page1和page2).显然,您需要修改JS代码以按空格分割数据页属性并循环遍历每个值,按顺序执行方法. (2认同)
Saj*_*ood 12
已经提出了类似的问题,正确的答案是,而且永远都是
这取决于实际情况.
但是,如果您关注的是最小化往返时间(RTT),则可以肯定
将外部脚本组合到尽可能少的文件中可以减少RTT并减少下载其他资源的延迟.
保持尽可能少的是好的,但是你不一定要严格地将它保存在一个文件中.
我们来看看为什么会如此.
虽然将代码分区为模块化软件组件是一种很好的工程实践,但是将模块一次导入HTML页面可能会大大增加页面加载时间.首先,对于具有空缓存的客户端,浏览器必须为每个资源发出HTTP请求,并产生相关的往返时间.其次,大多数浏览器会在下载和解析JavaScript文件时阻止加载页面的其余部分.
这些图像更清楚地表明为什么将大量JavaScript文件合并到较少的输出文件中可以大大减少延迟:
所有文件都是连续下载的,总共需要4.46秒才能完成.
将13个js文件折叠为2个文件后:
相同的729千字节现在只需1.87秒即可下载
由Siku-Siku.Com给出的澄清后编辑: 对不起!我完全误解了你的问题.我不知道有什么更好的方法可以在加载相应的页面时使特定的(块)脚本运行.我认为你的方式已经足够好了.
- 这有点过时了.大多数现代浏览器(包括IE8 +)下载JS并发,而不是串行. (4认同)
你的建议似乎没问题.但是,我会使用HTML 5数据属性来标记每个页面,如下所示:
<body data-title="my_page_title">
然后,您可以通过检查此属性(jQuery 1.4.3以后)来编写条件javascript代码:
if ($("body").data("title") === "my_page_title") {
// Place the logic pertaining to the page with title 'my_page_title' here...
}
这允许您以合理的方式系统地对特定页面的所有代码进行分组
另一种选择是你可以在HTML代码中使用
<script>
callYourJSFunctionHere(); /*Things you would want to happen on Page load*/
</script>
这将遵循页面的正常流程.因此,如果您正在使用页面上<script>的元素,则在浏览器加载所有元素之后,您需要将此部分放在页面底部.
我不是100%肯定这比你现有的解决方案更有效,但另一方面,它会告诉有人看你的HTML页面在页面加载时将运行什么JavaScript.这可能对维护道路有所帮助....没有那么多关于页面加载时脚本运行的猜测游戏.
希望这可以帮助!
- @Stobor两个都不是一回事.$(document).ready()必须执行$(document),解析你输入ready()的函数,并在写入的地方调用ready().如果将代码放在页面的末尾,则在解析之前的所有内容之前不会执行该代码.此外,$(document).ready()会一直等到整个页面加载,包括图像等外部资源.将代码放在页面末尾的等效(在功能方面,而不是处理顺序)将只是设置window.onload. (3认同)
- @Skier88:错误,document.ready(或jQuery的$(function(){...});)一旦加载DOM就运行传递的函数,它不会等待加载文件等外部内容!Window.onload确实...请参阅http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready (2认同)
| 归档时间： |
|
| 查看次数： |
48949 次 |
| 最近记录： |