예전 방식 - 대부분의 사람들이 사용하는 방식이기도 한 것 같아요
예를 들어 다음 코드는 Sina 홈페이지의 js 코드에서 가져온 것입니다. 이 방법도 대부분의 사람들이 사용하는 방식입니다.
위 코드를 읽고 어떤 반응을 보이시나요? = 형식을 배열의 푸시 형식으로 변경할 수도 있습니다. 어떤 사람들은 푸시가 이런 문자 링크보다 빠르다고 하지만 그다지 빠르지는 않습니다.
삽입된 HTML 코드가 많으면 이렇게 처리해야 하나요? 특정 html을 수정(추가, 삭제)하면 계속해서 코드를 뒤져 해당 태그를 찾고, 끝 태그를 찾아야 하는 번거로움이 없으신가요? 어쩌면 누군가는 이렇게 쓸지도 모릅니다. (이것은 제가 초기에 쓴 것이고, 또한 제가 가장 익숙하게 사용하는 방식이기도 합니다.)
위 코드도 유지 관리가 매우 힘들기 때문에 UI에 태그를 추가하거나 HTML 구조를 수정하면 머리가 아플 때가 많습니다.
페이지 템플릿 - 새로운 방식
최근에 살펴보던 페이스북의 js 코드인데, 우연히 다음 방식이 좋아보여서 많은 분들과 공유하고 싶습니다.
내 index.html 코드를 보세요
내 JS 코드를 보세요
위의 html 코드를 유지하는 것은 매우 쉽습니다. 다음에 html 코드 구조를 어떻게 변경하더라도 변경하는 것이 매우 편리할 것입니다.
요약
위 코드에는 문제가 많습니다. 기분 나빠하지 마세요. 이것은 단지 단순화된 버전일 뿐입니다.
현재 템플릿은 단순 변수 교체만 지원하며, if 태그, for 태그 등 아직 개발되지 않은 기능도 많이 있으니 관심 있으신 분들은 한번 시도해 보시기 바랍니다. 우리는 알고 있습니다. 스마티와 비슷한 오픈소스 프레임워크를 만들 수 있다면, 하하, 오픈소스 산업에도 어느 정도 기여할 수 있지 않을까요?
저자: Pangolin