1

我正在开发一个带有几页和一些 javascript (jQuery) 脚本的简单网站。对于 CSS，我使用了单个 .css 文件，其中包含每个页面的所有 css，并且我想对脚本执行相同的操作。所以在我的页面头部我有这个：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="scripts.js"></script>
<link href="CSS.css" rel="stylesheet" type="text/css">

在这个站点中不要使用太多的 javascript，例如在主页中，我只有一种幻灯片，具有简单的连续滑动背景，我是这样制作的：

var bgpos=1
function slide() {
$("div.slideshow").css("background-position","0px "+bgpos+"px")
bgpos++ 
}
setInterval(function(){slide()},35)

我还在其他页面中使用了一些 javascript，但我想知道将所有脚本放在一个链接到每个页面的单个文件中是否是一种好习惯。这是我正在考虑的主要问题：如果我对每个页面都使用该文件，上面的代码会在没有 div.slideshow 的情况下在另一个页面中无用地运行吗？
解决这个问题的最佳方法是什么？
我喜欢 javascript 与 html 位于不同文件中的事实，但也许最好将这些脚本直接放在头部。

4

5 回答 5

2

在生产环境中捆绑/缩小脚本是一种很好的做法。但是，在开发过程中，建议尽可能保持它们的可维护性。只要文件不是太大并且代码是模块化的，拥有脚本文件的开发版本就可以了。一旦你的脚本开始变得太大，将它们分成功能模块是明智的。让您的捆绑过程担心为生产场景组合文件。

于 2013-10-31T21:27:34.707 回答
1

在生产中，将所有文件保存在一个缩小文件中是一种很好的做法。由于这个浏览器要求服务器提供一个文件，而不是做许多无意义的请求。但是在开发环境中，您可以拥有任意数量的文件。

于 2013-10-31T21:27:47.790 回答
1

对于这种情况，我会将函数放在另一个文件中，然后在setInterval需要它的页面上调用。该函数只是一个定义，因此即使该文件包含在另一个页面上，如果不调用该函数也不会“无用地运行”。

于 2013-10-31T21:29:01.953 回答
0

你在这里有两个问题。

一、回答你的问题并没有回答你的主要问题！您的问题是您当前的代码！

  1. 即使您没有 .slideshow 元素，您 setInterval 也会运行
  2. 您的代码不允许您在一个页面上拥有多个幻灯片。
  3. 您当前的代码让您问，您是否应该将 JS 拆分为片段，这意味着您的代码不好，因为它决定了您的连接/缩小过程

在小部件/模块中思考是一种很好的编程风格，它可以有尽可能多的“实例”。使用 JS 有很多方法可以实现这一点。一种简单的方法是使用闭包。将您的代码重写为如下内容：

$(function(){
    $("div.slideshow").each(createSlide);
});

function createSlide(){
    var slideElement = $(this);
    var bgpos = 1;
    setInterval(function slide() {
        slideElement.css("background-position","0px "+bgpos+"px")
        bgpos++ 
    }, 35);
}

现在，您的代码仅在 .slideshow 存在时运行 + 您可以在一页上拥有任意数量的幻灯片，而无需创建全局 bgpos var。这是一种简单而好的技术，您的代码只是由一个函数包装，该函数充当一个普通的模块包装器，这个函数中发生的事情留在这个函数中：-D

二、拆分与连接

普遍接受的是，您应该将脚本合并到一个文件中，以最大限度地减少请求并加快页面加载速度。大多数人不知道的是，这条规则是在 2006 年之前制定的，此后浏览器发生了很大的变化和改进。合并到一个 JS 文件中可能仍然对总页面加载有好处，但这也意味着加载孔 JS 比加载 JS 需要更长的时间，如果它被分成 4 个部分（可以并行加载 4 个部分，这样更快，但是也意味着，其他文件必须排队才能下载）。但这里有一个大问题：重要的是，您的舞台轮播 JS 应该尽快加载，还是您想在页面底部附近加载图片。根据我的测试，最好有多个 JS 文件（3-8 个，具体取决于每个文件的大小）。简而言之：您应该连接小文件并拆分大而重要的文件。但重要的是，这不是没有 concat/build 脚本和加载 6-8 个小 JS 文件的借口......

于 2013-12-05T00:14:34.787 回答
0

您可以检查您正在操作的元素是否存在，这样如果该页面中不存在该元素，您就不会运行所有代码：

if($("div.slideshow").length>0){
    //setInterval goes here
}
于 2013-10-31T22:46:14.077 回答