JQuery를 사용하는 정적 웹 사이트를 작성하여 RESTful API에 대한 AJAX 호출을 만들고 데이터로 페이지를 채 웁니다.HTML의 재사용 요소
사이트가 올바르게 (그리고 신속하게) 작동하며 모든 것이 좋습니다.
사이트를 확장하고 추가 페이지를 추가함에 따라 모든 페이지에서 특정 지역을 복제하고 있음을 알게되었습니다.
예를 들어, 각 페이지는 공통 header 요소를 공유합니다.
<header>...Some non-trivial content...</header>
각 페이지에서이 정의를 반복하는 대신,이 섹션을 한 번 정의하고 각 문서에 포함 할 수있는 메커니즘이 있습니다.
정적으로 페이지를 제공해야하지만 표준 불만 브라우저 기능을 활용할 수 있습니다.
좋은 방법이 있습니까? 내 클라이언트 측 코드의 측면에 대해 DRY principles을 포기해야합니까?
분명히 이것을 달성 할 수있는 방법이 있습니다. 페이지의 내용을 다른 페이지에 포함시킬 수있는 서버 측 언어의 기능을 사용하거나 서버 측 기술이없는 경우 코드를 자신의 HTML 문서에 넣기 만하면됩니다 AJAX를 사용하여 콘텐츠를로드하십시오.
는 jQuery를 그것은 볼 수 있었다 같은 :$('#header').load('header.html');
그러나 모든 페이지에 대한 정적 컨텐츠 isin't, 당신은 항상이 헤더를 렌더링 할 책임 일 것 JS 모듈을 정의 할 수 있다면. 모듈은 Mustache, Handlebars 등과 같은 클라이언트 측 템플릿 엔진을 사용할 수 있습니다. 그러나 이들 중 어느 것도 사용할 필요는 없습니다.
//in somefile.js, please note that you should namespace your modules
var Header = {
//default config
config: {
el: '#header',
title: 'Some title'
},
init: function (config) {
var cfg = this.config = $.extend({}, this.config, config);
$(cfg.el).html('<h1>' + cfg.title + '</h1>');
}
};
$(function() {
Object.create(Header).init({
title: 'Some other title'
});
Object.create(Header).init({
el: '#header1',
title: 'Yeah'
});
});
직선 HTML을 사용하는 경우 SSI include 명령을 사용하거나 템플릿 페이지를 작성하여 jQuery에 포함시킬 수 있습니다. 이러한 링크는 모두 당신이
Include another HTML file in a HTML file 및 http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm
SSI 포함은 서버에서 동적 처리가 필요합니다. – Jodrell
이미 AJAX 데이터와 귀하의 사이트를 채우기 위해 호출을 사용하고 있기 때문에, 당신은 일반적인 지역에 대한 동일한 기능을 수행 할 수 있습니다 도움이 될 수 있습니다.
해당 영역의 HTML을 별도의 파일에 저장하고 AJAX로 페이지에로드하면됩니다. 또한 각 페이지로드시 서버의 전체 내용을 다시로드하지 않도록 해당 파일의 Cache-Control 헤더를 사용하여 캐싱 작업을 수행 할 수 있습니다.
매우 간단하면 jQuery .clone() 함수입니다.
더 복잡한 콘텐츠가있는 경우 본격적인 JS 템플릿 엔진 인 Handlebars.js을 확인하는 것이 좋습니다.
어떻게 페이지간에 '복제'()를해야합니까? – Johan
새 페이지가 필요할 때 이것이 어떻게 작동하는지 알지 못합니다. –
jQuery의 ajax를 사용하여 헤더 파일을로드 할 수 있습니다. 각 파일에 당신과 같이 HTML을로드 할 수 :
$('#header').load('header.html');
내가 코멘트에서 언급 한 바와 같이,이는 내가 어떻게 :
main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main page</title>
<sript src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('#commonsection').load('reusablefile.htm');
// which is eqvivalent to:
//
// $.ajax({
// url: 'reusablefile.htm',
// dataType: 'html',
// success: function(data){
// $('#commonsection').html(data);
// }
// });
});
</script>
</head>
<body>
<div id="commonsection"></div>
</body>
</html>
reusablefile을 .html :
<script>
(function($){ //separate scope to keep everything "private" for each module
//do additional javascript if required
})(jQuery);
</script>
<p>...Some non-trivial content...</p>
그것은 modest에서 다음과 같습니다 :
main.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<include>reusablePiece</include>
</head>
<body>
<reusablePiece/>
</body>
</html>
reusablePi 여기
은 간단한 예제 ece.xml<header>...Some non-trivial content...</header>
헤더를 PHP에 넣고 페이지에 넣을 때의 제한 사항은 무엇입니까? –
모든 뷰 엔진이 사용되고 있습니까? 아니면 그냥 HTML을 똑바로? – tymeJV
이것 좀보세요 : http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – Alvaro