Организация файлов HTML и JavaScript

Question

Я знаю, что это хорошая практика для организации файлов путем их разделения на файлы. i.e, files.html и files.js. Тем не менее, я в последнее время смотрю на некоторые сайты и то, как их файлы организованы. Они, как правило, содержат крошечные фрагменты JavaScript, вставленные здесь и там внутри html-файла.

Теперь эти файлы, как правило, организованы очень определенным образом, одна вещь, которую я заметил, - это то, что я не вижу большого количества document.getElementById(id) или ids. Итак, мне любопытно узнать, что является лучшим способом захватить элементы с помощью JavaScript. Должен ли я захватить элементы в html-файле или в файле JavaScript и как?

Например, возьмите, например, вопрос, связанный с переполнением стека. Показаны аналогичные результаты. Что бы JavaScript будет выглядеть, если у меня есть что-то вроде следующего:

/* 
 
    SOMETHING LIKE THIS 
 
    but this would mean that I would have to grab the elements everytime 
 
    the event is fired (not sure this is a good idea) 
 
*/ 
 
var question; 
 
var similar_question; 
 
var ask_your_question; 
 
var maybe_already_answered; 
 

 
Questions.checkSimilarQuestions = function(){ 
 
    question = document.getElementById('question'); 
 
    similar_questions = document.getElementById('similar'); 
 
    
 
    ask_your_question = document.getElementById('aks-your-question'); 
 
    maybe_already_answered = document.getElementById('maybe-already-answered'); 
 
} 
 

 
/* 
 
    OR MAYBE SOMETHING LIKE THIS 
 
*/ 
 
(function(){ 
 
    var question = document.getElementById('question'); 
 
    var similar_questions = document.getElementById('similar'); 
 
    
 
    var ask_your_question = document.getElementById('aks-your-question'); 
 
    var maybe_already_answered = document.getElementById('maybe-already-answered'); 
 
    /* 
 
     Grab the rest of the elements and do something with them 
 
    */ 
 
    
 
    
 
}())

<div id='ask-your-question'> 
 
<input type='text' id='question'/> 
 
<div id='maybe-already-answered'> 
 
</div> 
 
</div> 
 

 
<div id='similar-questions'></div>

Answer 1

я собираюсь дать этому попытку, но не стесняйтесь, поправьте меня.

В приведенном выше примере показаны 2 разных объекта Объектный ориентированный JavaScript и функциональный JavaScript.

Многие встроенные JavaScript-коды на самом деле не встроены в статическую версию веб-страницы, а либо добавляются сервером, либо основным файлом JavaScript.

Другая причина, по которой вы не можете видеть document.getElementById(), потому что много, и я имею в виду почти всех, использует jQuery, который использует другой синтаксис. Насколько я знаю, нет другого способа получить элементы, кроме document.getElement (id, class, tagname) с ванильным JavaScript. Заявление JQuery будет выглядеть

$('#wrapper'); 

Best Practice?

Хорошо. Я склонен объявлять элементы, которые я буду использовать в качестве глобальных переменных. Я могу себе представить, что многие разработчики делают это, так как это проще написать

searchForm.appendChild(someElement);

чем

document.getElementById('#search-form').appendChild(someElement); 

каждый раз.

Я надеюсь, что это дало вам некоторое представление о том, чтобы :)

JSON, например Наилучшая практика в:

var elements = { 
    body: document.getElementsByTagname('body')[0], 
    wrapper: document.getElementById('wraper')}; 

и т.д ...