Question

我必须承认，我一直对“正确”不引人注目的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调用？

如果我从根本上做错了，请引导我走上正轨。

Answer 1

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

警告：您当前的示例可能有点过分。

另请参阅：what-is-backbone-js

Answer 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视为代码，并实际编译它以生成最终页面。你的代码和模板之间的联系非常紧密，这是一种完全相反的思考方式，但却具有显着的优势。

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

2 个答案:

JQuery的

JQuery插件

框架解决方案