프레임워크 JS 없음

14894 단어 apijavascriptspabeginners
TL;DR

NoFrameworkJS

짧은 형식

다음에서는 첫 번째 단일 페이지 애플리케이션을 만드는 데 사용한 HTML, CSS 및 Javascript의 프레임워크를 보여 드리고자 합니다.
프레임워크(Vue, React 등) 또는 웹 구성 요소를 사용하지 않고.

소개

지금까지 저는 항상 고전적인 방식으로 웹사이트를 만들었습니다.
PHP는 데이터베이스에서 데이터를 가져와 템플릿을 생성합니다.
서버는 URL에 따라 매번 완전한 페이지를 생성하여 전달합니다.
브라우저는 페이지가 변경될 때마다 소스 코드를 다시 빌드해야 합니다.
대부분의 경우 페이지의 일부 내용만 변경되기 때문에 상당히 손이 많이 가는 작업이지만,
이것은 실질적인 부가 가치가 없는 많은 작업입니다.

새 보기에 필요한 데이터 부분만 로드하고 기존 소스 코드에 동적으로 통합하는 것이 더 우아합니다.
기존 소스 코드에 동적으로 통합합니다.
이 접근 방식은 Vue, React 또는 Angular와 같은 Javascript 프레임워크에서 이어집니다.
이러한 페이지는 Svelte 또는 웹 구성 요소를 통해 만들 수도 있습니다.
하지만 첫 번째 시도는 프레임워크의 허들이 너무 커서 익숙한 기술로 모든 것을 구현하기로 결정했습니다.
내가 익숙한 기술로 모든 것을 구현하려면:

데이터
웹사이트의 모든 데이터는 웹 서버에서 JSON 개체로 전달되어야 합니다. 이 예에서는 임의 콘텐츠를 생성하는 무료로 사용할 수 있는 API를 사용합니다.

파일 구조

index.html
├── css
│   └── styles.css
└── js
    ├── app.js
    ├── utils.js
    └── pages
        ├── StartPage.js
        ├── ProfilPage.js
        └── ImagePage.js

index.html 파일에는 탐색에 필요한 항목이 있는 목록, IDapp가 있는 DIV 요소 및 첫 번째 Javascript 파일에 대한 링크만 포함되어 있습니다.
중요, 이것은 module 로 통합되어야 합니다.

<body>
  <header>
    <ul>
      <li data-hash="">Start</li>
      <li data-hash="profil">Profil</li>
      <li data-hash="images">Images</li>
    </ul>
  </header>
  <div id="app"></div>
  <script type="module" src="./js/app.js"></script>
</body>

App.js 에서 개별 페이지의 스크립트와 도움말 기능이 있는 스크립트를 먼저 가져옵니다.

import StartPage from './pages/StartPage.js';
import ProfilPage from './pages/ProfilPage.js';
import ImagePage from './pages/ImagePage.js';
import u from "./utils.js"


그런 다음 utils.js의 함수가 호출되어 내비게이션 클릭에 반응하고 각 data-hash의 콘텐츠를 브라우저의 주소 표시줄로 가져옵니다.

이 해시에 대한 변경 사항은 다음 이벤트 리스너를 통해 등록된 다음 router() 함수가 호출됩니다.

window.addEventListener('DOMContentLoaded', router);
window.addEventListener('hashchange', router);

function router() {

    let page = u.getHashFromURL();
    switch (page) {

        case '/':
            StartPage.render();
            break;

        case 'profil':
            ProfilPage.render();
            break;

        case 'images':
            ImagePage.render();
            break;

        default:
            StartPage.render();
            break;
    }
}


이 함수는 먼저 URL에서 해시를 읽고 특정 페이지 보기를 렌더링하는 데 사용합니다.

페이지 뷰의 구조를 살펴보기 전에 utils.js의 두 가지 기능을 간단히 소개해야 합니다.

이 함수는 문자열 <style> 및 ID styleTags의 내용으로 HTML 파일의 헤더에 styleID 태그를 생성합니다.

createStyle: async(styleID, styleTags) => {
    if (!document.getElementById(styleID + "Style")) {
        var style = document.createElement("style");
        style.type = "text/css";
        style.id = styleID + "Style";
        style.innerHTML = styleTags;
        document.getElementsByTagName("head")[0].appendChild(style);
    }
},


이 함수는 요소el의 HTML 코드를 문자열innerHTML로 바꿉니다.

setInnerHTML: async(el, innerHTML) => {
    let element = document.getElementById(el);
    element.innerHTML = innerHTML;
},


마지막으로 항상 동일한 패턴을 따르는 개별 페이지의 구조입니다.
  • 헤더에 CSS 코드 통합
  • ID가 있는 요소에 HTML 코드 삽입app
  • API에서 데이터를 로드하고 DOM에 통합합니다.

    • let TextPage = {
    render: async() => {
        u.createStyle('TextPage_style', Style);
        await Content();
        await getData();
    }
};

export default TextPage;


    마지막 줄은 다른 파일로 내보낼 개체를 해제합니다.

    CSS와 HTML 부분은 기본적으로 동일하지만 다른 방식으로 구현할 수 있습니다.
  • 개체에서 함수 호출이 포함된 문자열로:

    • const Style = /*CSS*/ `
    #TextPage h2 {
        color: blue;
    } 

    #TextPage p{
        font-family: sans;
    }`;


  • 또는 함수가 나중에 바로 호출됩니다.

    • let Content = async() => {
    let innerHTML = /*HTML*/ `
    <div id=TextPage>
       <h1> nonsense Text</h1>
       <h2 id=sentence></h2>
       <p id=paragraph></p>
    </div>`;
    await u.setInnerHTML('app', innerHTML);
}


    마지막으로 실제 데이터만 누락되었습니다. 이것은 가져오기를 사용하여 API에서 가져오고 getElementById()를 사용하여 해당 태그에 통합됩니다.

    let getData = async() => {
    fetch('https://random-data-api.com/api/hipster/random_hipster_stuff')
        .then((resp) => resp.json())
        .then(function(data) {
            document.getElementById('sentence').innerHTML = data.sentence;
            document.getElementById('paragraph').innerHTML = data.paragraph;
        })
}


    그게 다야.

    물론 이 시스템은 원하는 만큼 확장할 수 있으며, 특히 계속해서 필요한 구성 요소(슬라이드 쇼)는 별도의 파일에 저장할 수 있습니다.

    이 방법과 내 설명에 대한 건설적인 비판을 부탁드립니다(이런 글을 쓴 것은 처음입니다).

    Github에서 완전한 예제를 찾을 수 있습니다: NoFrameworkJS
    bash 스크립트 실행 중인 덮어쓰기 동작
    루비의 해시든!!얄미운 녀석

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage