Лучшая практика в интеграции действий JavaScript с DOM - PullRequest
Новая
       10

Лучшая практика в интеграции действий JavaScript с DOM

0 голосов
/ 30 марта 2009

Предположим, например, документ xHTML, как показано ниже: 

<html>
<head>
</head>
<body>
<div id="wrapper">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./application.js"></script>
</html>

Мы будем выполнять запрос GET AJAX к PHP-сценарию, который будет запрашивать базу данных и возвращать ответ для заполнения элемента TABLE, который будет отформатирован как сортируемая сетка через JavaScript.

Кроме того, мы хотим, чтобы весь наш JavaScript был в одном файле, который можно легко включить, как показано выше.

Варианты:

  1. Пусть PHP-скрипт вернет TABLE элемент, заполненный всеми данные. Используйте функцию jQuery live() активно следить за новым TABLE элементы в DOM и применить функциональность сортируемой сетки, когда она обнаруживает их. Этот метод позволяет нам манипулировать контентом, перезапущенным из запроса AJAX в PHP, и возвращает заполненную семантическую таблицу в родительский документ.

  2. Вставьте элемент TABLE в скрипт, указанный выше, но оставьте его содержимое пустым. jQuery немедленно применяет функцию сортируемой сетки, как только документ будет готов, хотя контент пока не существует. Затем запрос GET вернет ответ JSON, который заполнит базу данных.

Любые другие мнения / лучшие практики / случаи использования, которыми вы можете поделиться для такого рода вещей? Я только обсуждаю TABLE здесь, но мы обсуждали проблему с рядом вещей: лайтбоксы, выпадающие меню и т. Д.

В настоящее время мы не используем функцию live() в jQuery, а элементы DOM не существуют в родительском документе. Таким образом, мы должны поместить небольшие блоки Javascript в верхней части каждого из наших отдельных видов. Несмотря на небрежность, это позволило нам загружать функциональность только тогда, когда это необходимо, но, очевидно, ее сложно поддерживать.

Ответы [ 4 ]

1 голос
/ 30 марта 2009

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

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

Итак, если это звучит правильно, то вот что я буду делать (для любых представлений, загружаемых динамически) ...

Итак, давайте предположим, что у вас есть код, который вы предоставили: 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"z></script>
<script type="text/javascript" src="./application.js"></script>
</head>
<body>
    <div id="wrapper">
          <div id="sidebar"></div>
          <div id="content"></div>
    </div>
</body>
</html>

Если вы загрузили некоторый контент в div '#content' (скажем, таблицу), когда страница полностью загружена, а затем вы хотели отсортировать эту таблицу, не помещая скрипт для этого в HTML-код, возвращаемый из AJAX, у вас может быть следующий код в вашем основном ('./application.js') файле: 

$(function() {
    load_table();
    $('#content #my_table').live('table_loaded',function() {
        $(this).sort(); // or whatever your sorting method is...
    });
});

function load_table() {
    $.get('mysite.php',{foo:bar,bar:foo},function(data) { 
        $('#content').html(data).find('#my_table').trigger('table_loaded');
    });
}

Используются пользовательские события jquery и событие live (). Я не проверял это, но теоретически это должно сработать.

ОБНОВЛЕНИЕ: Я проверил это, и он отлично работает с использованием jquery 1.3.2:)

1 голос
/ 30 марта 2009

Плагин jQuery jqGrid может соответствовать всем требованиям, динамически загружать данные через ajax, может быть интегрирован с любой серверной технологией, позволяет создавать темы с роликом темы. 1005 *

Чтобы обновить таблицу самостоятельно, вы можете выполнить обратный вызов с большинством функций jquery ajax после завершения запроса. Например, если у вас есть это в вашем документе: 

<div id="output">
   <table>...</table>
</div>

Вы можете загрузить результат с помощью функции jquery Ajax Load : 

$('#output').load('results.php',{arg:'val'},updateSort);

function updateSort(){
    $("#output > table").sort();
}

Обычно я продолжаю набор: 

$('#output')
    .html('<div class="centered_padded_msg_class">Loading data...</div>')
    .load('results.php',{arg:'val'},updateSort);

function updateSort(){
    $("#output > table").sort();
}

Удачи, -Matt

0 голосов
/ 30 марта 2009

В настоящее время я поддерживаю веб-приложение, основанное на методе live(), а также с элементами DOM, которых нет в родительском документе, и, похоже, все в порядке. Я пытался вставлять фрагменты кода в страницы «результатов», но очень сложно обновить их все, и иногда вы можете пропустить мою ошибку один или два, а затем спросить себя «что я сделал не так?» и искать проблему в течение нескольких часов.

Метод live() очень удобен, потому что вы можете хранить весь код в одном конкретном файле, и, очевидно, его легче поддерживать, чем решение, описанное выше.

Приложение, о котором я говорил, сейчас находится в производстве, и оно ни разу не вышло из строя, поэтому я очень доволен этим решением (хотя странно, я использую тот же шаблон, заполняя элемент TABLE данными и показывая это как сетка:)

0 голосов
/ 30 марта 2009

ИМХО, страница должна быть как можно более полной при первом показе, чтобы избежать лишних запросов. Поэтому я голосую за первый метод.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...