一个JS文件多个页面 [英] One JS File for Multiple Pages
问题描述
scripts.js （HTTP请求越少越好）。所以，正如所料，一些页面需要一些脚本，有些则不是。 为了定位一个特定的页面，我使用类似于：
if（$（body＃share）。length> 0）{
//将与页面有关的逻辑与ID 'share'here ...
}
//文件/脚本继续...
其他或更好的建议？感谢！
澄清：我不是在寻找把多个JS文件合并成一个大的优点/缺点文件并保留多个单独的JS文件。答案肯定是取决于情况（我们知道）。我的问题是，假设我所有的JS逻辑被放到一个大文件中，那么当相应的页面被加载时，我怎样才能使一个特定的（块）脚本运行 ？我曾经做过的一种方法是使用 if（$（'＃id-of-target-element'））{/ *运行脚本* /} ;有没有更好的办法？
我喜欢 您的示例可能看起来像这样 Html 您的网页特定的javascript 保罗·爱尔兰人的Javascript使这个神奇发生 因此，您在上面直接看到的行将启动以下功能： 阅读他的博客文章以及与之相关的一些变体。 I typically put all the JavaScript scripts into one file e.g. To target a specific page, I use something like: Other or better suggestions? Thanks! Clarification: I was not looking for the pros / cons between consolidating multiple JS files into one big file and keeping multiple separate JS files. The answer for this is surely 'depends on the situation' (we know that). My question is, assuming all my JS logic is placed into one big file, how do I make a particular (chunk of) script runs only when the corresponding page is loaded? One way I used to do is using I like Paul Irish's approach... you don't have to follow it exactly, but the general idea is a very solid one. It might look something like this for your example Html Your page specific javascript Paul Irish's Javascript that makes the magic happen So the line you see directly above will kick off the following Have a read of his blog post and a few of the variations linked from it. 这篇关于一个JS文件多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< body id =share>
YourNamespace = {
share：{
init：function（）{
//将与页面有关的逻辑放在ID'分享'在这里...
}
}
}
UTIL = {
fire：function func，funcname，args）{
var namespace = YourNamespace; //在这里指明你的obj文字命名空间
funcname =（funcname === undefined）？ 'init'：funcname;
if（func！==''&&& namespace [func]&&& typeof namespace [func] [funcname] =='function'）{
namespace [func] [funcname] （参数）;
loadEvents：function（）{
var bodyId = document.body.id;
//先打通常。
UTIL.fire（'common'）;
//也可以做所有的课程。
$ .each（document.body.className.split（/ \s + /），function（i，classnm）{
UTIL.fire（classnm）;
UTIL.fire（classnm ，bodyId）;
}）;
UTIL.fire（'common'，'finalize'）;
}
};
//在这里踢一切
$（document）.ready（UTIL.loadEvents）;
YourNamespace.common.init（）
YourNamespace.share.init（）
YourNamespace.common.finalize（）
scripts.js (the less HTTP request, the better). So, as expected, some scripts are needed for some pages, some aren't.if ($("body#share").length > 0) {
// Place the logic pertaining to the page with ID 'share' here...
}
// The file / script continues...
if ($('#id-of-target-element')) { /* run the script */}; is there a better way?<body id="share">
YourNamespace = {
share : {
init : function(){
// Place the logic pertaining to the page with ID 'share' here...
}
}
}
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()
