当前位置:网站首页 > 欧洲联赛 > 正文

辣椒炒肉,漾组词,杉果-刻意练习,保持精进,让学习成为一种习惯

admin 0

前语

Web近藤敏夫 Component蛮早就有出现过,有时分需求时刻。作者:腾讯@林林小辉。

还记得当document.querySelector最开端被广泛的被浏览器支撑而且完毕了无处不在的JQuery。这终究给咱们供给了一个原生的办法,虽然JQuery现已供给了好久。我觉得这相同将会发作在像Angular和React这的前端结构身上。

这些结构能够协助咱们去做一些做不到的作业,比方创立能够复用的前端组件,可是这样需求支付杂乱度、专属语法、功用耗费的价值。 可是这些将会得到改动。

现代浏览器的API现已更新到你不需求运用一个结构就能够去创立一个可复用的组件。Custom Element和Shadow DOM都能够让你去发明可复用的组件。

最早在2011年,Web Components就现已是一个只需求运用HTML、CSS、JavaScript就能够创立可复用的组件被介绍给咱们。这也意味着你能够不运用相似React和Angular的结构就能够发明组件。乃至,这些组件能够无缝的接入到这些结构中。

这么久以来榜首次,咱们能够只运用HTML、CSS、JavaScript来创立能够在任何现代浏览器运转的可复用组件。Web Components现在现已被首要的浏览器的较新版别所支撑。

Edge将会在接下来的19版别供给支撑。而关于那些旧的版别能够运用 polyfill兼容至IE11. 这意味着你能够在当下根本上任何浏览器乃至移动端运用Web Components。

发明一个你定制的HTML标签,它将会承继HTM元素的一切特点,而且你可在任何支撑的浏览器中经过简略的引进一个script。一切的HTML、CSS、JavaScript将会在组件内部部分界说。 这个组件在你的浏览器开发东西中显现为一个独自个HTML标签,而且它的款式和行为都是彻底在组件内进行,不需求作业区,结构和一些前置的转化。

让咱们来看一些Web Components的一些首要功用。

自界说元素

自界说元素是简略的用户自界说HTML元素。它们经过运用CustomElementRegistry来界说。要注册一个新的元素,经过window.customElements中一个叫define的办法来获取注册的实例。

window.customElements.define('my-element', MyElement);

办法中的榜首个参数界说了新发明元素的标签名,咱们能够十分简略的直接运用


为了防止和native标签抵触,这儿强制运用中划线来衔接。 这儿的MyElement的结构函数需求运用ES6的class,这让JavaScript的辣椒炒肉,漾组词,杉果-故意操练,坚持精进,让学习成为一种习气class不像本来面向目标class那么让人疑问。相同的,假如一个Object和Proxy能够被运用来给自界说元素进行简略的数据绑定。可是,为了保证你的原生HTML元素的拓宽性并保证元素承继了整个DOM API,需求运用这个约束。 让咱们写一个这个自界说元素class

class MyElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
// here the element has been inserted into the DOM
}}

这个自界说元素的class就好像一个惯例的承继自nativeHTML元素的class。在它的结构函数中有一个叫connectedCallback额定增加的办法,当这个元素被刺进DO一女多夫M树的时分将会触发这个办法。你能够把这个办法与React的componentDidMount办法。

一般来说,咱们需求在connectedCallback之后进行元素的设置。由于这是仅有能够确认一切的特点和子元素都现已可用的办法。结构函数一般是用来初始化状况和设置Shadow DOM。

元素的结构函数和connectCallback的区别是,其时一个元素被创立时(比如document.createElement)将会调用结构函数,而当一个元素现已被刺进到DOM中时会调用connectedCallback,例如褚光宇在现已声明并被解析的文档中,或许运用document.body.appendChild增加。

你相同能够用过调用customElements.get(‘my-element’)来获取这个元素结构函数的引证,然后结构元素。条件是你现现已过customElement.define()去注册。然后你能够运用new element()来替代document辣椒炒肉,漾组词,杉果-故意操练,坚持精进,让学习成为一种习气.createElement()去实例一个元素。

customElements.define('my-element', class extends HTMLElement {...});...const el = customElements.get('my-element');const myElement = new el(); // same as document.createElement('my-element');
document.body.appendChild(myElement);

与connectedCallback相对应的则是disconnectCallback,当元素从DOM中移除的时分将会调用它。可是要记住,在用户封闭浏览器或许浏览器tab的时分,不会调用这个办法。 还有adoptedCallback,当元素经过调用document.adoptNode(element)被采用到文档时将会被调用,虽然到现在为止,我还没有碰到这个办法被调用的时分。

另一个有用的生命周期办法是attributeChangedCallback,每逢将特点增加到observedAttributes的数组中时,就会调用这个函数。这个办法调用时两个参数分别为旧值和新值。

class MyElement extends HTMLElement {
static get observedAttributes() {
return ['foo', 'bar'];
}
attributeChangedCallback(attr, oldVal, newVal) {
switch(attr) {
case 'foo':
// do something wi辣椒炒肉,漾组词,杉果-故意操练,坚持精进,让学习成为一种习气th 'foo' attribute
case 'bar':
// do something with 'bar' attribute
}
}}

这个办法只要当被保存在observedAttributes数组的特点改动时,就如这个比如中的foo和bar,被改动才会调用,其他特点改动则不会。 特点首要用在声明元素的初始装备,状况。理论上经过序列化能够将杂乱值传递给特点,可是这样会影响功用,而且你能够直接调用组件的办法,所以不需求这样做。可是假如你希望像React和Angular这样的结构供给特点的绑定,那你能够看一下。Polymer。

生命周期函数的次序

次序如下:

constructor -> attributeChangedCallback -> connectedCallback

为什么attributeChangedCallback要在connectedCallback之前履行呢?

回想一下,web组件上的特点首要用来初始化装备。这意味着当组件被刺进DOM时,这些装备需求能够被访问了。因而attributeChangedCallback要在connectedCallback之前履行。 这意味着你需求依据某些特点的值,在Shadow DOM中装备任何节点,那么你需求在结构函数中引证这些节点,而不是在connectedCallback中引证它们。

例如,假如你有一个ID为container的组件,而且你需求在依据特点的改动来决议是否给这个元素增加一个灰色的布景,那么你能够在结构函数中引证这个元素,以便它能够在attributeChangedCallback中运用:

constructor() {
this.container = this.shadowRoot.querySelector('#container');}
attributeChangedCallback(attr, oldVal, newVal) {
if(attr === 'disabled') {
if(this.hasAttribute('disabled') {
this.container.style.background = '#808080';
}
else {
this.container.style.backgrcz6280ound = '#ffffff';
}
}}

假如你一向比及connectedCallback再去创立this.container。然后在榜首时刻调用attributeChangedCallback,它仍是不尅用的。因而虽然你应该尽或许的拖延你组件的connectedCallback,但在这种状况下是不行能的。

相同重要的是,你能够在组件运用customElement.define()之前去运用它。当改元素出现在DOM或许被刺进到DOM,而还没有被注册时。它将会是一个HTMLUnkonwElement的实例。浏览器将会这样处理不知道的元素,你能够像处理其他元素相同与它交互,除此之前,它将不会有任何办法和默许款式。

然后当经过运用customElement.define()去界说它时,并可运用类来界说增加它,这个进程被称为晋级。当运用customElement.whenDefined晋级元素时,能够调用回调,并会回来一个promise。当这个元素被晋级时。

customElements.whenDefined('my-element').then(() => {
// my-element is now defined})

Web Component的公共API

除了这些生命周期办法,你还能够界说能够从外部调用的办法,这关于运用React和Angular等结构现在是不行行的。例如你能够界说一个名为doSomething的办法:

cl虹桥书吧ass MyElement extends HTMLElement {
...
doSomething() {
// do something in this method
}}

然后你能够在外部运用它

const element = document.querySelector('my-element');
element.doSomething();

在你的元素上界说的任何办法,都会成为其公共JavaScript的一部分。经过这种办法,你能够给元素的特点供给setter来完结数据绑定。例如在元素的HTML中展现设置的特点值。由于本质上不能够将给特点设置除了字符串以外的值,所以应该讲像目标这样的杂乱之作为特点传递给自界说元素。

除了生命组件的初始状况,特点还能够用于对应特点的值,以便将元素的Javascript状况反应到DOM的体现中。input元素的disabled特点便是一个很好的比如:


const input = document.querySelector('input');
input.disabled = true;

在将input的disabled的特点设置为true后,改动也会相应的反映到disabled特点上。


经过setter能够很简略的将property反应到attribute上。

class MyElement extends HTMLElement {
...
set disabled(isDisabled) {
if(isDisabled) {
this.setAttribute('disabled', '');
}
else {
this.removeAttribute('disabled');
}
}
get disabled() {
return this.hasAttribute('disabled');
}}

当attribute改动后需求履行某些操作时,将其增加到observedAttributes数组中。作为一种功用优化,只要在这被列举出的特点才会监测它们的改动。不管这个attribute什么时分改动了,都会调用attributeChangedCallback,参数分别是当时值和新的值。

class MyElement extends HTMLElement { 
static get observedAttributes() {
return ['disabled'];
}
constructor() {
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = 盒子先生历险记`


.disabled {
opacity: 0.4;
}



`;
this.container = this.shadowRoot('#container');
}
attributeChangedCallback(attr, oldVal, newVal) {
if(attr === 'disabled') {
if(this.disabled) {
this.container.classList.add('disabled');
}
else {安仔包子加盟
this.container.classList.remove('disabled')
}
}
}}

现在不管何时disabled的attribute被改动时,this.container上面的名为disabled的class都会显现或躲藏,它是ShadowDOM的内涵元素。 接下来让咱们看一下。

Shadow DOM

运用Shadow DOM,自界说元素的HTML和CSS彻底封装在组件内。这意味着元素将以单个的HTML标签出现在文档的DOM树种。其内部的结构将会放在#shadow-root。

实践上一些原生的HTML元素也运用了Shadow DOM。例如你再一个网页中有一个元素,它将会作为一个独自的标签展现,但它也将显现播映和暂停视频的控件,当你在浏览器开发东西中检查video标签,是看不到这些控件。

这些控件实践上便是video元素的Shadow DOM的一部分,因而默许状况下是躲藏的。要在Chrome中显现Shadow DOM,进入开发者东西中的Preferences中,选中Show user agent Shadow DOM。当你在开发者东西中再次检查video元素时,你就能够看到该元素的Shadow DOM了。

Shadow DOM还供给了部分效果域的CSS。一切的CSS都只运用于组件自身。元素将只承继最小数量从组件外部界说的CSS,乃至能够不从外部承继任何CSS。不过你能够露出这些CSS特点,以便用户对组件进行款式设置。这能够处理许多CSS问题,一起依然答应自界说组件款式。 界说一个Shadow root:

const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `

Hello world

`;

这界说了一个带mode: open的Shadow root,这意味着能够再开发者东西找到它并与之交互,装备露出出的CSS特点,监听抛出的事情。相同也能够界说mode:closed,会得到与之相反的体现。

你能够运用运用HTML字符串增加到innerHtml的property特点中,或许运用一个