0

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

我已经接管了一个使用几个不同 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>

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

是否没有具有所有可用功能的单个“主”jquery 文件？

当然，这比拥有几个不同的 jquery 文件更有意义吗？

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

谢谢，瑞安

4

3 回答 3

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。

我希望这会有所帮助。

于 2013-03-14T08:30:04.987 回答
0

您需要重新排序标签的顺序，甚至可能删除旧版本的 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>
于 2013-03-14T08:36:16.063 回答
0

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

但是您的方法很好，因为当您减少 HTTP 请求的数量时，您可以加快应用程序的速度，因为每个文件（JavaScript、CSS 等）都需要一个 HTTP 请求。您可以在Yahoo!的高性能网站规则中了解这一点。那里有许多用于 php 的缩小和组合库。例如，您可以使用CSS-JS-Booster，它可以减少 JavaScript 和 CSS 的 HTTP 请求数量。但是如果你用谷歌搜索，你可以找到更多这样的库，它们可能更适合你的需求。

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

于 2013-03-14T08:40:55.523 回答