사용자 정의 요소 또는: 걱정을 멈추고 웹 구성 요소를 사랑하는 법을 배웠습니다.
1344 버튼 구성 요소 라이브러리대부분의 단추는 Angular, Vue, React 등 프레임워크에 특정되어 있는데, 이것은 현재 웹에서 가장 유행하는 프레임워크이기 때문이다.그러나 단추 (또는 다른 구성 요소) 가 프레임워크와 호환되지 않는 것을 발견하면 어떻게 됩니까?
나의 전형적인 반응은 내가 좋아하는 것을 찾을 때까지 다음 라이브러리로 돌아가는 것이다.그러나 일부 라이브러리, 예를 들면Ionic은 너무 좋아서 무시할 수 없다.문제는 오랫동안 Ionic는 Angular만 지원하기 때문에 다른 프레임워크를 사용할 경우 비공식적인 패키지 라이브러리를 사용해야 한다는 것이다.
There should be a framework-agnostic solution!
우리는 세 가지 틀로 알 수 없는 방법으로 이 문제를 처리할 수 있다.
CSS 방법
CSS 라이브러리를 사용할 수 있습니다.좋은 예는 Bootstrap.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
<head> 에서 여러 가지 다른 단추가 있으며 마지막으로 <body> 의 하단에 필요한 JavaScript 라이브러리를 가져옵니다.
부트 버튼최종 결과는 좋지만 몇 가지 일을 해야 한다.
JavaScript 메서드
또 다른 솔루션은 Google Maps 같은 라이브러리에서 볼 수 있는 순수한 JavaScript를 사용하는 것입니다.
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</head>
<body>
<div id="map" style="height: 100vh; width: 100vw;"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
}
</script>
</body>
</html>
<body> 에 JavaScript 라이브러리를 포함할 수 있습니다.그런 다음 DOM 요소를 사용하여 어셈블리를 표시할 수 있습니다.
구글 지도 JS Magic이 해결 방안은 결국 더욱 깔끔해져서 책벌레로서 매우 좋다.그럼에도 불구하고 몇 가지 문제가 발생했다.
그렇다면 어떤 더 좋은 해결 방안이 있습니까?
웹 구성 요소 방법
보낸 사람https://www.webcomponents.org:
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
이것들의 규격은 무엇입니까?사용자 정의 요소, HTML 템플릿, 그림자 DOM 및 HTML 가져오기(비활성화) 등 4가지가 있습니다.비록 이 모든 규범들이 매우 중요하지만, 우리의 목적을 위해서, 사용자 정의 요소는 우리가 흥미를 느끼는 요소이다. (웹 구성 요소가 무엇인지 가장 곤혹스러워하는 요소이기도 하다.)
Custom Elements spec 새 HTML 태그를 만들고 기존 HTML 태그를 확장하는 방법에 대해 설명합니다.내장된 HTMLElement 클래스를 확장하여 JavaScript, HTML, CSS만 사용하여 재사용 가능한 DOM 요소를 구축할 수 있습니다.최종적으로 얻어진 모듈화 코드는 응용 프로그램에서 다시 사용하기 쉬우며 작성해야 할 코드가 더욱 적다.더 이상 500개의 다른 클래스를 기억할 필요가 없습니다!
사용자 정의 요소를 만드는 이유를 상상할 수 없다면, 제가 물어볼 수 있도록...
<head> 라벨을 되찾고 싶어요?답은: 사용자 정의 요소 만들기!// ES6 Class That Extends HTMLElement
class HelloWorld extends HTMLElement {
// We Can Have Attributes And Listen To Changes
static observedAttributes = [‘name’];
attributeChangesCallback(key, oldVal, newVal) {}
// We Can Get And Set Properties
set name(val) {}
get name() {}
// We Have Lifecycle Hooks
connectedCallBack(){}
disconnectedCallBack(){}
// We Can Also Dispatch Events!!!!
onClick() {
this.dispatchEvent(new CustomEvent(‘nameChange’, {}));
}
}
// Register to the Browser from `customElements` API
customElements.define(‘hello-world’, HelloWorld);
<blink> 방법으로 등록할 수 있습니다.활성 사용자 정의 요소
다음은 사용 중인 사용자 정의 요소의 예입니다. 장시간 사용하지 않는
define 태그입니다.요소의 논리 및 DOM에 등록된 코드는 <blink> 의 CDN에서 로드된 JavaScript 파일에 바인딩됩니다.그리고 우리 <head> 에서 <body> 태그는 다른 HTML 요소와 마찬가지로 사용됩니다.만약 이것이 진정한 사용자 정의 요소라고 믿지 않는다면, inspect the TS 파일을 사용하도록 요청합니다.<blink> 태그는 간단한 DOM 작업을 통해 작성할 수 있는 등록 요소입니다.사용자 정의 요소에 대한 자세한 내용은 다음 리소스를 권장합니다.
<blink> 라벨에 관심이 있으시면 GitHub 에서 제 코드를 찾을 수 있고, NPM 에서 이 라이브러리의 패키지 버전을 찾을 수 있습니다.내가 하는 모든 일을 따라잡기 위해 따라와라.만약 네가 생각하고 있다면, "코드를 보여줘!"너는 GitHub에서 나를 찾을 수 있다.
Reference
이 문제에 관하여(사용자 정의 요소 또는: 걱정을 멈추고 웹 구성 요소를 사랑하는 법을 배웠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/michaelsolati/custom-elements-or-how-i-learned-to-stop-worrying-and-love-web-components-2j7c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
