기존 HTML 페이지의 모듈식 로딩을 구현하는 방법

웹사이트의 경우 머리글, 바닥글, 사용자 열 등과 같이 여러 페이지 간에 공유되는 모듈이 많이 있습니다. 백엔드 뷰 엔진이 있는 프레임워크의 경우 이러한 공유는 상대적으로 쉽게 추출할 수 있습니다. 예를 들어 asp.net mvc에는 통합 레이아웃 MasterPage, @Section 및 뷰 템플릿 기능을 공유할 수 있는 기타 기능이 있습니다. 그러나 HTML의 경우에는 이러한 기능을 사용할 수 없으므로 순수 HTML 페이지를 사용하여 응용 프로그램 웹 사이트를 작성하는 경우 IFrame을 중첩할 수 있지만 이러한 반복 작업에 직면해야 할 수 있습니다. 이 구현 방법은 이상적이지도 친숙하지도 않습니다.

최근 자체 프레임워크를 기반으로 웹사이트를 구현했는데, 프레임워크에 백엔드 뷰 엔진이 없어서 이런 문제가 발생했는데... 먼저 실제 상황을 살펴보겠습니다.

위의 두 HTML 페이지는 핵심 부분을 제외하고는 고유하며, 다른 데이터 블록은 동일합니다. 백엔드 뷰 엔진이 없다면 어떻게 생각하시나요... 처음에는 모든 수정 사항이 다른 페이지와 동기화되어야 합니다. 나중에 나는 이렇게 하면 틀림없이 나를 죽음에 이르게 할 것이라는 것을 알게 되었습니다. 잠시 고민한 끝에 해결책을 생각해냈습니다.

곰곰히 생각해보니 공개 템플릿을 다음과 같이 HTML 파일(파일 이름은 PublicModule.html 가칭)로 추출할 수 있다는 것을 알았습니다.

 <템플릿> <템플릿 id=헤더> <div 클래스=navbar-header> <버튼 클래스=navbar-toggle 축소 유형=버튼 data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> 탐색 전환</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Net 라이브러리</a> </div> <div class=navbar-collapsecollapse role=navigation> <div 스타일=마진-상단:15px;마진-왼쪽:120px; 위치:절대;><스팬 style=color:white;padding-top:20px;>XXXXX</span></div> <ul class=nav navbar-nav></ul> <ul class=nav navbar-nav navbar-right> <li> <a href=/Blog.html>블로그</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>웹사이트 관리</a></li> </ul> </div> </template > <template id=doc_tags_navbar> <div class=container-fluid style=padding:0px;> <ul class=nav navbar-nav btn-group-sm id=tagbar> <li><a style=font-weight:bold; padding-bottom:6px;padding-top:6px; href=/index.html>홈페이지</a></li> <li v-for=item in Data><a v- 바인딩:제목=항목.비고 스타일=글꼴-가중치:굵게; 패딩-하단:6px;패딩-상단:6px; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; tagbarControl = new Vue({ el: '#tagbar', data: { Data: [] } }); var result = wait $ListDocTags(); tagbarControl.Data = result.Data } ListDocTags();

템플릿 태그를 통해 템플릿 블록을 정의한 후 각 블록에 고유한 ID를 정의합니다. 일부 학생들은 템플릿이 유효한 HTML 태그가 아니라고 질문할 수 있는데 어떻게 처리해야 할까요? 올바른 템플릿 브라우저는 이를 처리할 수 없지만 JQuery는 이 시점에서 일부 학생들이 원리를 이해한다고 믿습니다.

모듈이 정의된 후 HTML에서 이를 참조하는 방법은 무엇입니까? 실제로 HTML은 이러한 기능을 지원하지 않지만 JQuery에서 해석할 HTML에 대한 일부 사용자 정의 속성을 정의할 수 있습니다. 여기서는 템플릿 ID를 지정하는 슬롯 속성을 정의합니다.

 <div class=navbar navbar-inverse navbar-fixed-top> <div class=container 슬롯=헤더> </div> </div> <nav class=navbar navbar-default style=padding:0px;margin:0px;min -높이:0px; 슬롯=doc_tags_navbar> </nav>

템플릿이 정의되고 페이지의 HTML도 참조됩니다. 다음으로 템플릿을 통합해야 합니다. 이쯤 되면 JQuery에 익숙한 친구들은 무엇을 해야 할지 감이 잡혔을 거라 믿습니다. :)

JQuery의 경우 공용 모듈 페이지를 로드하여 DOM으로 변환한 다음 해당 요소를 페이지에 정의된 슬롯으로 바꿀 수 있습니다.

 function moduleLoad(url) { $.get(url, function (result) { var html = $(result); var __templates = html; $([slot]).each(function () { var id = $(this) .attr('slot'); var body = $(__templates).find('#' + id).html(); }); });}$(document).ready(function () { moduleLoad(/PublicModule.html);});

코드는 간단하고 효과적입니다. 전체 스크립트를 파일에 저장한 다음 페이지에 추가하면 자동으로 로드됩니다.

한 번에 로드할 수 있는 HTML 페이지에 이제 Ajax 로딩이 필요합니까? 로딩 속도가 느려지지 않나요? 실제로 공용 모듈의 HTML 페이지에 대해 로컬 캐시 전략을 사용할 수 있으므로 공용 부분이 추출되므로 모듈을 로드할 때 모든 페이지를 로컬에서 직접 가져올 수 있으며 관련 페이지의 누적이 더 작아지고 로딩 속도가 더 빠릅니다.

서버측 뷰 엔진을 사용하는 데 익숙한 사람들에게는 HTML/JS 프런트엔드 개발 모델을 완전히 사용하는 것이 다소 어려울 수 있습니다. 그러나 전적으로 HTML/JS를 기반으로 하는 프런트 엔드 개발에는 서비스 해석이 필요하지 않으므로 HTML이 더 나은 지역화된 캐싱을 수행할 수 있으며 현재 이를 허용하는 HTML/JS 프레임워크가 많이 있습니다. 당신이 작성하는 것이 더 쉽고 간단합니다.

위 내용은 전통적인 HTML 페이지의 모듈러 로딩을 구현하기 위해 에디터가 소개하는 방법입니다. 궁금한 사항이 있으면 메시지를 남겨주시면 에디터가 제 시간에 답변해 드리겠습니다.