2

我不得不承认，我一直对“正确的”不显眼的 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
    }

}();

那应该是可以代表的东西，对吧？所以我的困惑来自两个地方。

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

如果我从根本上做错了，请引导我走上这条路。

4

2 回答 2

0

Backbone Js是针对这个问题的 MVC 方法。

警告：对于您当前的示例来说，这可能是矫枉过正。

另请参阅：什么是主干 js

于 2012-08-20T14:52:40.290 回答
0

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

于 2014-08-27T08:34:43.667 回答