Fatal编程技术网
  • javascript/
  • Javascript 在HTML页面中排序js文件的最佳方法？

Javascript 在HTML页面中排序js文件的最佳方法？

javascript jquery html dom scripting

Javascript 在HTML页面中排序js文件的最佳方法？,javascript,jquery,html,dom,scripting,Javascript,Jquery,Html,Dom,Scripting,在我的项目中，我引用了太多的js文件，但由于顺序的原因，有时会出现对象引用错误 <head> <!-- -------------CSS FILE REFERENCE START------------------------------------------------------------> <link rel="stylesheet" href="../Scripts/jquery.jqGrid-4.5.2/css/Custom.css"

在我的项目中，我引用了太多的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>


.ui对话框标题{
字体大小：粗体！重要；
字体系列：Tahoma、Verdana、Arial！重要；
字体大小：12px！重要；
}
.ui对话框标题栏{
颜色：#FFFFFF！重要；
文字装饰：无；
字体大小：粗体！重要；
高度：16px；
背景色：#9A9AB3！重要；
文本对齐：左对齐；
左侧填充：5px；
右边填充：0px；
垫面：3件；
垫底：3件；
显示：块；
边框左上半径：0px！重要；
边框右上角半径：0px！重要；
边框左下半径：0px！重要；
边框右下半径：0px！重要；
}
.ui对话框标题栏关闭{
可见性：隐藏；
}
.ui状态默认.ui图标{
/*背景色：白色；
背景图片：url（图片/ui-icons_2222_256x240.png）*/
}
.ui对话框.ui对话框内容{
溢出：继承！重要；
字体系列：Tahoma、Verdana、Arial！重要；
字体大小：12px！重要；
}
.ui对话框标题栏ui角所有ui帮助程序clearfix{
}
.ui对话框.ui对话框标题栏{
填充：2×2×2×2×2×2；
}
.ui jqdialog内容.ui jqdialog.ui jqdialog内容
{
背景色：白色；
字体系列：Tahoma、Verdana、Arial！重要；
字体大小：12px！重要；
}
.ui jqdialog content input.FormElement
{
颜色：黑色；
}
我的网络应用
我只是想知道是否有任何最佳实践或技巧可以避免此类错误…当我将highcharts.js放在底部时，它会给我错误，但当我对它进行注释并将其上移时，它的工作就是合并脚本文件，缩小/压缩结果，并且只有一个
脚本
标记。（而且，不是在
标题中，而是在
中），但这仍然留下了顺序问题（组合它们的顺序）

从根本上说，要知道您的单个脚本需要什么（例如，A依赖于B，所以B必须在A之前），并按要求的顺序放置文件


在复杂的部署中，您可以考虑使用或类似的方法，这有助于自动满足单个脚本的先决条件。
必须按所需顺序加载脚本。如果在脚本加载中出现错误，请继续按顺序向上推脚本

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

查看。
您将在此处找到一篇精彩的文章：




此外，我还建议缩小JS&CSS文件的大小，这是一个很好的文件……但有谁能给任何专家提供JS标记将立即执行的视图，所以我认为这是依赖性问题，如果它的顺序不正确，如果我不知道依赖性的确切顺序，该怎么办。@RahulChowdhury：“如果我不知道依赖性的确切顺序，该怎么办。”然后找出答案。你要对你写的东西负责。如果你不知道脚本依赖什么，找出答案。谢谢，伙计。但是你给出的例子A依赖于B，然后把B放在A之前。这对1对1的依赖性很好……但是1对多的依赖性呢？我是说一个复杂的场景……即使我不知道确切的依赖性……你能解释一下吗。js@RahulChowdhury：我很怀疑你会遇到循环依赖（A需要B，B需要C，但C需要A），所以再次强调，这是一个知道你在页面上放什么的问题，知道它依赖什么，并把事情按正确的顺序排列。如果你有多个脚本都依赖于另一个（典型的例子：jQuery插件依赖于jQuery），只需确保他们所依赖的是第一位。从一件事建立在另一件事上考虑。Re RequireJS，这是一个自动解决这些问题的模块系统，但它引入了自身的复杂性。有关详细信息，请参阅网站。