Question

我是一名前端开发人员，我担心定位DOM的最佳方式。

让我们设想一个小小的形式来创造一个新的僵尸：

<h1>Add a new zombie</h1>
<form id="create-zombie">
  <input id="zombie" type="text" name="zombie" />
  <input id="lvl" type="text" name="lvl" />
  <button type="submit">Add</button>
</form>

...如果我想获得zombie和lvl的值，我会编写如下代码：

class Zombie_Add extends Controller 

  # Dom References
  el: 
    'form': '#create-zombie'
    'zombie': '#zombie'
    'lvl': '#lvl'

  run: ->

    @on 'submit', @el.form, @validate

  validate: (e) =>

    e.preventDefault()

    zombie = $(@el.zombie).val()
    lvl = $(@el.lvl).val()

module.exports = Zombie_Add

那＆＃34; ok＆＃34;它完成了这项工作，但我对这个问题有一些问题＆＃34;结构＆＃34; ：

如果有人触摸了DOM并删除了一个ID，我只是性交，它会破坏我的代码（Obtain Obvious发现！）
对于更复杂的选择器，它只是一团糟（我正在考虑像[name^="dummy-"] input:first这样的东西）。我想很容易想象el的名字是多么糟糕。

无论如何，我今天想要学习的是从JS定位DOM的最佳方法。是否更好地使用ID，class值或data-*属性？我们如何用简单的英语等来美化选择器...

Answer 1

如果某人触摸了DOM并删除了一个ID，我只是****，它打破我的代码（Obtain Obvious发现！）

在DOM中定位单个唯一元素的最佳方法是使用与zombie和lvl一样的ID。它既快速执行又易于编码。

如果有人在HTML中混淆了id值，那将会破坏您的Javascript。这就是它的方式。任何搞乱HTML的人都必须足够聪明才能知道ID值是有原因的，所以如果他们想要更改或删除它，那么他们有责任找到可以在Javascript中进行相应更改的人。这就是它的方式。

对于更复杂的选择器，它只是一团糟（我正在思考像[name ^ =＆＃34; dummy - ＆＃34;] input：first）。我觉得这很容易想象一下el的名字是多么的***。

对于更复杂的选择器也是如此。无论喜欢与否，现代网页都是服务器端，演示文稿HTML和Javascript的融合。三者必须共同努力才能提供最终解决方案。虽然您努力避免使用良好的设计技术和实践来避免不必要的依赖，但您无法避免所有依赖关系，甚至也不会试图避免所有可能的依赖关系成为一种有效的开发方式。

实施例

有一些编码实践可以使您的代码对HTML的编辑不那么敏感，我认为这些是理想的实践。例如，请考虑以下HTML代码段：

<div class="header">
    <div class="headerBorder">
        <div class="actions>
            <a href="#" class="hide">Hide</a>
        </div>
        <div class="contentContainer">
            <div class="content">
            ... content here
            </div>
         </div>
     </div>
</div>
<div class="header">
    ... more of these repeated
</div>

并且您希望拥有代码，当您单击“隐藏”链接时，它将隐藏内容。

如果你这样编码：

$(".header .actions .hide").click(function() {
    $(this).parent().next().children().first().hide();
});

然后，你已经在你的Javascript中嵌入了一些关于HTML结构的非常详细的知识，包括你的按钮和内容，以及几乎任何对HTML的结构改变（甚至只需添加一个div级别来帮助一些布局）将打破Javascript。这很糟糕。

相反，你可以这样写：

$(".header .actions .hide").click(function() {
    $(this).closest(".header").find(".content").hide();
});

这仅取决于一个HTML结构概念 - 与.content按钮对应的.hide位于公共.header父元素中的某个位置。可以更改.header父级中的整个结构，并且此代码不会中断。这是一个强大的代码，试图尽可能独立于HTML结构的细节。

无论如何，我今天想要学习的是最好的目标方式来自JS的DOM。是否更好地使用ID，类值或数据 - * 属性？我们如何用简单的英语等来美化选择器...

最好使用ID来定位页面中只有一个唯一元素的元素。

最好使用类名来定位页面中可以有多个元素的元素，如果你想只定位一个特定的项目，你可以将它与选择器的其他部分组合起来班级名称。

数据属性可以在选择器中使用，但这并不是它们的主要目的。我无法想出为什么使用数据属性而不是类名更好的原因。我使用数据属性将实际数据存储在脚本将使用的对象上。这往往允许代码更通用，让内容描述自己。

当你谈到被删除的类来改变元素的状态时，这是对类的合法使用，但是使用相同的类来选择元素和添加/删除只是一个糟糕的设计决定州。为这两个目的使用不同的类名。例如，您可以拥有一个名为＆＃34;选择＆＃34;的类名。表示选择状态，但如果只需要选定的对象，则只能在选择器中使用它。如果您想要表格中的所有订单项，则不会使用＆＃34; .selected＆＃34;，您可以为该对象创建更具描述性的类名称，例如＆＃34; lineitem＆＃34 ;。请记住，您可以在对象上拥有多个类名，这样您就可以在同一个对象上使用不同的类名来实现不同目的。

您似乎在搜索一些魔法子弹，以防止HTML中的更改以任何方式影响Javascript。这根本就不存在。选择一个DOM元素或找到相对于被点击的东西的DOM元素将依赖于HTML如何构造或标记的固有知识。重要的是你将这种依赖性最小化到只需要的东西，并且任何搞乱HTML的人都要理解如何最好地改变事物，而不是打破Javascript或与知道Javascript的人讨论变化。如果您在项目的不同部分使用不同的技能/人员，他们必须协调他们的工作，以便不破坏事物或了解系统其他部分的依赖性。这就是它的方式。这里没有神奇的答案可以消除HTML和Javascript之间的所有依赖关系。智能设计具有更小且更明显的依赖性。糟糕的设计有很大的，往往是隐藏的依赖。

关于＆＃34;普通英语＆＃34;的问题对我来说并不是特别清楚。使用描述性ID名称，类名或属性名称似乎很明显，这使得读者明白该特定名称的用途。我不确定你在寻找什么。

定位DOM

1 个答案:

实施例