为什么在删除之前检查元素/属性？ [英] Why check for element/attributes before removing it?

问题描述

在学习Javascript - 基础知识动手指南使用属性节点一章中现代Javascript ，作者Tim Wright在第73页上说：

In the Working with the Attribute Node chapter in Learning Javascript - A Hands-On Guide to the Fundamentals of Modern Javascript, the author Tim Wright said on Page 73:

删除属性就像获取属性一样简单。我们只是定位元素节点并使用方法 removeAttribute（）将其移出。 如果您尝试删除不存在的属性 ，则不会引发任何Javascript异常，但使用相同的 hasAttribute仍然是最好的： ）我们前面提到的方法，如代码清单4.6.4所示

Removing an attribute is as simple as getting one. We just target the element node and use the method removeAttribute() to get it out of there. There are no Javascript exceptions thrown if you try to remove an attribute that doesn't exist, but it's still best practive to use the same hasAttribute() method we mentioned earlier, shown in Listing 4.6.4

清单4.6.4 Javascript用于删除我们图像的类值

if(document.getElementById("pic").hasAttribute("class")) {
    document.getElementById("pic").removeAttribute("class");
}

如果没有任何方式抛出异常，则不检查它是否存在或没多余？会出现同样的结果。本书所说的论点是在删除它之前检查参数，保存浏览器解析不必要的代码，但是 if（document.getElementById（pic）。hasAttribute（class））{} 甚至比 document.getElementById（pic）。removeAttribute（class）; 更长！

If there's no exceptions thrown either way, isn't checking whether it exists or not redundant? The same outcome will arise. The argument that the book says is that check for the paramenter before removing it saves the browser parsing through unneccesary code, but if(document.getElementById("pic").hasAttribute("class")) {} is even longer than document.getElementById("pic").removeAttribute("class"); on its own!

为什么是最佳做法呢？

推荐答案

在我的意见你的假设是绝对正确的。我认为书中的建议有点灾难性（使用一个戏剧性的术语）。以前任何地方都没有听说过最佳实践。在删除/更改属性之前使用 element.hasAttribute 绝对没有什么可以实现的，但会降低代码速度。浏览器不会神奇地拥有属性的查找列表，以检查它们在设置或获取属性时未使用的存在。但可能是作者认为的最佳做法 - 用于生成可读和可理解的代码。

In my opinion your assumption is absolutely right. I think the "advice" in the book is kind of catastrophic (to use a dramatic term). Havent heard about that "best practice" anywhere before. There is absolutely nothing you could achieve by using element.hasAttribute prior to removing / changing an attribute but slow down your code. A browser does not magically have a lookup list for attributes to check for their existence that is not used when it set or get an attribute. It may be best practice - in the authors opinion - for producing readable and understandable code, though.

此外，在我看来，你根本不应该使用 setAttribute ！使用 setAttribute 只有这样才有获取或设置某个属性的内置标准方法。这里 class 有问题，请使用

Furthermore, in my opinion you should never use setAttribute at all! Use setAttribute only then there is no built in standard method for getting or setting a certain attribute. Here class is in question, use

element.className = 'myclass';

而不是

element.setAttribute('class', 'myclass');

浏览器在使用此类标准化方法时已优化了例程。如果在为元素分配或删除属性时没有使用，那么浏览器必须弄清楚它是什么类型的属性，并且可能在之后触发特殊操作 - 而不是每次都是nessecary。

Browsers have optimized routines when using such standardized methods. If not being used when you assign or delete an attribute to an element then the browser has to figure out what kind of attribute it is, and may perhaps trigger special operations afterwards - not everytime nessecary.

您可以检查浏览器是否支持这样的特定属性方法

You can check if a browser supports a specific attribute-method like this

if (typeof window.document.body.className === 'string') {
   //className is supported for node elements
}

大多数属性方法的行为类似于getter和setter。您可以阅读和书写，并且使用它们比其他方法更有效。示例：

Most of those attribute-methods acts like getters and setters. You can read and write, and the use of some them are even more effective than other approaches. Example :

element.outerHTML = '';

清理更多内存而不是

element = null;

它当然不是元素的属性，而是显示为什么人们应该更喜欢使用内置元素定位元素特定部分的方法。

It is of course not an attribute to an element, but to show why one should prefer using built in methods targeting a specific part of an element.

有许多标准方法，如 element.className 你可以用于定位特定的标准属性。它们大多被命名为camelcase表示法中的属性名称。使用 setAttribute 仅作为您自己的custum属性，例如

There is many, many standard methods as element.className you can use to target a specific standard attribute. They are mostly named as the attribute name in camelcase notation. Use setAttribute only for your own custum attributes, like

element.setAttribute('data-my-custum-attribute', 'hello');

根据HTML5标准，这是完全合法的标记。或者使用它作为后备，如果浏览器doenst支持某种属性方法。对于非常古老的浏览器可能就是这种情况。但即使IE6支持 className 。

Which is perfectly legal markup according to the HTML5 standard. Or use it as a fallback, if the browser doenst support a certain attribute method. This can be the case for very old browsers. But even IE6 supports className.

我会推荐两本书我认为这对于深入理解javascript非常有价值（并不是说我完整地做了，但这些书对我有很大帮助）：

I will recommend two books which I think is really valuable for understanding javascript in the depth (not claiming that I do in full, but those books have helped me a lot) :

Javascript - 好的部分

JavaScript Ninja的秘密 ，由John Resig（jQuery背后的人）

Javascript - the good parts, by Douglas Crockford
Secrets of the JavaScript Ninja, by John Resig (the guy behind jQuery)

购买书籍！它们是您桌面上的黄金参考。

Buy the books! They are gold as reference on your desk.

这篇关于为什么在删除之前检查元素/属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！