requireJs - 2. html 로드하기
git : https://github.com/Jorife/requirejs2
underscore js에서 제공하는 소스는 requirejs에서 AMD를 지원하지 않습니다. 그래서 아래와 같이 AMD가 가능한 소스를 제공합니다.
[1. 컴퓨터 관련 지식/ㅤ1.3. Tips] - AMD를 지원하는 Underscore 소스
지난 글에서는 requireJs의 기본적인 사용방법에 대해 알아보았습니다.
이번 글에서는 requireJs와 requireJs의 text 플러그인을 사용하여 html을 로드하는 방법에서 알아보려고 합니다.
=======================================================================================================
<!DOCTYPE>
<HTML>
<!-- index.html -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>SAMPLE2</TITLE>
<script type="text/javascript" src="./libs/requirejs/2.1.2/require.js" data-main='./app/main.js'></script>
</HEAD>
<BODY></BODY>
</HTML>index.html의 기본적인 틀은 저번과 같습니다. 이번 글에서는 <body></body> 태그 내에 문서를 동적으로 로드해보겠습니다.
(function(root){
/* main.js */
requirejs.config({
shim: {
'text': ['underscore','jquery'],
/* text라이브러리를 사용하기 위하여 underscore과 jquery를 먼저 로드 */
},
paths: {
'jquery' : 'http://code.jquery.com/jquery-latest.min',
'text': '../libs/requirejs/plugins/text.min',
'underscore' : '../libs/underscore'
},
});
require(['text'],function(){
require(['app'], function(App) {
App.initialize();
});
});
})();지난 글에 이어서 간단히 설명드리면, [path]에서는 로드할 라이브러리와 경로를 지정하고, [shim]에서는 해당 라이브러리를 사용하기 위하여 필요한 라이브러리를 먼저 로드합니다.
define([
/* text*/
'text!./html/main_template.html',
'./js/black',
'./js/green'
], function(ViewTemplate, BlkCtrl, GrnCtrl){
/* app.js */
'use strict';
var Control = {
initialize: function() {
this.loadTemplate();
this.btnListener1();
this.btnListener2();
},
loadTemplate: function() {
this.compiled = _.template(ViewTemplate);
$('body').append(this.compiled());
},
btnListener1: function(){
$('#btn1').on('click', function(){
BlkCtrl.loadTemplate();
});
},
btnListener2: function(){
$('#btn2').on('click', function(){
GrnCtrl.loadTemplate();
});
}
};
return Control;
})main.js에서 호출한 initialize() 함수가 먼저 호출됩니다. 해당 함수는 loadTemplate()을 호출하여 html문서를 로드하고 btnListener1(), btnListener2()을 호출하여 이벤트 리스너를 등록해줍니다.
<!-- main_template.html -->
<div>
<h1>Hi This is the main page!!</h1>
</div>
<div>
<button id="btn1">Append Black</button>
<button id="btn2">Append Green</button>
</div>loadTemplate()를 마치면 <body> 태그에 해당 html이 append 됩니다.
이 페이지에서 btn1을 누르면 BlkCtrl의 loadTemplate() 함수를 호출하고 btn2를 누르면 GrnCtrl의 loadTemplate()를 호출하게 됩니다.
<!-- black.html -->
<div style="background-color: black; color:white;">
Blaaaaaack!
</div>define([
'text!../html/black.html',
], function(ViewTemplate){
/* black.js */
'use strict';
var Control = {
loadTemplate: function() {
this.compiled = _.template(ViewTemplate);
$('body').append(this.compiled());
},
};
return Control;
})
<!-- green.html -->
<div style="background-color: green;">
<h1>GREEEEN!</h1>
</div>define([
'text!../html/green.html',
], function(ViewTemplate){
/* green.js */
'use strict';
var Control = {
loadTemplate: function() {
this.compiled = _.template(ViewTemplate);
$('body').append(this.compiled());
},
};
return Control;
})black과 green의 html과 javascript 코드는 위와 같습니다.
최초 페이지 로드 시 app.js에서 로드한 main_template.html의 내용이 body 태그에 append 되었습니다.
"Append Black" 버튼을 클릭하여 main_template.html에 추가적으로 black.html이 append 되었습니다.
"Append Green" 버튼을 클릭하여 추가적으로 green.html이 append 되었습니다.
이 글에서는 append를 사용하여 태그를 추가했지만, $(#).html() 함수를 이용하여 dom 자체를 변경하여 페이지를 새로 로드하지 않고 UI를 변경할 수 있습니다.
해당 예제에서 구성한 폴더의 구성은 아래 이미지와 같습니다.
'개발관련 > ㅤJavaScript' 카테고리의 다른 글
| 간단한 map 함수 사용법 (2) | 2022.04.11 |
|---|---|
| 배열 내의 데이터를 좀 더 직관적 선언하기 (0) | 2022.04.06 |
| 오늘과 내일의 millisecond 구하기 (0) | 2020.05.30 |
| requireJs - 1. 시작하기 (0) | 2019.12.21 |
이 글을 공유합시다
