Question

我知道通过将文件分成文件来组织文件是一种很好的做法。即，files.html和files.js。但是，我最近一直在关注一些网站及其文件的组织方式。它们往往包含在html文件中插入的一小部分JavaScript。

现在，这些文件往往以非常特殊的方式组织，我注意到的一件事是我不会看到document.getElementById(id)或ids的大部分内容。所以，我很想知道使用JavaScript获取元素的最佳方法是什么。我应该抓取html文件或JavaScript文件中的元素，以及如何？

例如，以Stack Overflow中的问题发布为例。显示了类似的结果。如果我有以下内容，那么JavaScript会是什么样子：

＆＃13;

/* 
  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
    */
  
  
}())

＆＃13;

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

＆＃13;

Answer 1

我打算尝试一下，但请随时纠正我。

上面的示例显示了两个不同的东西面向对象的JavaScript和功能JavaScript。

许多内联JavaScript代码实际上并不在网页的静态版本中内联，而是由服务器和/或主JavaScript文件添加。

你可能看不到document.getElementById()的另一个原因是因为很多，我的意思是几乎每个人都使用jQuery，它使用不同的语法。据我所知，没有其他方法可以使用vanilla JavaScript获取元素而不是document.getElement（id，class，tagname）。 jQuery声明看起来像

$('#wrapper');

最佳做法？

好。我倾向于声明我将用作全局变量的元素。我可以想象很多开发人员都会这样做，因为它更容易编写

searchForm.appendChild(someElement);

比

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

每一次。

我希望这能让你对最佳实践有所了解：）

JSON示例：

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

等...

组织HTML和JavaScript文件

1 个答案: