组织HTML和JavaScript文件

我知道通过将文件分割成文件来组织文件是一种很好的做法。i、 e、files.html和files.js。然而，我最近一直在看一些网站和他们的文件组织方式。它们往往包含在html文件中插入的少量JavaScript

现在，这些文件倾向于以一种非常特殊的方式组织，我注意到的一点是，我没有看到太多的

document.getElementById（id）

或id。因此，我很想知道使用JavaScript获取元素的最佳方法是什么。我应该抓取html文件或JavaScript文件中的元素，以及如何抓取

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

/*
像这样的
但这意味着我每次都必须抓住元素
事件已触发（不确定这是否是一个好主意）
*/
var问题；
var-相似问题；
问你的问题；
可能你已经回答了；
Questions.checkSimilarQuestions=函数（）{
question=document.getElementById（'question'）；
类似的问题=document.getElementById（“类似”）；
ask_your_question=document.getElementById（'aks-your-question'）；
maybe_ready_answered=document.getElementById（'maybe-ready-answered'）；
}
/* 
或者像这样的
*/
（功能（）{
var question=document.getElementById（'question'）；
var similar_questions=document.getElementById（'similar'）；
var ask_your_question=document.getElementById（'aks-your-question'）；
var maybe_ready_answered=document.getElementById（'maybe-ready-answered'）；
/*
抓住其余的元素，用它们做点什么
*/
}（））

---

我将尝试一下，但请随意更正

上面的示例显示了两种不同的东西：面向对象的JavaScript和函数式JavaScript

许多内联JavaScript代码实际上并没有内联到web页面的静态版本中，而是由服务器和/或主JavaScript文件添加的

您可能看不到document.getElementById（）的另一个原因是，很多人（我的意思是几乎所有人）都使用jQuery，它使用不同的语法。据我所知，除了使用普通JavaScript获取document.getElement（id、类、标记名）之外，没有其他方法可以获取元素。jQuery声明如下所示

$('#wrapper');

最佳实践？

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

searchForm.appendChild（someElement）


每一次

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

JSON示例：

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

等等。
谢谢您的回复。我想我忘了提到jQuery了。我也没有看到太多jQuery（“选择器”）。我猜是因为你说的。。。把它放入变量中。但是我应该把这些变量放在哪里，放在对象中还是放在普通的单个变量中？作为旁注，document.querySelector（）和document.querySelector（）可以在普通javascript中使用jquery选择器语法来选择节点。没问题。那取决于你的喜好。但是，即使您像我一样更喜欢函数式JS，我仍然会将所有元素添加到全局声明的符号样式对象（JSON）中。这使您的代码更干净，更易于阅读，便于将来的开发。这也意味着，如果你在网页上更改了某些内容，你只需更改一次即可。就我个人而言，我尽量不使用jQuery，因为它速度慢得多，而且使相对简单的事情过于复杂。@Shilly是的。“忘了吧！”尼尔斯：我更喜欢纯JavaScript。如果要求不太高，您能告诉我它在一个全局声明的符号样式对象（JSON）中是什么样子吗？
var elements = {
    body: document.getElementsByTagname('body')[0],
    wrapper: document.getElementById('wraper')};