且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

为什么在删除之前检查元素/属性?

更新时间:2023-12-03 21:35:22

在我的意见你的假设是绝对正确的。我认为书中的建议有点灾难性(使用一个戏剧性的术语)。以前任何地方都没有听说过***实践。在删除/更改属性之前使用 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.