使用Meteor,为什么DOM操作永远不应该使用jQuery？

Question

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

一个好的经验法则是,如果你使用jQuery来操作任何DOM元素,你可能做错了.

从这个问题的答案:Meteor - 如何在帮助器和模板事件之间传递数据？

我认为它的方式,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不会改变,只有class和placeholder).jQuery只针对类和占位符,而只留下其他所有内容.然而,模板有时必须包含许多无关紧要的东西.在这个例子中,当然,我可以在我的代码中并排移动占位符和类,以便在定义模板时不改变id,name和type,但在其他一些代码中你将无法做到.

那么我做错了什么？是否应该有更高效的方式在Meteor中进行,一个比单一jQuery线更有效的方法？

Answer 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);
  },
});