В моем проекте я имею в виду столько 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, это дает мне ошибку, но когда я прокомментирую это и переложил его на работу
Лучшая практика - объединить ваши файлы сценариев, минимизировать/сжать результат и иметь только один тег script
. (И в конце, не в head
.) Но это все еще оставляет вопрос о порядке (порядок, в котором вы их объединяете).
По существу, знайте, что вам нужны ваши индивидуальные скрипты (например, A полагается на B, поэтому B должен быть до A) и помещать файлы в требуемый порядок.
В сложном развертывании вы можете посмотреть на использование RequireJS или подобное, что может помочь автоматизировать выполнение предпосылок отдельных скриптов.
Скрипты должны быть загружены, чтобы они были необходимы. Если вы получаете ошибки при загрузке скрипта, продолжайте нажимать скрипт в порядке.
Для наилучшей практики вам необходимо связать и минимизировать scripts- Check Cassette.
Здесь вы найдете замечательную статью:
http://code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners--net-5399
Также я рекомендую минимизировать файлы JS и CSS