예를 들어 ajax를 사용하여 목록에 li을 삽입하려면 데이터와 html 태그를 완전한 html 문장으로 직접 연결한 다음 이를 ul에 삽입합니다. 데이터가 서버에서 검색되거나 사용자 입력에서 검색되는지 여부는 어느 쪽이든 동일합니다.
이 접합 프로세스는 JavaScript 파일에 배치할 때 매우 우아하지 않습니다. JavaScript에 스타일도 넣으면 데이터, 구조 및 스타일이 모두 하나의 냄비에 들어갑니다. 이러한 코드를 유지하면 사람들이 자살하고 싶어하게 됩니다. 가장 심각한 것은 페이지에 생성될 모든 HTML을 서버 측에 직접 배치하는 것입니다. Ajax가 내놓은 데이터에는
태그가 포함되어 있습니다. 스타일에는 백엔드 코드 수정이 필요합니다.
나중에 우리는 JavaScript에서 DOM 스타일을 사용자 정의하는 대신 CSS 파일에서 해당 클래스를 정의한 다음 JavaScript에서 이 클래스를 사용하면 된다는 것을 알게 되었습니다.
다음으로 해야 할 일은 JavaScript 템플릿을 사용하여 HTML 구조(이 경우 태그)를 JavaScript에서 분리하는 것입니다.
시장에는 많은 JavaScript 템플릿이 있습니다. 훌륭한 템플릿인 핸들바를 예로 들어 보겠습니다.
페이지의 HTML에서 템플릿을 정의합니다.
그런 다음 논리 JavaScript에서 우리가 넣을 수 있는 코드 데이터는 이 템플릿에 결합됩니다:
var source = $ ("#list-template").html(); //템플릿 소스는 일반적으로 html 스크립트에 배치됩니다. 여기서는 jQuery를 사용하거나 다른 방법을 사용하여 콘텐츠를 직접 가져올 수 있습니다. string
var template = Handlerbars.compile(source); //템플릿 템플릿을 컴파일하고 생성합니다.
var context = {title:"This is a todo item"} //데이터 가져오기, 데이터는 일반적으로 다음에서 가져옵니다. ajax 또는 input
var html = template(context ); //Data template = new html
자세한 로직은 공식 문서를 참조하세요. http://handlebarsjs.com/
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
