자체 구성 요소 기반 JavaScript 라이브러리
22086 단어 programmingwebdevbeginnersjavascript
그것들은 모두 구성 요소에 기초한 것이다!
본고에서, 우리는 좋은 구식 일반 자바스크립트를 가진 구성 요소를 사용하는 간단한 전단 라이브러리를 만들 것이다.이것은 우리가 구성 요소를 더욱 잘 이해하고 순수한 JavaScript에서의 기술을 향상시키는 데 도움이 될 수 있다.
선결 조건
본고의 JavaScript 부분을 깊이 연구하기 전에 프로젝트 구조를 설정해야 합니다.이를 위해 component library라는 새 폴더와 다른 하위 폴더와 파일을 만들었습니다.
$ mkdir component-library
$ cd ./component-library
$ mkdir lib style components
$ touch index.html index.js ./style/styles.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style/styles.css">
</head>
<body>
<main id="app"></main>
<script type="module" src="index.js"></script>
</body>
</html>
body {
background-color: cornflowerblue
}
a {
text-decoration: none;
color: white;
}
.article {
border: 1px solid cornflowerblue;
margin: 0px 2px 5px 2px;
padding: 10px 15px 15px 15px;
background-color: white;
}
도서관 이름은 Eszett
나는 먼저 도서관이 이미 존재하는 척하는 것을 좋아한다.따라서 우리가 먼저 주목해야 할 것은 색인이다.js.
파일의 맨 위에 있는 라이브러리를 가져와서 새 응용 프로그램을 실례화해야 합니다.
// All our imports are here
import ß from ‘./lib/Eszett.js’;
// Initialize app
const app = new ß('app');
$ touch ./lib/Eszett.js
class ß {
constructor(selector) {
this.eszettElement = document.querySelector(`#${selector}`);
console.log(‘Eszett initialized!’);
}
}
export default ß;
구성 요소
이를 위해서는 다음과 같은 두 가지 작업이 필요합니다.
모든 등록 구성 요소를 저장하는 필드
registerComponent 방법
우선, 우리는 컨트롤러 바로 위의 구조 함수에 다음 줄을 추가합니다.로그:
this.components = {};
registerComponent(component {
this.components[component.name] = component;
}
그 후, 우리의 지수.js는 다음과 같이 해야 합니다.
// All our imports are here
import ß from ‘./lib/Eszett.js’;
import MenuComponent from ‘./components/MenuComponent.js’;
// Initialize app
const app = new ß(‘app’);
// Adding our Components to the App
app.registerComponent(MenuComponent)
$ touch ./components/MenuComponent.js
// Import statements
import Component from '../lib/Component.js';
// HTML-Template
const menuTemplate = (state) =>`
<header>
<h1>
<a href="#/posts">${state.name}'s Blog</a>
</h1>
</header>
`;
// Component
const MenuComponent = new Component(
'menu',
{
name: 'Jakob'
},
menuTemplate);
export default MenuComponent;
구성 요소 자체를 보면, 우리는 그것이 세 개의 매개 변수에서 전달되는 것을 볼 수 있다.첫 번째 매개 변수는 구성 요소 자체의 이름이고, 두 번째 매개 변수는name라는 단일 속성을 가진 대상입니다.이것은 우리가 menuTemplate에 전달한 상태 대상이자 마지막 매개 변수입니다.
이 모든 것이 작용하기 위해서, 우리는 우리의 구성 요소를 실현해야 한다.js.먼저 다음과 같은 파일을 만들어야 합니다.
$ touch ./lib/Component.js
class Component {
constructor(name, state, template) {
this.name = name;
this.state = state;
this.template = template;
}
view() {
return this.template(this.state);
}
}
export default Component;
번역하다
우리는 구성 요소를 만들고 응용 프로그램에 등록할 수 있지만, 구성 요소 HTML을 표시할 수 없습니다.이 문제를 해결하기 전에, 나는 응용 프로그램에 PostsComponent를 추가하여 우리가 두 개의 구성 요소를 동시에 보여줄 수 있도록 하고 싶다.
그러려면 다음과 같이 등록해야 합니다.
// All our imports are here
import ß from './lib/Eszett.js';
import MenuComponent from './components/MenuComponent.js';
import PostsComponent from './components/PostsComponent.js';
// Initialize app
const app = new ß('app');
// Adding our Components to the App
app.registerComponent(MenuComponent);
app.registerComponent(PostsComponent);
$ touch ./components/PostsComponent.js
import Component from '../lib/Component.js';
const postsTemplate = (state) => `
${state.posts.map(post => `
<li>
<div class="article">
<h3>${post.title}</h3>
<p>${post.text}</p>
</div>
</li>`).join('')}
`;
const PostsComponent = new Component(
'posts',
{
posts: [{
title: 'My first blog post',
text: 'This is my first blog post EVER, its awesome!'
},
{
title: 'Writing my own component library',
text: 'In this article I want to share with you my experience on how to write a component library!'
}],
},
postsTemplate
);
export default PostsComponent;
class ß {
constructor(selector) {
this.eszettElement = document.querySelector(`#${selector}`);
this.components = {};
console.log('Eszett initialized!');
}
registerComponent(component) {
this.components[component.name] = component;
this.updateView();
}
updateView() {
if (this.components) {
let mergedViews = '';
Object.keys(this.components).forEach(key => {
mergedViews += this.components[key].view()
});
this.eszettElement.innerHTML = mergedViews;
}
}
}
export default ß;
다음은 뭘까요?
우리는 방금 Eszett라는 작은 도서관을 세웠다.격리 상태와 자체 HTML 템플릿을 포함하는 구성 요소를 만들 수 있습니다.이 구성 요소들은 응용 프로그램 단계에서 등록하고 보여줄 수 있다.
우리는 또 다른 기능을 추가할 수 있다.예를 들어, 특정 라우트에 특정 구성 요소의 라우터를 표시하거나 다른 구성 요소에 구성 요소를 중첩하여 상태를 전달할 수 있습니다.
자바스크립트 기술을 향상시키기 위해 새로운 기능을 추가하기만 하면 사용과 동시에 마음껏 즐길 수 있습니다!
평소와 같이, 너는 나의 GitHub에서 이 프로젝트의 코드를 찾을 수 있다.
사진은 Susan Yin에서 Unsplash으로 촬영되었다
Reference
이 문제에 관하여(자체 구성 요소 기반 JavaScript 라이브러리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/klamserdev/your-own-component-based-jlibrary-4o60텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
