Hướng dẫn javascript components example - ví dụ về các thành phần javascript

Hôm qua, chúng tôi đã xem xét các thành phần web là gì. Hôm nay, tôi muốn chia sẻ làm thế nào để thực sự tạo ra một.

Nào cùng đào vào bên trong!

Hôm nay, bài viết của Viking là một đoạn trích từ khóa học mới và ebook của tôi trên các thành phần web với vani JS.

Tạo một thành phần web

Để giúp làm cho các khái niệm trong hướng dẫn này hữu hình, chúng tôi sẽ xây dựng một thành phần web thực sự đơn giản: greeting-message.

<greeting-message>greeting-message>

Khi chúng tôi hoàn thành, thành phần sẽ tải button vào UI và hiển thị một thông báo chào mừng khi nhấp vào button. Nếu một thuộc tính

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

Chúng tôi cũng bao gồm một số kiểu dáng tùy chỉnh và thêm một số móc mà các nhà phát triển có thể sử dụng để tùy chỉnh nó một chút (mà không phá vỡ mọi thứ).

Đăng ký một thành phần web

Để tạo một thành phần web, điều đầu tiên bạn phải làm là đăng ký nó với JavaScript.

Để làm điều đó, trước tiên chúng tôi sẽ sử dụng một lớp JavaScript để mở rộng đối tượng

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

Hãy để Gọi đây là một

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

Sau khi chúng tôi tạo lớp mới của mình, chúng tôi cần xác định thành phần của mình bằng phương pháp

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

Đối số đầu tiên là

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

Đối số thứ hai là

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

.

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

Bây giờ, chúng tôi đã đăng ký một thành phần web mới. Nó không làm gì cả, nhưng nó tồn tại!

Vòng đời thành phần web

Khi trình duyệt phân tích cú pháp và hiển thị thành phần web của bạn vào DOM, có một vài chức năng gọi lại vòng đời chạy vào các thời điểm khác nhau.

• Phương thức

  // Extend the HTMLElement class to create the web component
  class GreetingMessage extends HTMLElement {
  	// We'll create our web component here
  }
  
  // Define the new web component
  if ('customElements' in window) {
  	customElements.define('greeting-message', GreetingMessage);
  }
  

  1 được chạy khi phần tử được tạo, trước khi được tiêm vào UI.
• Phương pháp

  // Extend the HTMLElement class to create the web component
  class GreetingMessage extends HTMLElement {
  	// We'll create our web component here
  }
  
  // Define the new web component
  if ('customElements' in window) {
  	customElements.define('greeting-message', GreetingMessage);
  }
  

  2 được chạy khi phần tử được đưa vào DOM và một lần nữa bất cứ khi nào nó di chuyển hoặc được thêm vào nơi khác.
• Phương thức

  // Extend the HTMLElement class to create the web component
  class GreetingMessage extends HTMLElement {
  	// We'll create our web component here
  }
  
  // Define the new web component
  if ('customElements' in window) {
  	customElements.define('greeting-message', GreetingMessage);
  }
  

  3 được chạy bất cứ khi nào phần tử bị xóa khỏi DOM.

Chúng tôi có thể bao gồm các chức năng chạy trên mỗi sự kiện này trong lớp thành phần web của chúng tôi.

Bởi vì chúng tôi mở rộng một lớp hiện có, hàm

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {

	/**
	 * The class constructor object
	 */
	constructor () {

		// Always call super first in constructor
		super();

		console.log('Constructed', this);

	}

	/**
	 * Runs each time the element is appended to or moved in the DOM
	 */
	connectedCallback () {
		console.log('connected!', this);
	}

	/**
	 * Runs when the element is removed from the DOM
	 */
	disconnectedCallback () {
		console.log('disconnected', this);
	}

}

Nếu bạn bao gồm một thành phần web trong UI và không làm gì khác trên trang, phương thức

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

// On page load, the browser would log...
// "Constructed" 
// "connected!" 

Nếu bạn di chuyển phần tử của mình bằng cách sử dụng một cái gì đó như phương thức

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

Nếu bạn loại bỏ nó bằng phương pháp

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {

	/**
	 * The class constructor object
	 */
	constructor () {

		// Always call super first in constructor
		super();

		console.log('Constructed', this);

	}

	/**
	 * Runs each time the element is appended to or moved in the DOM
	 */
	connectedCallback () {
		console.log('connected!', this);
	}

	/**
	 * Runs when the element is removed from the DOM
	 */
	disconnectedCallback () {
		console.log('disconnected', this);
	}

}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

let greeting = document.querySelector('greeting-message');

// The console logs...
// "disconnected" 
// "connected!" 
document.body.append(greeting);

// The console logs...
// "disconnected" 
greeting.remove();

Tạo thành phần web HTML

Bây giờ chúng tôi có một thành phần web đã đăng ký, chúng tôi cần tạo ra một số HTML thực tế trong UI.

Bên trong hàm

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {
	// We'll create our web component here
}

// Define the new web component
if ('customElements' in window) {
	customElements.define('greeting-message', GreetingMessage);
}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {

	/**
	 * The class constructor object
	 */
	constructor () {

		// Always call super first in constructor
		super();

		console.log('Constructed', this);

	}

	/**
	 * Runs each time the element is appended to or moved in the DOM
	 */
	connectedCallback () {
		console.log('connected!', this);
	}

	/**
	 * Runs when the element is removed from the DOM
	 */
	disconnectedCallback () {
		console.log('disconnected', this);
	}

}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {

	/**
	 * The class constructor object
	 */
	constructor () {

		// Always call super first in constructor
		super();

		console.log('Constructed', this);

	}

	/**
	 * Runs each time the element is appended to or moved in the DOM
	 */
	connectedCallback () {
		console.log('connected!', this);
	}

	/**
	 * Runs when the element is removed from the DOM
	 */
	disconnectedCallback () {
		console.log('disconnected', this);
	}

}

Trong trường hợp của chúng tôi, hãy để thêm một

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {

	/**
	 * The class constructor object
	 */
	constructor () {

		// Always call super first in constructor
		super();

		console.log('Constructed', this);

	}

	/**
	 * Runs each time the element is appended to or moved in the DOM
	 */
	connectedCallback () {
		console.log('connected!', this);
	}

	/**
	 * Runs when the element is removed from the DOM
	 */
	disconnectedCallback () {
		console.log('disconnected', this);
	}

}

// Extend the HTMLElement class to create the web component
class GreetingMessage extends HTMLElement {

	/**
	 * The class constructor object
	 */
	constructor () {

		// Always call super first in constructor
		super();

		console.log('Constructed', this);

	}

	/**
	 * Runs each time the element is appended to or moved in the DOM
	 */
	connectedCallback () {
		console.log('connected!', this);
	}

	/**
	 * Runs when the element is removed from the DOM
	 */
	disconnectedCallback () {
		console.log('disconnected', this);
	}

}

/**
 * The class constructor object
 */
constructor () {

	// Always call super first in constructor
	super();

	// Render HTML
	this.innerHTML =
		`

			Hi there!
		
		
`;

}

Bây giờ, khi thành phần web được tải, đây là những gì mà LỚN hiển thị trong DOM.

<greeting-message>
	<p>
		<button>Hi there!button>
	p>
	<div class="message" aria-live="polite">div>
greeting-message>

Bây giờ chúng tôi đã có một thành phần web cơ bản tại chỗ và kết xuất HTML vào UI. Ở đây, một bản demo.

Ngày mai, chúng tôi sẽ xem xét cách thêm tính tương tác.