我应该如何从我的 javascript 中引用 DOM 元素？答案

【问题标题】：How should I reference DOM elements from my javascript?我应该如何从我的 javascript 中引用 DOM 元素？
【发布时间】：2012-08-14 12:39:47
【问题描述】：

我不得不承认，我一直对“正确的”不显眼的 javascript 有点困惑。我知道您想将脚本从标记中移出，并且没有标记引用您的脚本（当然，原始脚本引用除外！）但我看不出这在实践中是如何工作的。

我知道如何让您的标记不引用代码，但我觉得脚本中 DOM ID 中的硬编码很脏。这是一个例子：

<script src="....awesome.js"></script>

<button id="primaryAction">Click me for something awesome!</button>
<labal id="resultText"></label>

//in awesome.js
awesome = function(){

    init = function(){
        //pretend we are doing something incredible here
        //and then we hook the button up

        $('#primaryAction').click(function(){
            $('#resultText').val(result());
        });    
    };

    result = function(){
        //here something awesome happens and we return the result
        return "Joe";
    };

    return {
        init: init
    }

}();

这应该是非常有代表性的东西，对吧？所以我的困惑来自两个地方。

我应该从哪里调用 awesome.init()？
我觉得从 javascript 中引用控件 ID 是错误的，但在脚本中指定类并要求标记使用它们才能工作也感觉错误。应该怎么做？两者都让我觉得突兀。 init() 函数是否应该采用 {button:'#primaryAction', result:'#resultText'} 之类的方法但又回到了 #1..应该从哪里调用 Init？

如果我在这方面做错了，请引导我走上这条路。

【问题讨论】：

你的所有变量在哪里声明？
不要对在 JS 代码中使用元素 ID 感到压力太大，在某种程度上 没有任何问题。关于在哪里调用awesome.init()，因为它引用了一个DOM元素，你需要在元素被解析之后调用它，所以要么从文档就绪处理程序调用它，要么从一个脚本块调用它出现在元素之后 - 将脚本块放在正文末尾是标准做法（嗯，是几种相互竞争的标准做法之一）。
@nnnnnn 我会直接从标记中调用 awesome.init，还是应该将它放在脚本本身的底部 $(function(){awesome.init();});
如果它在底部的脚本中，您也不需要 document.ready，所以只需 awesome.init(); 即可。如果你已经在页面的其他地方有一个 document.ready 处理程序，你可以将它添加到那里，以将所有 onready 的东西放在一起。
@nnnnnn 你应该把所有这些都集中在一个答案上

标签： javascript html design-patterns

【解决方案1】：

Backbone Js 是解决此问题的 MVC 方法。

警告：对于您当前的示例，这可能有点过头了。

另见：what-is-backbone-js

【讨论】：

【解决方案2】：

jQuery

在您的元素上放置 id（或类）属性并在脚本中引用这些相同的元素确实是正确的 JQuery 方法，但是有一些方法可以减少硬编码，您应该使用它们。

您可以使用 jQuery 遍历获得所需的元素。这将大大减少您需要的 id 数量（理想情况下，每个功能单元只需一个）http://learn.jquery.com/using-jquery-core/traversing/

例如。

<form class="edit">
  <button>Hello</button>
  <label>Hi there</label>
</form>

$(function() {
  var $form = $('form.edit');
  var $button = $form.find('button');
  var $label = $form.find('label');
  // your code here
});

至于将 init 函数放在哪里，如果您在 HTML 的底部调用 init 就可以了。或者，如果您将其传递给 $，它将在 onDomReady 上运行，即当 DOM 准备好渲染时，如下所示：

$(function() {
  init();
  // anything else you need to do
});

或者只是：

$(init)

JQuery 插件

JQuery 插件是一个添加到 jQuery 原型中的函数。您应该将大部分功能编写为通用 jQuery 插件。使用遍历从您的插件中尽可能消除硬编码的 id。

然后，您只需使用一小段特定于应用程序的接线代码将它们连接在一起。

http://learn.jquery.com/plugins/basic-plugin-creation/

//plugin
(function($) {
  $.fn.editForm = function() {
    $form = this;
    var $button = $form.find('button');
    var $label = $form.find('label');
  }
})(jQuery)

// app code
$(function() {
  $('form.edit').editForm()
});

框架解决方案

您也可以采用不同的方法并考虑使用框架。

Angular 现在正受到广泛关注。 Angular 将您的 HTML 视为代码，并实际编译它以生成最终页面。您的代码和模板之间的耦合非常紧密，这是一种完全相反的思考方式，但具有显着优势。

【讨论】：