Question

在我的项目中，我引用了很多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置于底部时它会给我错误但是当我评论它并将其转移到其工作

Answer 1

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

从根本上讲，请注意您的个人脚本需要什么（例如，A依赖于B，因此B必须在A之前），并按所需顺序放置文件。

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

Answer 2

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

对于最佳做法，您必须捆绑和缩小脚本 - 检查Cassette。

Answer 3

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

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

另外我建议缩小你的JS＆amp; CSS文件

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

3 个答案: