使用Meteor，为什么不应该使用jQuery来进行DOM操作? [英] With Meteor, why should DOM manipulation NEVER be done with jQuery?

问题描述

我对这句话的有效性感到好奇:

I'm curious about the validity of this statement:

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

A good rule of thumb is that if you're using jQuery to manipulate any DOM elements, you're probably doing it wrong.

此问题的答案:从我的角度来看，jQuery很不错，因为它可以进行外科手术并且可以处理DOM的许多小部分，而无需更改整个代码块.

The way I see it, jQuery is good because it can be surgical and manipulate many small parts of the DOM without having to change an entire code block.

Meteor中的模板之所以出色，是因为它们正是这样做的-它们可以将整个代码块或小的细小的东西换成其他东西，但是这样做的代价是每次都必须明确地定义它，并重新定义实际上没有的代码改变.

Templates in Meteor are great because that's precisely what they do - they can swap out entire code blocks or small tiny things for something else, but at the expensive of having to define it explicitly every time and redefining code that actually doesn't change.

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

Example - on focus, jQuery removes the idleField class, adds the focusField class, and changes the placeholder to some other text:

<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简短而有趣，仅用于切换类和占位符.

The jQuery is short and sweet and targeted just at toggling the class and placeholder.

但是对于Meteor模板，相同的结果将是:

But with Meteor templates, the same result would be something like:

<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" ');
  }
});

流星"方式更为冗长，至少在此示例中，它包括冗余项(id，name和type不变，仅class和placeholder). jQuery仅将类和占位符作为目标，而将其他所有内容保留下来.但是，模板有时必须包含很多无关紧要的内容.当然，在此示例中，我可以在代码中并排移动占位符和类，以便在定义模板时不更改id，名称和类型，但是在其他代码中您将无法使用.

The Meteor way is a lot more verbose and at least in this example, includes redundant items ( id, name, and type don't change, only class and placeholder). jQuery targeted ONLY the class and placeholder and left everything else alone. Templates, however, sometimes have to encompass a lot of extraneous stuff. In this example, sure, I could have moved placeholder and class side by side in my code so that id, name, and type are untouched when defining the template, but in some other code you wouldn't be able to.

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

So what am I doing wrong? Is there supposed to be a much more efficient way of doing it in Meteor, one that's more efficient that just that single jQuery line?

推荐答案

有问题的陈述是在9个月前做出的.当时非常重要.从那时起，Meteor UI引擎得到了全面的检修.更改的关键点之一是使引擎对JQuery更友好.以前，当您使用JQuery进行更改时，Meteor可能会在重绘时还原该更改.现在，它以更加巧妙的方式进行更改，因此可以安全地使用纯JQuery更改元素状态.

The statement in question was made nine months ago. It was very important at that time. Since then Meteor UI engine received a complete overhaul. One of key points of that change was to make the engine more JQuery-friendly. Before, when you changed with JQuery, chances were Meteor would revert that change on redraw. Now it makes its changes in much more clever way, so it's safe to alter the elements state with pure JQuery.

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

That being said, it's still a good practice to think carefully whether the change you're going to need is really better done with JQuery. Specifically, it's better to leave all data-related changes to Meteor. In your case, however, you alter the behavior of a UI component based purely on its state. So indeed, to make that change with Meteor alone you'd need to create an artificial data object, and indeed, it's better to just use JQuery in this case.

 

 

除此之外，您的Meteor代码本身也可以得到显着改善.您无需在帮助程序中传递所有标记属性，只需更改所需的内容即可:

Aside from that, your Meteor code itself can be significantly improved. You don't need to pass all tag attributes in the helper, it's enough to change the thing you need:

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

这篇关于使用Meteor，为什么不应该使用jQuery来进行DOM操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！