Javascript лучшие практики и документ готов

Question

Я занимаюсь разработкой веб-приложения и на этапах разработки добавляю несколько сценариев.

Я заметил, что количество сценариев много и, вероятно, будет увеличиваться.

Я обычно ставлю всезаключено в document.ready и выполняется при загрузке страницы.

Существует специальный скрипт, который устанавливает особый стиль для элемента ТОЛЬКО если класс присутствует в DOM.

Есть лиспособ запустить скрипт, только если конкретный элемент находится в дереве DOM?

Answer 1

Вы можете загрузить скрипт (через AJAX) или запустить код, когда это необходимо, проверив длину объекта jQuery, чтобы увидеть, существует ли элемент.

if($(selector).length > 0){ // if element is in DOM
    $.getScript('file.js'); // load file
    // or just run some code
    alert('element is here');
}

Или вы можете проверитьyepnope.js.

yepnope({
    test: $(selector).length,
    yep: 'file.js',
    callback: function(url, result, key){
      if(result){
        alert('element is here');
      }
    }
});

Answer 2

Да, я думаю, вы можете сделать что-то вроде готового документа:

if ($('#yourElement').length){
     $.getScript('ajax/yourjs.js', function(){
         console.log('Load was performed.');
     });
}

Answer 3

Чтобы проверить наличие элемента в jQuery, вы можете использовать $(#myElement").length;.Чтобы совместить это с вашим вопросом о добавлении CSS на основе этого, используйте:

if ($("#myelement").length > 0) {
    // element exists
    $(this).addClass("exists");
    $("#otherElement").css({
        "display": "block",
        "background-color": "#C00"
    });
}