有了 Meteor，为什么 DOM 操作永远不能用 jQuery 来完成？答案

【问题标题】：With Meteor, why should DOM manipulation NEVER be done with jQuery?有了 Meteor，为什么 DOM 操作永远不能用 jQuery 来完成？
【发布时间】：2014-07-19 00:01:54
【问题描述】：

我很好奇这句话的有效性：

一个好的经验法则是，如果您使用 jQuery 来操作任何 DOM 元素，那么您可能做错了。

来自这个问题的答案：Meteor - How can I pass data between helpers and events for a template?

在我看来，jQuery 很好，因为它可以手术并操纵 DOM 的许多小部分，而无需更改整个代码块。

Meteor 中的模板很棒，因为它们正是这样做的——它们可以将整个代码块或小东西换成其他东西，但代价是每次都必须显式定义它并重新定义实际上没有的代码改变。

示例 - 在焦点上，jQuery 删除了 idleField 类，添加了 focusField 类，并将占位符更改为其他一些文本：

<input class="idleField" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10"/>

$('input[type="text"]').focus(function() {
  $(this).removeClass("idleField").addClass("focusField").attr("placeholder", "First Name NOW");
});

结果是

<input class="focusField" id="first_name" name="firstName" type="text" placeholder="First Name NOW" maxlength="10"/>

jQuery 短小精悍，只针对切换类和占位符。

但是使用 Meteor 模板，结果会是这样的：

<input {{toggleClassAndEditPlaceholder}} maxlength="10"/>

Session.set('toggleClassEditPlaceholderSessionVar', ' class="idleField" id="first_name" name="firstName" type="text" placeholder="First Name" ');

Template.form.helpers({
  toggleClassAndEditPlaceholder: function() {
    return Session.get('toggleClassEditPlaceholderSessionVar');
)};

Template.form.events({
  'focus input[type="text"]': function () {
    Session.set('toggleClassEditPlaceholderSessionVar', ' class="focusField" id="first_name" name="firstName" type="text" placeholder="First Name NOW" ');
  }
});

Meteor 方法要冗长得多，至少在这个例子中，包括冗余项（id、name 和 type 不变，只有类和占位符）。 jQuery 仅针对类和占位符，而将其他所有内容都放在一边。然而，模板有时必须包含很多无关的东西。在这个例子中，当然，我可以在我的代码中并排移动占位符和类，以便在定义模板时不改变 id、名称和类型，但在其他一些代码中你不能这样做。

那我做错了什么？在 Meteor 中是否应该有一种更有效的方法，比那条 jQuery 行更有效？

【问题讨论】：

标签： jquery meteor

【解决方案1】：

有问题的声明是在九个月前发表的。在那个时候是非常重要的。从那时起，Meteor UI 引擎得到了彻底的检修。该更改的关键点之一是使引擎对 JQuery 更加友好。以前，当您使用 JQuery 进行更改时，Meteor 很可能会在重绘时恢复该更改。现在它以更聪明的方式进行更改，因此使用纯 JQuery 更改元素状态是安全的。

话虽如此，仔细考虑您将需要的更改是否真的更好地使用 JQuery 完成仍然是一个好习惯。具体来说，最好将所有与数据相关的更改留给 Meteor。但是，在您的情况下，您完全根据其状态更改 UI 组件的行为。因此，确实，要单独使用 Meteor 进行更改，您需要创建一个人工数据对象，实际上，在这种情况下最好只使用 JQuery。

除此之外，您的 Meteor 代码本身可以得到显着改进。你不需要在助手中传递所有标签属性，改变你需要的东西就足够了：

<input id="..." type="..." name="..." class="{{class}}" placeholder="{{placeholder}} maxlength="10"/>

Template.form.helpers({
  class: function() {
    return Session.get('toggled') ? 'focusField' : 'idleField';
  },
  placeholder: function() {
    return Session.get('toggled') ? 'focusPlaceholder' : 'idlePlaceholder';
  },
)};

Template.form.events({
  'focus input[type="text"]': function () {
    Session.set('toggled', true);
  },
});

【讨论】：

太棒了-谢谢。我刚进入流星，所以我不知道它过去的行为。

【解决方案2】：

首先，您引用的原始 SO 帖子是使用 jQuery 引用“反应性”数据更改（在模型数据上），答案是指向作者使用 Collection API 以避免手动更新 DOM。当您从 Meteor.Collection 提取数据并将其显示在页面上时，您使用的是“反应式”数据源...更新将自动发生。

您的示例并没有真正遵循相同的推理。因此，您肯定会使用 jQuery 来简化您的方法。它看起来像：

Template.form.events({
  'focus input[type="text"]': function (e) {
      $(e.currentTarget).removeClass("idleField").addClass("focusField").attr("placeholder", "First Name NOW");
  }
});

没有理由在全局 Session 对象中乱扔一堆元素属性的键/值对。即使您这样做了，也没有理由存储保持不变的属性（id、name、type）。

【讨论】：