VueJS가 너무 많은 경우 웹 구성 요소
28559 단어 webcomponentsvuewebdevjavascript
그러나 간단한 구성 요소가 필요하거나 내가 원하는 요소에 동적 데이터가 없을 때, 나는 스스로에게 "정말 React/Vue가 필요합니까?"라고 묻는다.🤔"이것이 바로 웹 구성 요소의 용무의 땅입니다.
웹 구성 요소는 요소 자체가 아니라 여러 가지 기능으로 많은 것을 완성할 수 있습니다. 그 중 하나는 사용자 정의 요소를 만들어서
input, div과 다른 요소처럼 사용할 수 있습니다.자, 시작합시다.
첫 번째 단계: 구성 요소 정의
한 가지 방법은
HTMLElement 인터페이스를 실현하는 클래스를 만들고 customElements.define 함수를 사용하여 그 인터페이스의 이름을 표시하는 것이다.MDN.에 따르면
The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
//component.js
class MyComponent extends HTMLElement {
constructor(){
super();
console.log("My component works!");
}
}
customElements.define("my-component", MyComponent); //Register the new element
coolcomponent이라는 구성 요소를 만들 수 없기 때문입니다. 이 이름은 x-cool-component 또는 cool-component과 유사해야 합니다.이제 HTML 파일에
component.js을 포함할 때 방금 만든 구성 요소를 사용할 수 있습니다.<!-- index.html -->
<body>
<h1>Hello world!</h1>
<my-component></my-component>
</body>
"My component works!"이라는 메시지가 표시됩니다. 이는 구성 요소가 정상적으로 작동하고 있음을 의미합니다.2단계: 요소 라이프 사이클
Vue에서처럼 라이프 사이클 콜백도 있습니다.
connectedCallback: 이것은 우리의 요소가 과장된 후에 호출된 것입니다.disconnectedCallback: 원소가 제거될 때 이 함수를 호출합니다.//component.js
class MyComponent extends HTMLElement {
constructor(){
super();
console.log("My component works!");
}
connectedCallback(){
console.log("Mounted!")
}
disconnectedCallback(){
console.log("Unmounted!")
}
}
customElements.define("my-component", MyComponent);
<!-- index.html -->
<body>
<h1>Hello world!</h1>
<my-component id="mycomponent"></my-component>
<button onclick="document.getElementById('mycomponent').remove()">Remove Component</button>
</body>
"Unmounted!"을 보았다.STEP 3: 우리 뭐 좀 하자.
이제 우리는 사용자 정의 요소를 어떻게 만드는지 기본 지식을 습득했으니 그것을 사용하자!시계 소자도 좋은 예다.
경고!!!!,코드 폭탄 습격!!!!!💣💣💣
//component.js
class ClockElement extends HTMLElement {
constructor(){
super();
// Time update interval id
this.intervalID = 0;
}
pad(str){
if(str.length == 1){
str = "0"+str
}
return str;
}
//Check if hour is pm or am
pmOrAm(hour){
return Number(hour) < 12 ? "am" : "pm";
}
getTimeString(){
const date = new Date();
const seconds = date.getSeconds().toString()
const hours = date.getHours().toString()
const minutes = date.getMinutes().toString()
var hoursNumber = Number(hours)
var regularHOurs = hoursNumber-12<=0? hoursNumber : hoursNumber-12;
return this.pad(regularHOurs.toString())+":"+this.pad(minutes)+":"+this.pad(seconds)+" "+this.pmOrAm(hours)
}
disconnectedCallback(){
//Clear the timer interval
clearInterval(this.intervalID);
console.log("Unmounted")
}
connectedCallback(){
//Start the timer
this.intervalID = setInterval(()=>{
this.innerHTML = this.getTimeString()
},1000);
console.log("Mounted")
}
}
customElements.define("x-clock",ClockElement)
ClockElement으로 이름을 바꾸고 x-clock connectedCallback pad 메서드는 0을 단일 숫자에 추가하여 00:09:16처럼 보이지만 실제 시간은 0:9:16 pmOrAm 메서드는 시간 getTimeString 방법은 매우 복잡해 보이지만 실제로는 복잡하지 않다. 우리는 현재의 시간, 분, 초를 가져와 아름다운 문자열로 바꾸어 12시간 형식으로 시간 connectedCallback에서 1000밀리초(1초)마다 요소의 innerHTML을 현재 시간 disconnectedCallback에서 타이머를 제거했습니다.<!-- index.html -->
<body>
<h1>Hello world!</h1>
<x-clock></x-clock>
</body>
4단계:속성
지금까지 우리의 시계는 보기에는 괜찮았지만, 그것은 더욱 좋았다. 우리는 현재 우리가 선택한 속성에 따라 24시간 또는 12시간 형식을 표시할 것이다.나는 개인적으로 이런 문법을 좋아한다.
<x-clock military></x-clock>
따라서 속성의 존재성을 부울 값으로 사용하는 것이 목표입니다.
getTimeString(military){
const date = new Date();
const seconds = date.getSeconds().toString()
const hours = date.getHours().toString()
const minutes = date.getMinutes().toString()
if(typeof military == "string"){
return this.pad(hours)+":"+this.pad(minutes)+":"+this.pad(seconds)
} else {
var hoursNumber = Number(hours)
var regularHOurs = hoursNumber-12<=0? hoursNumber : hoursNumber-12;
return this.pad(regularHOurs.toString())+":"+this.pad(minutes)+":"+this.pad(seconds)+" "+this.pmOrAm(hours)
}
}
disconnectedCallback(){
//Clear the timer interval
clearInterval(this.intervalID);
console.log("Unmounted")
}
connectedCallback(){
const military = this.getAttribute("military")
this.innerHTML = this.getTimeString(military)
this.intervalID = setInterval(()=>{
this.innerHTML = this.getTimeString(military)
},1000);
console.log("Mounted")
}
getTimeString에 추가된 새 코드를 확인하면 다음과 같은 속성을 설정할 때 매우 이상한 문장인 typeof military == "string"이 표시됩니다.<x-clock military></x-clock>
""이고javascript에서false에 해당하기 때문에 이 속성이 존재하더라도 if(military)은false로 되돌아옵니다지금 우리는 속성을 추가해서 12시간 또는 24시간 형식으로 표시할 것을 선택할 수 있습니다!
<!-- index.html -->
<body>
<h1>Hello world!</h1>
<x-clock></x-clock>
<x-clock military></x-clock>
</body>
5. 반응 상태
우리의 원소는 현재 운행할 때 상태를 바꾸지 않습니다. 설령 우리의 속성이 상태를 바꾸었다 하더라도 개선할 수 있을 것 같습니다.이제 우리는 원소가 속성 변경에 반응하도록 할 것이다.
이를 위해 우리는
MutationObserver을 사용하는데 이것은 원소의 어떠한 변화도 관찰하는 데 도움이 된다.좋은 점은 원소 구조 함수에 있다.
MutationObserver 구조 함수는 원소가 바뀔 때마다 지정한 리셋을 호출하는 MutationObserver를 되돌려줍니다. constructor(){
super();
// Time update interval id
this.intervalID = 0;
this.observer = new MutationObserver((mutations)=>{
for(var mutation of mutations){
if(mutation.type == "attribute"){
// React to changes
}
}
});
this.observer.observe(this,{
attributes: true // Only listen for attribute changes
});
}
this.observer이 아니라 const observer에 분배할 것이다. 왜냐하면 우리는 disconnectedCallback의 탐지기를 정리해야 하기 때문이다. disconnectedCallback(){
//Disconnect observer
this.observer.disconnect();
//Clear the timer interval
clearInterval(this.intervalID);
console.log("Unmounted")
}
const military을 this.military으로 변경해야 한다. constructor(){
super();
// Time update interval id
this.intervalID = 0;
this.observer = new MutationObserver((mutations)=>{
for(var mutation of mutations){
if(mutation.type == "attribute"){
// React to changes
this.military = this.getAttribute("military");
}
}
});
this.observer.observe(this,{
attributes: true // Only listen for attribute changes
});
}
//Other code
connectedCallback(){
this.military = this.getAttribute("military")
this.innerHTML = this.getTimeString(this.military);
this.intervalID = setInterval(()=>{
this.innerHTML = this.getTimeString(this.military);
},1000);
console.log("Mounted");
}
우리 망했어.🎉🎉🎉🎉🎉🎉🎉🎉
우리는 사용자 정의 요소를 만들었을 뿐만 아니라 변경에 대해 동적 반응을 하게 했다.이것은 웹 구성 요소가 무엇을 할 수 있는지의 표면에만 닿을 뿐, 나는 당신들이 그것을 어떻게 사용할 것인지를 보고 싶어 죽을 지경이다.
다시 한 번 강조하지만 이것은 VUEJ(또는 해당 제품)의 대체품이 아니라 Vue가 과도하게 사용할 때의 대체품일 뿐이다
읽어주셔서 감사합니다!!
Reference
이 문제에 관하여(VueJS가 너무 많은 경우 웹 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/neutrino2211/web-components-for-when-vuejs-is-too-much-8em텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
