Question

我正在开发一个包含几页和一些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不同的文件，但最好将这些脚本直接放在头脑中。

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

if($("div.slideshow").length>0){
    //setInterval goes here
}

Answer 5

这里有两个问题。

予。回答你的问题无法回答你的主要问题！您的问题是您当前的代码！。

即使您没有.slideshow元素
您的代码不允许您在页面上放置多个幻灯片。
你当前的代码让你问，你应该把你的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

II。 Split vs Concat

通常认为，您应该将脚本连接到一个文件中，以最大限度地减少请求并加快页面加载速度。大多数人不知道的是，这个规则是在2006年之前建立的，浏览器改变和改进了很多。汇总到一个JS文件可能仍然有利于总页面加载，但它也意味着加载孔JS需要比加载JS更长的时间，如果它将分成4个部分（4个部分可以并行加载，这更快，但也意味着，其他文件必须排队等待下载）。但是这里有一个很大的问题：重要的是，您的舞台旋转木马的JS应该尽快加载，还是想要在页面底部附近加载图片。从我的测试来看，通常最好有多个JS文件（3-8取决于每个文件的大小）。简而言之：您应该连接小文件并拆分大而重要的文件。但重要的是，这不是没有concat / build脚本并加载6-8个小JS文件的借口......

将所有脚本保存在单个文件中是一种好习惯吗？

5 个答案: