İlk Web Bileşenim

Raymond Camden

Bir teknoloji olarak, web bileşenleri bir süredir radarımdaydı. Görebildiğim kadarıyla, bundan ilk veya ilk sözlerden biri, on yıldan fazla bir süre önce 2011’deydi. O zamanlar, tarayıcılar, aslında hepsi, onları desteklemeye başladı (bir bekleme süresi hariç). Bölüm Spesifikasyonun ne kadar zor olduğunu görmek için hafta sonu teknolojiye hızlı bir göz attım ve basit bir demo oluşturmanın ne kadar zor olduğunu gördüm. Oldukça şaşırdığımı söylemeliyim. Teknolojinin sadece yüzeyini çizdim ve bir takip yazısı için iyi bir fikrim var, ancak oluşturduğum basit örneği ve genel olarak teknolojiyle çalışma konusundaki düşüncelerimi çabucak paylaşacağımı düşündüm.

tam olarak nedir?

Yüksek düzeyde, bir web bileşeni, özel bir HTML öğesi tanımlamanıza olanak tanır. Yani örneğin şunu yapabilirim:

<h1>My Cats</h1>

<pet-cat name="Luna" age="11">
<pet-cat name="Elise" age="12">
<pet-cat name="Pig" age="9">

Tanımı pet-cat harici olarak gelir ve herhangi bir normal HTML bloğundan oluşabilir. Böylece pratik yukarıdakilerin sonucu şunlar olabilir:

<h1>My Cats</h1>

<div>
	<h2>Luna</h2>
	<p>
	This cat is 11 years old.
	</p>
</div>

<div>
	<h2>Elise</h2>
	<p>
	This cat is 12 years old.
	</p>
</div>

<div>
	<h2>Pig</h2>
	<p>
	This cat is 9 years old.
	</p>
</div>

Bu öğeler, normal HTML etiketleri gibi davranır. Hatta bunların yeni örneklerini oluşturmak ve niteliklerini dinamik olarak değiştirmek için JavaScript’i kullanabilirsiniz.

MDN’yi okumanızı şiddetle tavsiye ederim referans Web Bileşenleri için ayrıntılı olarak incelenir, ancak ana yapı taşları şunlardan oluşur:

  • Özel bir öğe tanımlama yeteneği (pet-cat yukarıda) JavaScript’te
  • Kulağa gerçekten hoş gelen, ancak temelde kendi içinde ve belgenizin geri kalanından uzakta kapsüllenmiş bir belge ağacı söylemenin bir yolu olan Gölge DOM. Bunun harika bir örneğini gördüm ve kaynağını hatırlayamıyorum, ama bir düşünün <video> etiketi ve videolarla çalışmak için nasıl yerleşik kontroller oluşturduğu. Bu, kendi içinde kapsüllenmiş bir DOM’dir.
  • Ve son olarak, oluşturulmayan ancak web bileşeni tarafından düzen için kullanılan HTML şablonları. aslında yaptım olumsuzluk Oluşturduğum demo için bu yöne dokunun, bu yüzden %100 gerekli değil.

Web bileşenleri iki ana çeşide sahiptir:

  • Yukarıda verdiğim örnek gibi tamamen benzersiz olanlar.
  • aracılığıyla tanınan, mevcut etiketleri değiştiren bileşenler as sözdizimi: <ul is="something-else">. Bu, belirli bir tarayıcıyla ilgili sorunu çözdüğümüz yer. Safari bu stili desteklemiyor ve bildiğim kadarıyla asla desteklemeyecek. Kim bilir. Dürüst olmak gerekirse, bu tarzı öncekinden daha az çekici buluyorum, bu yüzden beni çok fazla rahatsız etmiyor.

Web bileşenlerinin UI kitaplıkları için büyük bir nimet olacağını hemen görebiliyorum. Kontrol ettim ve Bootstrap bunu desteklemese de radarlarında. kullanarak Bootstrap Vuesize Bootstrap’i bileşenlerle kullanma deneyimini anlatabilirim. önemli ölçüde “normal” Bootstrap’tan daha iyi. Örnek olarak, işte basit bir sekmeli kullanıcı arayüzü:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">First</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Second</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>
<!-- tab content down here... -->

Zor olmasa da şununla karşılaştırın:

<b-tabs content-class="mt-3">
	<b-tab title="First" active><p>I'm the first tab</p></b-tab>
	<b-tab title="Second"><p>I'm the second tab</p></b-tab>
	<b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
</b-tabs>

Bunun, tutarlı UI/UX/etc öğelerinin büyük bir sitede oluşturulması gereken bir kuruluşta gerçekten yararlı olduğunu da görebiliyorum. Web bileşenlerini kullanmak kesinlikle bunu daha kolay hale getirecektir.

Yukarıda söylediklerimle birlikte, bunun her geliştiricinin her zaman küçük projelerde kullandığı bir şey olacağını düşünmüyorum, ama sorun değil. Kitaplık geliştiricileri için günlük geliştirmelerden daha yararlı olan başka JavaScript geliştirmeleri gördük.

Bir örneğe ne dersiniz?

Kediyi bana ver…

İlk testim için hızlı bir sarmalayıcı oluşturdum. YerKitten. bir dosya oluşturdum, cat.jsve şöyle tanımladı:

class PlaceCat extends HTMLElement {

    constructor() {

        super();

        const shadow = this.attachShadow({
            mode: 'open'
        });
		
        const wrapper = document.createElement('div');

		let width = 500;
		let height = 500;

		if(this.hasAttribute('width')) width = this.getAttribute('width');
		if(this.hasAttribute('height')) height = this.getAttribute('height');

		const img = document.createElement('img');
		img.setAttribute('src', `https://placekitten.com/${width}/${height}`);
		wrapper.appendChild(img);

        shadow.appendChild(wrapper);

	}

}

customElements.define('place-cat', PlaceCat);

Bir tabanı genişleten bir sınıfım var HTMLElement. çağıran bir kurucuya sahip olmalıdır. super. O shadow değişken orada bir ‘açık’ arabirim tanımlar; bu, ebeveynin gerekirse DOM’ye “erişebileceği” anlamına gelir.

Sonra bileşen için mantığa sahibim. Varsayılan bir genişlik ve yükseklik tanımlayın ve kullanıcı tarafından belirtilmişse bunu geçersiz kılın.

DOM’um, içinde resim bulunan bir div etiketidir. İnşa etmeyi bitirdiğimde, gölgeme ekliyorum, bitirdim.

Sonunda, not edin define aramak. Web bileşenleri zorunlu kabab-durum ol, yani somegthing dash something.

Bir HTML şablonuna onu ekliyorum ve kullanıyorum:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
<body>


<place-cat></place-cat>
<place-cat width="200" height="200"></place-cat>


<script src="cat.js"></script>
</body>
</html>

İşte sonuç:

Elbette web tanrıları, bileşenlerin kediler için kullanılmasını amaçladı, değil mi? Devtools’u açarsanız, onları diğer herhangi bir öğe gibi görebilirsiniz:

Web bileşeni aracılığıyla öğeler.

Dilerseniz buradan online olarak inceleyebilirsiniz: https://cfjedimaster.github.io/webdemos/webcomponents/test1.html

Bu ilk örnek o kadar önemsizdi ki, bir üretim ortamında gerçekten iyi çalışmazdı. Özellikle bir açıdan başarısız olur. Öğenin yeni bir örneğini oluşturmak için JavaScript kullansaydım ve ardından boyutları ayarlasaydım, başarısız olurdu:

let cat = document.createElement('place-cat');
cat.setAttribute('width', 200);
cat.setAttribute('height', 400);

document.querySelector('body').appendChild(cat);

Neden? Niye? Çünkü bir web bileşeni, değişiklikleri “dinleyeceğini” tanımlamalı ve bu değişiklikleri uygulamak için bir tür özel mantığa sahip olmalıdır. Neyse ki bu iki yöntemle yapılabilir. İlk olarak, izlemek istediğimiz özellikleri tanımlıyoruz:

static get observedAttributes() { return ['width','height']; }

Ve sonra kullanabiliriz attributeCHangedCallback bu değişiklikleri işlemek için. Öyle görünüyor:

attributeChangedCallback(name, oldValue, newValue) {
	// name is the attribute changing
	// old and new value represent the previous and new settings
}

Bundan yararlanmak için kedi öğemi güncelledim:

class PlaceCat extends HTMLElement {

	getURL() {
		return `https://placekitten.com/${this.width}/${this.height}`
	}

    constructor() {

        super();

        const shadow = this.attachShadow({
            mode: 'open'
        });
		
        const wrapper = document.createElement('div');

		this.width = 500;
		this.height = 500;

		if(this.hasAttribute('width')) this.width = this.getAttribute('width');
		if(this.hasAttribute('height')) this.height = this.getAttribute('height');

		const img = document.createElement('img');
		img.setAttribute('src', this.getURL());
		wrapper.appendChild(img);

        shadow.appendChild(wrapper);

	}

	static get observedAttributes() { return ['width','height']; }

	attributeChangedCallback(name, oldValue, newValue) {
		this[name] = newValue;
		this.shadowRoot.querySelector('img').src = this.getURL();
	}

}

// Define the new element
customElements.define('place-cat', PlaceCat);

Görüntü kaynağını bir işlevde almak için mantığı soyutladığımı unutmayın, getURL. Daha sonra bunu yapıcıda ve değişiklikler için geri aramada kullanabilirim. İşte kedi yapmak için bir düğmesi olan oldukça topal bir demo. Gerçek hayatta bunlardan birine ihtiyacım var:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

<button id="makeCat">Make Cat</button>

<script src="cat2.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
	document.querySelector('#makeCat').addEventListener('click', () => {

		let cat = document.createElement('place-cat');
		cat.setAttribute('width', 200);
		cat.setAttribute('height', 400);

		document.querySelector('body').appendChild(cat);

	}, false);
}, false);
</script>
</body>
</html>

Not geçiş yaptım cat2.js ilk ve ‘gelişmiş’ cat bileşenimi etrafta tutabilmem için komut dosyası etiketinde. Burada yaptığım tek şey, düğmeye bir tıklama işleyicisi eklemek ve ardından place-cat vücuda eleman. Bunu kendin denemek istersen, buraya bir göz at: https://cfjedimaster.github.io/webdemos/webcomponents/test1a.html

CodePen yapmayı planlamıyordum ve olmasını da beklemiyordum. olumsuzluk iş, ama yine de devam ettim:

Kalemi Gör yer kedisi tarafından Raymond Camden (@cfjedimaster) üzerinde kod kalemi.

Gelmek için daha fazla

Buna daha yeni bakmaya başladım ama kesinlikle daha fazlasını kazmak istiyorum. Web bileşenleriyle çalışmayı kolaylaştırmayı amaçlayan birden fazla proje var (bakmayı planlıyorum Aydınlatılmış ve şablon) ama her zaman olduğu gibi, bunu vahşi doğada kullanan insanlardan haber almak isterim. Bunları işinize uyguladıysanız ve ne düşündüğünüzü bana bildirin.

fotoğrafı çeken Xavi Cabrera üzerinde Sıçramayı kaldır

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.