Лучший способ заказать JS-файлы на HTML-странице?

0

В моем проекте я имею в виду столько 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, это дает мне ошибку, но когда я прокомментирую это и переложил его на работу

  • 0
    Это хорошо ... но может кто-нибудь дать какие-либо эксперты посмотреть store.redstage.com/blog/2012/07/24/…
  • 0
    Тег JS <script> будет выполнен немедленно, поэтому я думаю, что это проблема зависимости, если она размещена не в правильной последовательности
Показать ещё 3 комментария
Теги:
scripting
dom

3 ответа

1

Лучшая практика - объединить ваши файлы сценариев, минимизировать/сжать результат и иметь только один тег script. (И в конце, не в head.) Но это все еще оставляет вопрос о порядке (порядок, в котором вы их объединяете).

По существу, знайте, что вам нужны ваши индивидуальные скрипты (например, A полагается на B, поэтому B должен быть до A) и помещать файлы в требуемый порядок.

В сложном развертывании вы можете посмотреть на использование RequireJS или подобное, что может помочь автоматизировать выполнение предпосылок отдельных скриптов.

Поделиться
  • 0
    Спасибо, но пример, который вы приводите A, зависит от B, затем ставьте B перед A, это хорошо для зависимости от 1 до 1 ... но как насчет зависимости от 1 до многих, я имею в виду сложный сценарий ... что даже если я не знаю Точная зависимость .. И можете ли вы объяснить немного require.js
  • 0
    @RahulChowdhury: Я очень сомневаюсь, что вы столкнетесь с циклическими зависимостями (A нужен B, B нужен C, но C нужен A), поэтому, опять же, нужно знать, что вы помещаете на свою страницу, зная, на что она опирается и положить вещи в правильном порядке. Если у вас есть несколько сценариев, все из которых полагаются на другой (типичный пример: плагины jQuery зависят от jQuery), просто убедитесь, что на первом месте стоит тот, на который они полагаются. Подумайте о том, что одно строится на другом. Re RequireJS, это модульная система для автоматического разрешения этих проблем, но она имеет свою сложность. Смотрите сайт для деталей.
0

Скрипты должны быть загружены, чтобы они были необходимы. Если вы получаете ошибки при загрузке скрипта, продолжайте нажимать скрипт в порядке.

Для наилучшей практики вам необходимо связать и минимизировать scripts- Check Cassette.

Поделиться
-1

Здесь вы найдете замечательную статью:

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

Также я рекомендую минимизировать файлы JS и CSS

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню