Question

我可能会在这里问一个真正愚蠢的问题，但是找不到任何好的阅读材料让我放心。

我接管了一个使用多个不同jquery文件的项目。目前他的标题看起来像：

<head>
  <title>
     Capture New Order
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.css" />
  <link rel="stylesheet" href="/application/assets/CSS_JS/green.min.css" />
  <script src="/application/assets/CSS_JS/jquery-1.7.2.min.js"></script>
  <script src="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.js"></script>
  <link rel="stylesheet" href="/application/assets/CSS_JS/elf.css" media="screen">

  <link href="<?php echo base_url() ?>application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">
  <script src="<?php echo base_url() ?>application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
  <script src="<?php echo base_url() ?>application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>

  <link rel="stylesheet" href="<?php echo base_url() ?>application/css/sales.css" />

  <script type="text/javascript">
        $(function(){
          $("#customer").autocomplete({
            source: "get_customers"
          });
        });
  </script>
</head>

在这个例子中，我调用了4次各种jquery文件。但是，如果我删除这些jquery文件中的任何一个，它会破坏网站的功能。

是否没有单个'master'jquery文件具有所有可用功能？

肯定比拥有几个不同的jquery文件更有意义吗？

道歉，如果这是一个“简单”的问题，但只是想要一些清晰度。

谢谢，莱恩

Answer 1

首先，你加载主jQuery文件两次：jquery-1.7.2.min.js和jquery-1.9.1.min.js你只需要其中一个。该文件负责主要功能。文件jquery-ui用于UI-Elements。 jquery-mobile用于移动功能和UI。因此，如果删除其中一个文件，则此文件的功能将消失。但是一切都在jquery主文件上传递。

加载文件的顺序并不重要，只需先加载jquery.min.js。

我希望有所帮助。

Answer 2

你需要重新排序标签的顺序，甚至可能删除旧版本的jquery和ui

/* collect and keeping css links first*/
<link rel="stylesheet" href="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.css" />
<link href="<?php echo base_url() ?>application/css/ui-lightness/jquery-ui-1.8.custom.css" media="screen" type="text/stylesheet" rel="stylesheet">
<link rel="stylesheet" href="/application/assets/CSS_JS/green.min.css" />
<link rel="stylesheet" href="/application/assets/CSS_JS/elf.css" media="screen">
<link rel="stylesheet" href="<?php echo base_url() ?>application/css/sales.css" />
/* Moving the jQuery Mobile down below the jQuery core link
   and only load jQuery core + jQuery UI once
*/
<script src="<?php echo base_url() ?>application/scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="<?php echo base_url() ?>application/scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="/application/assets/CSS_JS/jquery.mobile-1.1.1.min.js"></script>

Answer 3

你不能将所有文件放在一起，因为在更新任何库时，最好更换一个文件，而不是在一个组合文件中搜索代码替换:)。

但是您的方法很好，因为您可以在减少HTTP请求数量时加快应用程序的速度，因为每个文件（JavaScript，CSS，...）都需要HTTP请求。您可以在雅虎的Rules of High Performance Web Sites中阅读此内容。有许多缩小 - 和用于php的组合库。例如，您可以使用CSS-JS-Booster，这样可以减少JavaScript和CSS的HTTP请求数量。但是如果你谷歌你可以找到更多这样的库，可能更符合你的需求。

还建议将JavaScript放在HTML文件的底部（并将CSS放在顶部）。如果你阅读上面的规则，你会发现更多这样的网站“助推器”。

单个页面上的多个jquery文件

3 个答案: