在 HTML 页面中订购 js 文件的最佳方式是什么？答案

【问题标题】：Best way to order your js files in your HTML page?在 HTML 页面中订购 js 文件的最佳方式是什么？
【发布时间】：2014-05-28 01:13:03
【问题描述】：

在我的项目中，我引用了很多 js 文件，但由于顺序有时我得到对象引用错误..

<head>
    <!-- -------------CSS FILE REFERENCE START------------------------------------------------------------>
    <link rel="stylesheet" href="../Scripts/jquery.jqGrid-4.5.2/css/Custom.css" type="text/css" />
    <link rel="stylesheet" href="../Scripts/jquery.jqGrid-4.5.2/css/jquery.ui.theme.css" type="text/css" /> 
    <link rel="stylesheet" href="../Scripts/jquery.jqGrid-4.5.2/css/ui.jqgrid.css" type="text/css" />
    <link rel="Stylesheet" href="../styles/MYCSS1.css" type="text/css" />
    <link rel="Stylesheet" href="../styles/MYCSS2.css" type="text/css" />
    <link rel="stylesheet" href="../Scripts/CalendarControl.css"  type="text/css" />
    <link href="../styles/jqgridstyles/datepicker.css" rel="stylesheet" type="text/css" />
    <link href="../styles/jqgridstyles/jqGridPoc.css" rel="stylesheet" type="text/css" />
    <link href="../styles/jqgridstyles/printelement.css" rel="stylesheet" type="text/css" />
    <!----------- CSS FILE REFERENCE END------------------------------------------------------------------>
    <!-- -------------JS FILE REFERENCE START------------------------------------------------------------>
    <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/jquery-ui-1.9.1.js"></script>
    <script src="../Scripts/jquery.jqGrid-4.5.2/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../Scripts/styles/jquery.jqGrid.src.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>  
    <script type="text/javascript" src="../Scripts/CalendarControl.js"></script>
    <script src="../Scripts/MaintainConfigData/A1.js" type="text/javascript"></script>
    <script src="../Scripts/ViewAuditErrorInfo/T1.js" type="text/javascript"></script>
    <script src="../Scripts/MaintainConfigData/D1.js" type="text/javascript"></script>
    <script src="../Scripts/MaintainConfigData/D2.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/MaintainConfigData/D3.js"></script>
    <script type="text/javascript" src="../Scripts/MaintainConfigData/A2.js"></script>
    <script type="text/javascript" src="../Scripts/MaintainConfigData/D4.js"></script>
    <script type="text/javascript" src="../Scripts/MaintainConfigData/D5.js"></script>
    <script type="text/javascript" src="../Scripts/MaintainConfigData/D6.js"></script>
    <script type="text/javascript" src="../Scripts/MaintainConfigData/D7.js"></script>
    <script type="text/javascript" src="../Scripts/TestHarness/T2.js"></script>
    <script type="text/javascript" src="../Scripts/ViewAuditErrorInfo/DateTimepicker.js"></script>
    <script type="text/javascript" src="../Scripts/CD1.js"></script>
    <script type="text/javascript" src="../Scripts/jsonparsing.js"></script>
    <!--<script src="../Scripts/highcharts.js" type="text/javascript"></script>-->
    <script src="../Scripts/jqgridutility/jqGrid_Demo.js" type="text/javascript"></script>
    <script src="../Scripts/jqgridutility/printelem.js" type="text/javascript"></script>
    <script src="../Scripts/JScript1.js" type="text/javascript"></script>
    <script src="../Scripts/jqgridutility/Utils.js" type="text/javascript"></script>
    <!-- -------------JS FILE REFERENCE END------------------------------------------------------------>
    <style type="text/css">
        .ui-dialog-title {
            font-weight: bold !important;
            font-family: Tahoma, Verdana, Arial !important;
            font-size: 12px !important;
        }

        .ui-dialog-titlebar {
            color: #FFFFFF !important;
            text-decoration: none;
            font-weight: bold !important;
            height: 16px;
            background-color: #9A9AB3 !important;
            text-align: left;
            padding-left: 5px;
            padding-right: 0px;
            padding-top: 3px;
            padding-bottom: 3px;
            display: block;
            border-top-left-radius: 0px !important;
            border-top-right-radius: 0px !important;
            border-bottom-left-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
        }

        .ui-dialog-titlebar-close {
            visibility: hidden;
        }

        .ui-state-default .ui-icon {
            /* background-color:white;
            background-image:url(images/ui-icons_222222_256x240.png);*/
        }

        .ui-dialog .ui-dialog-content {
            overflow: inherit !important;
            font-family: Tahoma, Verdana, Arial !important;
            font-size: 12px !important;
        }

        .ui-dialog-titlebar ui-corner-all ui-helper-clearfix {
        }

        .ui-dialog .ui-dialog-titlebar {
            padding: 2px 2px 2px 2px;
        }
        .ui-jqdialog-content, .ui-jqdialog .ui-jqdialog-content 
        {
            background-color:White;
            font-family: Tahoma, Verdana, Arial !important;
            font-size: 12px !important;
        }
        .ui-jqdialog-content input.FormElement 
        {
            color: black;
        }
    </style>
    <title>MY WebApp</title>
</head>

我只是想知道是否有任何最佳实践或任何技巧来避免此类错误......当我将 highcharts.js 放在底部时它给了我错误但是当我评论它并将其转移到它的工作时

【问题讨论】：

它很好...但是任何人都可以给任何专家意见store.redstage.com/blog/2012/07/24/…
JS
如果我不知道确切的依赖顺序怎么办。
sitepoint.com/…
@RahulChowdhury：“如果我不知道确切的依赖顺序怎么办。” 然后找出来。你对你在你创作的页面上的内容负责。如果您不知道脚本依赖于什么，请找出答案。

标签： javascript jquery html dom scripting

【解决方案1】：

Best practice 是合并你的脚本文件，缩小/压缩结果，并且只有一个script 标签。（还有at the end，而不是head。）但这仍然存在顺序问题（组合它们的顺序）。

从根本上说，要了解您的各个脚本需要什么（例如，A 依赖于 B，因此 B 必须在 A 之前），并按要求的顺序放置文件。

在复杂的部署中，您可能会考虑使用 RequireJS 或类似名称，这有助于自动满足各个脚本的先决条件。

【讨论】：

谢谢伙计..但是你给 A 的例子取决于 B 然后把 B 放在 A 之前它有利于 1 对 1 依赖...但是 1 对多个依赖呢我的意思是一个复杂的场景.. .what 即使我不知道确切的依赖关系..你能解释一下 require.js
@RahulChowdhury：我非常怀疑你会遇到循环依赖（A 需要 B，B 需要 C，但 C 需要 A），所以再一次，这是一个知道你在放什么的问题在您的页面上，了解它所依赖的内容，并按正确的顺序排列。如果您有多个脚本都依赖于另一个脚本（典型示例：jQuery 插件依赖于 jQuery），只需确保它们依赖的脚本位于第一位。考虑一件事建立在另一件事上。 Re RequireJS，它是一个自动解决这些事情的模块系统，但它引入了自己的复杂性。详情请查看网站。

【解决方案2】：

脚本必须按需要加载。如果您在脚本加载时遇到错误，请继续按顺序向上推送脚本。

为了获得最佳实践，您必须捆绑和缩小脚本 - 签出Cassette。

【讨论】：

【解决方案3】：

您会在这里找到一篇很棒的文章：

http://code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners--net-5399

我还建议缩小你的 JS 和 CSS 文件

【讨论】：