RequireJS란
각 js간의 의존성을 관리하고 동적로딩을 지원하는 JS라이브러리이다.
Rhino나 Node와 같은 타 자바스크립트 환경에서 사용할 수 있고 미리 호출할 필요없이 필요할때만 호출하여 성능이 굿!
전역스페이스오염 혹은 scope침범등의 문제가 발생하지않도록 모듈로 지정하여 사용하는게 좋다.
모듈로 지정하면 전역변수랑 지역변수랑 겹칠일이 없다!
requireJs를 사용하는 흐름은
view단에서 requirejs 불름 -> require지시어사용 -> define된 function을 최종적으로 가져옴
1. 최종적으로 가져올 js
//Plus.js
define([], function() {
return {
add : function(a,b){
return a+b;
}
};
});
a+b의 기능을 하고싶고 그 기능을 js폴더안에 plus.js라는 파일에 기입하였다.
모듈을 선언하는 뜻인 define.
function은 해당 js를 호출하였을때 실행할 코드와 return 될 값 (혹은 개체)를 생성한다.
즉 plus.js를 호출하면 return된 값, 객체를 사용할수있게된다.
2. plus.js를 가져올 js
//index.js
require(["/js/Plus.js"], function(Plus) {
var a=1, b=2;
var sum = Plus.add(a,b);
});모듈을 사용할수있게 해주는 require.
첫번째 인자로는 의존성(쓰고싶은 js가 어디있는지 경로), 두번째 인자로 실행코드함수가 위치한다.
의존성에 들어가있는 경로의 js를 function ( ) 괄호 안에 있는 이름으로 사용하겠다는 의미이다.
3.뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<h1> Hello~~ </h1>
<script type="text/javascript" src="/js/lib/require.js"></script>
<script type="text/javascript" src="/js/lib/jquery.min.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
</body>
</html>뷰에서는 이런식으로 require.js 파일, 경우에따라 jquery파일, 마지막으로 모듈을 사용할 수 있는 js를 추가한다.
좀더 간결하게 사용하기위해 require되는 부분을 수정한다.
require(["/js/Plus"], function(Plus) {
var a=1, b=2;
var sum = Plus.add(a,b);
});이런식으로 .js를 생략가능하며
아예
require(["Plus"], function(Plus) {
var a=1, b=2;
var sum = Plus.add(a,b);
});이렇게 경로를 줄여 줄 수도 있다.
그러기위해서는 별도양식이 적힌 js파일을 만들어야 하는데
//format.js
require.config({
baseUrl: "js", // 모듈을 로딩할 기본 패스
waitSeconds: 15 // 모듈의 로딩 시간을 지정. 시간초과시 Timeout Error 가 throw
});요렇게 만들어놓고
require.js가 로딩된 다음에 기타 모듈을 로딩하기 전에 기입해둔다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<h1> Hello~~ </h1>
<script type="text/javascript" src="/js/lib/require.js"></script>
<script type="text/javascript" src="/js/lib/jquery.min.js"></script>
<script type="text/javascript" src="/js/format.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
</body>
</html>이런식으로 require.js 와 모듈을 사용하는 index.js 사이에 format.js를 넣어두면 OK!
mustache 와 함께 사용
1. 만들고싶은 경로에서 NEW -> 파일명.mustache 해서 머스타취파일을 만들어주는데 본인이 원하는 html형식을 기입
//boardTemplate.mustache
<table id="boardTable" style="text-align: center; width: 50%">
<tr>
<th>번호</th>
<th>제목</th>
<th>내용</th>
</tr>
{{#boardList}}
<tr style="border: 1px solid black;" >
<td>{{boardNumber}}</td>
<td>{{title}}</td>
<td>{{contents}}</td>
</tr>
{{/boardList}}
</table>
<button id="add">게시글 추가</button>
2. js파일을 만들어준다.
//board.js
/**
* Created by Administrator on 2017-02-20.
* @module screen/serverAPITest
*/
define(['stache!screen/boardTemplate', 'jquery'], function (boardTemplate) {
return function () {
$.get('/board/getList', {}, function (result) {
$('body').empty().append(boardTemplate(result));
});
$('body').on('click', '#add', function () {
location.href="write.html";
});
$('body').on('click', '#boardTable tr', function () {
var boardSeq = $(this);
location.href='detail.html?boardSeq='+ boardSeq.children().eq(0).text();
});
}
});define 다음에 첫번째 인자에는 stache! / 경로/boardTemplate 를 써주고 function 안에 mustache 파일명 (boardTemplate) 을 적어준다. define에서 기존에 적었던 mustache 파일을 가져오는 것이다.
나머지 return function 안에는 jquery 등의 자바스크립트부분을 기술해주면된다.
참고로$.get 요 부분은 기존에 길었던 ajax를 간략하게 서술한 부분!
잠깐! ajax 설명
$.get('경로', 데이터, function (result) {
//success시 실행되어야할 코드
});
ajax 사용시와 동일하게
경로를 적어주고 데이터를 넣어주고 result로 결과값이 들어온다.
이때 데이터부분은 바로 변수를 넣으면 에러가 난다.
기존에 ajax 는
데이터가 들어갈 자리에 var data = 3; 이라고 선언한 것을 넣었는데 어째선지
var data = { } 의 JSON 형식으로 만들어줘야지 들어갔다.
//안됨
var boardNumber = 4;
$.get('경로', boardNumber, function (result) {
});
//됨
var data ={
boardNumber = 3
}
$.get('경로', data, function (result) {
});
만약 스프링이라면
@ResponseBody
@RequestMapping(value = "/getDetail")
public String getDetail(@RequestParam String boardNumber){
블라블라
}요렇게 받을텐데, RequestParam 의 파라메터 변수명과 내가첨부한 데이터 변수명이 맞아야한다.
3. html에서 호출
board.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/lib/require.js"></script>
<script src="/lib/require-config.js"></script>
<script>
require(['screen/board'], function (board) {
board();
});
</script>
</head>
<body>
</body>
</html>require의 첫번째 인자로는 위에 작성했던 board.js 의 경로를 적어준다. screen/board.js 지만 js는 생략가능하므로 뺐다.
function () 괄호안에도 js파일과 같은 이름으로 설정해주고 board(); 를 호출하였는데
굳이 똑같은 이름으로 호출하나 이유가 있는지는 잘 모르겠다. 나중에 덧붙일것
'과거 게시글' 카테고리의 다른 글
| String 문자열 비교 (.equalsIgnoreCase()) (0) | 2019.04.12 |
|---|---|
| Scheduler 라이브러리 (0) | 2019.04.11 |
| Mustache (0) | 2019.04.08 |
| Native App? Mobile app? Hybrid App? (0) | 2019.04.08 |
| 티스토리 시작!!! (0) | 2019.04.07 |