前端组件化基本常识具体讲授(2)

Attribute 是一种声明型的语言,也是标志型代码 Markup Code。而 Markup Code 也不必然是我们的 HTML 这种 XML 类的语言。在标志语言的大生态中,其实有很是多的语言可以用来描写一个界面的布局。可是最主流的就是基于 XML 体系的。在我们 Web 规模内里最常见的就是 XML 。而 JSX 也可以领略为一种嵌入在编程语言内里的 XML 布局。

开拓者除了可以用 Attribute,也可以用 Property 来影响组件。这个组件自己是有 Property(属性) 的,当开拓者去修改一个组件的属性时,这个组件就会产生变革。而这个就是与工具中的 属性 Property 是一样的观念。

AttributeProperty 是不是一样的呢?有的时候是,有的时候也不是,这个完全取决于组件体系的设计者。组件的实现者可能是设计者可以让 attribute 和 property 统一。甚至我们把 state、config、attribute、property 四者都全部统一也是可以的。

然后就是 要领 method,它是用于描写一个巨大的进程,可是在 JavaScript 傍边的 Property 是答允有 get 和 set 这样的要领的,所以最终 method 和 property 两者的浸染也是差不多的。

那么这里我们可以确定一个观念,利用组件的开拓者会利用到 method 和 property,这些组件的要素。可是假如一个开拓组件的开拓者需要通报一个动静给到利用组件的措施员,这个时候就需要用到 事件 event。当一个组件内部因为某种行为可能事件触发到了变革时,组件就会给利用者发送 event 动静。所以这里的 event 的偏向就是反过来的,从组件往外传输的。

通过这张图我们就可以清楚知道组件的各个要素的浸染,以及他们的信息流转偏向

特性 Attribute

在所有组件的要素中,最巨大的无非就是 Attribute 和 Property。

我们从 Attribute 这个英文单词的领略上,更多是在强调描写性。好比,说我们描写一小我私家,头发许多、长相很帅、皮肤很白,这些都是属于 Attribute,也可以说是某一样对象的特性和特征方面的描写。

而 Property 跟多的是一种从属干系。好比我们在开拓中常常会发明一个工具,它有一个 Property 是别的一个工具,那么或许率它们之间是有一个从属干系的,子工具是从属于父工具。可是这里也有一种非凡环境,假如我们是弱引用的话,一个工具引用了别的一个工具,这样就是完全是另一个观念了。

上面讲的就是这两个词在英文中的区别,可是在实际运用场景内里他们也是有区此外。

因为 Property 是从属干系的,所以常常会在我们面向工具内里利用。而 Attribute 最初就是在我们 XML 内里中利用。它们有些时候是沟通的,有些时候又是差异的。

Attribute 比拟 Property

这里我们用一些例子来看看 Attribute 和 Property 的区别。我们可以看看它们在 HTML 傍边不等效的场景。

Attribute:

<my-component attribute="v" /> <script> myComponent.getAttribute('a') myComponent.setAttribute('a', value) </script>

HTML 中的 Attribute 是可以通过 HTML 属性去配置的

同时也可以通过 JavaScript 去配置的

Property:

myComponent.a = 'value';

这里就是界说某一个元素的 a = ‘value'

这个就不是 attribute 了,而是 property

许多同学都认为这只是两种差异的写法,其实它们的行为是有区此外。

Class 属性

<div></div> <script> var div = document.getElementByTagName('div'); div.className // 输出就是 class1 class2 </script>

早年 JavaScript 的 Class 是一个要害字,所以早期 class 作为要害词是不答允做为属性名的。可是此刻这个已经被悔改来了,要害字也是可以做属性名的。

为了让这个要害字可以这么用,HTML 内里就做了一个妥协的设计。在 HTML 中属性仍然叫做 class 可是在 DOM 工具中的 property 就酿成了 className。可是两者照旧一个相互反射的干系的,这个神奇的干系会常常让各人掉一些坑内里。

好比说在 React 内里,我们写 className它自动就把 Class 给配置了。

Style 属性

此刻 JavaScript 语言中,已经没有 class 和 className 两者纷歧致的问题了。我们是可以利用 div.class 这样的写法的。可是 HTML 中就照旧不支持 class 这个名字的,这个也就是一些汗青肩负导致的问题。

有些时候 Attribute 是一个字符串,而在 Property 中就是一个字符串语义化之后的工具。最典范的就是 Style 。

<div></div> <script> var div = document.getElementByTagName('div'); div.style // 这里就是一个工具 </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsjygp.html